1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Jpeg oder PNG Grafik mittels JavaScript animieren

Discussion in 'Web-Know-how für die Homepage' started by scullhead, Aug 2, 2011.

Thread Status:
Not open for further replies.
  1. scullhead

    scullhead Byte

    Hallo,

    weiß jemand wie man eine JPEG oder PNG Grafik mittels JavaScript animieren kann?

    Dabei meine ich nicht, dass man eine Sequenz von Einzelbildern hat, die dann per JavaScript nacheinander geladen werden - dafür hab ich bereits etliche Anleitungen im Netz gefunden.

    In der Methode die ich meine sind die Einzelbilder der Animation als eine Art "Filmstreifen" in einer Grafik untereinander angeordnet. Ein Beispiel ist das animierte Logo dieser Website: http://www.websmith.de

    Ich vermute, dass per JavaScript quasi duch das bild "gescrollt" wird und immer der Aussschnitt des nächsten Bildes an der selben Stelle erscheint was dann den Eindruck einer Animation erweckt.

    Aus dem Quelltext der o.g. Website bin ich leider nicht schlau geworden. Aber evtl. kennt jemand ein gutes Tutorial mit Beispielen dafür.

    Danke schonmal :)
     
    scullhead, Aug 2, 2011
    #1
  2. kalweit

    kalweit Hüter der Glaskugel

    Das Verschieben des Bildes ist kein großes Thema - über die Eigenschaft "style.top" und ein window.setInterval() lässt sich das regeln. In einer globalen Variable "merkst" du dir die aktuelle Position (und damit das angezeigte Bild). Ein wenig frickelig ist das Verstecken der ungenutzen Bildteile. Dazu musst du dafür sorgen, dass sich alle Seitenelemente über dem Wechselbild befinden (d.h. einen größeren z-Index) sowie einen Hintergrund (d.h. Farbe oder Bild) haben. An der Stelle wo das Bild erscheinen soll, kommt ein Element, was keinen Hintergrund hat und damit das Wechselbild "durchscheinen" lässt.
     
    kalweit, Aug 2, 2011
    #2
  3. scullhead

    scullhead Byte

    Danke schonmal für den Tipp - werds bei Gelegenheit ausprobieren.

    Aber evtl. kennt noch jemand ein gutes Tutoial. Vielleicht kann man auch so etwas mittels eine Java Libary wie JQuery realisieren...
     
    scullhead, Aug 2, 2011
    #3
Thread Status:
Not open for further replies.

Share This Page