Effet de parallaxe de défilement automatique sans échange JavaScript_Experience

Cet effet a été calqué sur le didacticiel de parallaxe de Chris Coyier et le fond de ciel étoilé a été utilisé avec la permission de Chris.

Effet de course :
Regardez ici : http://www.fofronline.com/experiments/parallax/#experiment
Ce L'effet peut être prévisualisé normalement dans Safari 4 Beta et Google Chrome, et aucun JavaScript n'est requis pour obtenir cet effet.
(Mais il ne peut pas être consulté dans IE7 et versions antérieures)

Méthode d'implémentation :
Le code HTML de cette page est très simple. Un div est utilisé pour définir l'arrière-plan et un autre div est utilisé pour définir le. content. CSS3 est utilisé ici. La technologie d'arrière-plan multiple dans , des balises supplémentaires sont donc nécessaires pour représenter d'autres images d'arrière-plan.

Définissez le conteneur d'arrière-plan CSS sur une position fixe et laissez-le occuper le bas de la page via les attributs haut, gauche, bas et droit. L'image d'arrière-plan est spécifiée via l'attribut background et l'arrière-plan de niveau supérieur est spécifié en premier. Chaque image est positionnée en fonction d'un pourcentage, et leurs positions sont différentes, de sorte que lorsque la taille du conteneur change, chaque image se déplace, produisant ainsi un effet de parallaxe

Selon la pensée habituelle, les effets d'animation ne peuvent être produits que lorsque la page est zoomée ou contrôlée à l'aide de JavaScript. Une autre méthode est utilisée ici. En déplaçant le bord gauche du conteneur de l'image d'arrière-plan (par exemple de 0px à 100px). Cela modifie la largeur globale du conteneur, provoquant un déplacement différent de l'image d'arrière-plan en fonction de son pourcentage. En réglant la durée et la position gauche suffisamment grandes, un effet de mouvement de parallaxe continu sera produit.

Vous pouvez augmenter la vitesse de déplacement pour obtenir des effets plus intéressants, et vous pouvez également ajouter quelques actions de souris. Le code CSS final est le suivant :

Petite information : L'effet parallaxe est à l'origine un terme astronomique Lorsque nous observons le ciel étoilé, les étoiles éloignées de nous se déplacent plus lentement, tandis que les étoiles plus proches de nous se déplacent plus rapidement. Lorsque nous sommes assis dans la voiture et regardons par la fenêtre, nous avons aussi cette sensation. Les montagnes au loin ne semblent pas bouger, mais les rizières à proximité passent rapidement. Les effets de parallaxe sont utilisés dans de nombreux jeux pour ajouter une impression tridimensionnelle à une scène. (Traduction/Cao Sijia)