J'ai une image JPG avec la vue 360 degrés de la ville (9000px par 1000px). J'ai besoin de créer une page avec La première partie - Le défilement de gauche à droite de l'image est très simple - utilisez simplement jQuery.animate (...). Mais comment puis-je retourner de manière transparente au début de l'image (après avoir terminé une virgule de 359 degrés), l'utilisateur ne remarquera pas «sauter» ou quelque chose comme ça?
Y a-t-il des exemples sur le Web probablement?
Je vis ne cible que le navigateur HTML5 / CSS3 (WebKit) uniquement, et je peux utiliser la dernière jQuery.
merci.
6 Réponses :
Si vous ne ciblez que des navigateurs WebKit, vous pouvez y accomplir avec CSS3 seul. CSS3 a un support intégré pour les animations. En précisant «infini» avec la propriété Itération-Count, votre animation ira à jamais et ... vous obtenez le point; -)
<img src="image.jpg" alt="image" />
+1; C'est des choses intéressantes. Pour ce que ça vaut la peine, il s'agit d'un exemple de rotation de l'image comme l'op désir: jsfiddle.net/k5bug . (C'est une rotation plus lisse que la voie du canevas.)
Mais il y a un "saut" très notable. Puis-je faire fonctionner la solution de @ PIMVDB?
L'idée principale derrière le fond rotatif est que vous dessinez deux images: une à (J'utilise deux images en supposant Vous pouvez utiliser E.g.:
(x, 0) et une autre à (x - w, 0) avec avec < code> w étant la largeur de l'image. Vous pouvez augmenter x au fil du temps et dès que x === w vous réinitialisez x = 0 . Vous ne voyez pas visuellement cette réinitialisation car la deuxième image est positionnée à la même position exacte que la première. Après la réinitialisation, vous pouvez tout recommencer, de sorte que la rotation regarde sans fin.
largeur de conteneur <= largeur de l'image .)
Il y a des solutions sur lesquelles ils appellent "couture d'image" que les gens ont fait des plugins pour.
http://www.jquery4u.com/plugins / jQuery-360-degrés-image-afficheur-plugins /
Celui-ci fonctionne aussi bien pour mobile aussi. http://spritrespin.ginie.eu/examples.html
Vous pouvez jouer avec la position d'arrière-plan et la fonction d'animation de jQuery, voir l'exemple:
Prenez un arrière-plan sans fin et d'animer de 0 à la largeur de l'arrière-plan dans l'événement complet Définissez la position d'arrière-plan sur 0 et tirez une autre fois l'animation.
Vous pouvez utiliser animations CSS pour atteindre un effet "regarder autour" pour parallax!
au lieu d'ajouter plusieurs images et d'animer leur gauche code>, etc., vous pouvez simplement définir un arrière-plan et animer son arrière-plan-position code>: p> #bgscroll {
background:url(/*some nice seamless texture*/);
-moz-animation-duration: 13s;
-moz-animation-name: bgscroll;
-moz-animation-iteration-count: infinite;
}
@-moz-keyframes bgscroll{
from {background-position: 0 0;}
to {background-position: 100% 0;}
}
Vous pouvez le faire sans jQuery en utilisant des animations CSS3. Je suppose que l'image de fond de la ville est configurée pour répéter-x de manière transparente sur le conteneur.
Vous configurez vos images clés pour animer l'image d'arrière-plan la largeur de l'image répétable et indiquez-la de boucler infiniment sans délai. Par exemple, mon image de nuages dérivants est de 1456 px larges et répète x: Assurez-vous de définir @ -WebKit-Keyframes, @ -moz-Keyframes, @ -O-- Clare-clés et -WebKit-Animation, -Moz-Animation, -O-Animation La même chose pour couvrir FF, Safari et Chrome.
Utiliser une toile va bien? Voici un brouillon: jsfiddle.net/yqmag .
Wow! Cela semble prometteur. Ceci est pour Playbook Tablet - J'espère que Toile y travaille. Pouvez-vous s'il vous plaît faire une réponse?