Ich habe ein JPG-Bild mit der 360-Grad-Ansicht der Stadt (9000px um 1000px). Ich muss eine Seite mit endlos rotierendem Hintergrund erstellen, die dem Benutzer beispielsweise den Eindruck einer rotierenden Webkamera vermittelt.
Der erste Teil - Scrollen von links nach ganz rechts vom Bild ist sehr einfach - verwenden Sie einfach jQuery.animate (...). Aber wie kann ich nahtlos zum Anfang des Bildes zurückkehren (nachdem es 359 Grad gedreht hat), so dass der Benutzer "Sprung" oder ähnliches nicht bemerken wird?
Gibt es wahrscheinlich Beispiele im Internet?
Ich ziele nur auf HTML5 / CSS3 (Webkit) Browser, und ich kann die neueste jQuery verwenden.
Danke.
Die Hauptidee hinter dem rotierenden Hintergrund ist, dass Sie zwei Bilder zeichnen: eins in (x, 0) und ein anderes in (x - w, 0) mit w als Breite des Bildes. Sie können x im Laufe der Zeit erhöhen und sobald x === w Sie x = 0 zurücksetzen. Sie werden diesen Reset nicht visuell sehen, da das zweite Bild genau an der gleichen Position positioniert ist wie das erste. Nach dem Zurücksetzen können Sie wieder von vorne beginnen, so dass das rotierende endlos aussieht.
(Ich verwende zwei Bilder unter der Annahme width of container <= width of image .)
Sie könnten z. B. verwenden:
Sie können dies ohne jQuery mithilfe von CSS3-Animationen tun. Ich gehe davon aus, dass das Hintergrundbild der Stadt so eingestellt ist, dass es nahtlos auf dem Container wiederholt wird.
Sie richten Ihre Keyframes ein, um das Hintergrundbild mit der Breite des wiederholbaren Bildes zu animieren, und weisen Sie an, dass die Schleife unbegrenzt und ohne Verzögerung wiederholt werden soll. Zum Beispiel ist mein Bild der treibenden Wolken 1456 px breit und wiederholt x:
%Vor%Stellen Sie sicher, dass Sie @ -webkit-keyframes, @ -moz-keyframes, @ -o-keyframes und -webkit-animation, -moz-animation, -o-animation auf FF, Safari und Chrome einstellen.
Sie können mit der Hintergrundposition und der jquery animate Funktion spielen, siehe das Beispiel:
Nimm einen endlosen Hintergrund und animiere von 0 bis zur Breite des Hintergrunds im kompletten Event, setze die Hintergrundposition auf 0 und feuere die Animation erneut.
Wenn Sie nur Webkit-Browser verwenden, können Sie dies nur mit CSS3 erreichen. CSS3 hat integrierte Unterstützung für Animationen. Durch Angabe von 'infinite' mit der iteration-count -Eigenschaft wird Ihre Animation für immer und ewig fortgesetzt und ... Sie erhalten den Punkt; -)
%Vor%Und natürlich das Bild in Ihrem HTML:
%Vor%Sie könnten CSS-Animationen verwenden, um einen solchen "Look-around" -Effekt zu erzielen - ideal für Parallaxe!
Anstatt mehrere Bilder hinzuzufügen und deren left etc zu animieren, könntest du einfach einen Hintergrund setzen und sein background-position :
Dies würde mit neuen Gecko / Chromium Browsern funktionieren (w / vendor prefix adjusted); fiedled
Tags und Links jquery css html5 jquery-animate