10 extraits CSS et JavaScript pour créer l'effet de défilement de parallaxe

Il y a beaucoup de confusion à propos de la conception de la parallaxe et de son fonctionnement sur le Web. De manière générale, la conception de parallaxe utilise le mouvement pour créer l'illusion de profondeur sur une page.

Cela peut concerner des changements d'arrière-plan ou des éléments à position semi-fixe qui se déplacent parallèlement au défilement de l'utilisateur. Nous avons couvert de nombreux exemples de sites Web, mais nous n'avons pas détaillé les techniques impliquées.

Pour cette collection, j'ai choisi mes extraits CSS et JavaScript préférés pour créer des dispositions de parallaxe. Tous les exemples offrent un code source gratuit, vous pouvez donc jouer avec des extraits et même les utiliser dans vos propres projets.

1. La Grande Chute de CJ Gammon

Cet exemple de parallaxe est l'une des interfaces les plus uniques que j'ai jamais trouvées. Il utilise un script personnalisé pour créer un sprite en cascade qui semble couler sans fin sur la page. Il a été construit sur des éléments de canevas contrôlés via JavaScript, c'est donc une configuration assez technique.

Pour la plupart, cela témoigne de ce qui est possible dans le développement Web moderne. Apprendre l'élément canvas vous donne beaucoup de contrôle sur votre conception.

Voir le stylo The Great Fall de CJ Gammon

2. CSS Scrolling Parallax par Sebastian Schepis

Voici un effet de parallaxe plus pratique avec un arrière-plan fixe et des pages plus grandes en haut. Lorsque vous faites défiler, chaque section de page apparaît au-dessus de l'arrière-plan. Cela crée l'illusion de profondeur, et c'est l'un des éléments clés d'une excellente conception de parallaxe.

Le développeur Sebastian Schepis n'a utilisé que CSS pour cette page, et c'est un concept assez simple. Je pense que n'importe qui pourrait le cloner facilement, sans parler de la conception de l'arrière-plan qui pourrait être grandement améliorée.

Voir l'effet Pen CSS Scrolling Parallax par Sebastian Schepis

3. Simple Image Tag Parallax par Renan Breno

Vous trouverez souvent des conceptions de parallaxe associées à de grandes images d'arrière-plan en plein écran. Celles-ci ne sont que trop courantes sur les sites d'entreprise et les startups où elles présentent généralement une certaine "vitesse de défilement" de parallaxe pour l'arrière-plan.

La différence ici n'est pas tant dans la vitesse à laquelle vous faites défiler la page ou dans la taille de l'emplacement de l'image. Au lieu de cela, vous voyez à quelle vitesse l'image se déplace à travers l'arrière-plan de la page pendant que vous faites défiler. C'est un effet de parallaxe subtil, mais cette mise en page est un excellent modèle pour voir les différentes vitesses d'animation en action.

Voir la parallaxe de l'étiquette d'image simple du stylet par Renan Breno

4. Parallaxe et arrière-plans d'images fixes

Les arrière-plans d'images fixes fonctionnent bien pour diviser les pages et diviser les sections de contenu de manière égale. Lorsque vous faites défiler, vous pouvez avoir l'impression que les sections de page individuelles sont plus hautes que les images d'arrière-plan. Tout cela est conçu pour donner vie à l'effet de parallaxe lors du défilement.

Je n'utiliserais pas cette mise en page exacte car les zones de contenu semblent un peu minces. Mais si vous aimez ce style, je vous recommande de ponctuer chaque section de page avec une image différente pertinente pour votre site Web.

Voir les Hackdays Pen #Maincode par chaobu

5. Parallaxe CSS par Paulo Cunha

Cet exemple de parallaxe est un exemple unique du fonctionnement des effets de parallaxe. Tout le contenu de la page repose sous une grande image de héros qui disparaît sous le contenu lors du défilement. Cela utilise également la position fixe de l'image pour donner l'impression que la page se déplace sur l'image, plutôt que l'image reste fixe.

Vous pouvez utiliser ce même effet avec une mise en page à long défilement et il aurait un style de conception similaire. Cela fonctionnerait mieux pour les articles de blog uniques avec de grandes images en vedette ou des pages de destination qui utilisent de grands héros pour attirer l'attention.

Voir le stylet CSS Parallax de Paulo Cunha

6. Conception de parallaxe par Katie Rogers

Voici une conception de parallaxe intéressante pour un exemple de page de mariage. Il a une conception de page divisée où les images séparent les nombreuses zones de contenu différentes avec un défilement fixe parallaxe. Tout fonctionne sur CSS, ce qui est agréable, et toutes les images d'arrière-plan restent fixes lors du déplacement vers le bas de la page.

Cet effet fonctionne car les zones de contenu ont de grandes ombres de boîte tombant sur les arrière-plans. Naturellement, cela crée l'illusion de profondeur en donnant à la page une source de lumière et une hiérarchie théoriques - une très bonne idée pour une mise en page d'une seule page.

Découvrez le Pen Parallax Design de Katie Rogers

7. Défilement de la parallaxe de l'image d'arrière-plan par Rich Howell

Plus tôt, j'ai mentionné comment la vitesse de défilement pouvait varier en fonction du taux de changement de la position de l'arrière-plan. Cet exemple est la comparaison parfaite pour voir comment cela fonctionne en action.

Notez que vous devrez utiliser la barre de défilement pour voir les effets de cet exemple. J'ai essayé avec la molette de la souris et je n'ai vu aucune différence, mais vous remarquerez des changements de vitesse dans les colonnes lorsque vous déplacez la barre de défilement.

Aucune de ces vitesses n'est une représentation erronée ou inexacte de la conception de la parallaxe. Ce ne sont que des méthodes différentes pour créer du mouvement sur la page, et ce petit exemple est un excellent moyen de visualiser de nombreuses options.

Voir la paralaxe de l'image d'arrière-plan du défilement du stylet par Rich Howell

8. Fond de parallaxe étoilée par Saransh Sinha

Bien que cet effet ne soit pas lié au défilement, il est directement lié à la conception de la parallaxe. Il utilise du CSS pur pour créer une animation d'étoile de parallaxe en arrière-plan de la page. Vous pouvez ajouter du texte et même une zone de contenu sur la page, mais les étoiles créent immédiatement de la profondeur à première vue.

L'animation passe par CSS, mais cet extrait utilise Sass et Compass, il serait donc utile de comprendre avant de faire des modifications.

Voir l'arrière-plan Pen Parallax Star dans CSS par Saransh Sinha

9. Canvas Parallax Skyline par Jack Rugile

Parfois, les conceptions de parallaxe ciblent également le mouvement de la souris avec les fonctionnalités de défilement. Cette conception de toile crée un effet d'horizon sans fin qui réagit au mouvement de la souris sur la page. Lorsque vous repositionnez votre souris, l'angle de vue change. Mais l'animation reste la même et vous pouvez voir cette ligne d'horizon se déplacer avec une hiérarchie visuelle claire.

Naturellement, cela nécessite JavaScript pour l'animation car c'est une idée assez complexe. Mais ce n'est pas non plus quelque chose que vous trouverez sur de nombreux sites Web, donc ce n'est pas non plus quelque chose que vous copierez sur votre site. Mais en tant que concept de parallaxe, celui-ci est vraiment intéressant.

Voir le Pen Canvas Parallax Skyline de Jack Rugile

10. Filtre en verre brisé par Bajjy Xilo

J'ai déjà vu cet effet sur des sites Web, créant un design très particulier. Le filtre en verre brisé donne l'illusion d'une image d'arrière-plan divisée en plusieurs parties différentes. On dirait presque que l'image était sur une vitre, et elle s'est brisée, fracturant l'image et faussant l'image.

Vous pouvez reproduire cet effet avec du CSS pur, et c'est l'un de ces effets soignés qui est cool à faire mais qui peut ne pas avoir d'utilisation pratique et réelle au-delà des conceptions fantaisistes. Pourtant, c'est un exemple impressionnant de profondeur de parallaxe et de mouvement lors du défilement.

Voir le filtre css Pen BrokenGlass de Bajjy Xilo