{"id":2147,"date":"2012-03-27T08:37:03","date_gmt":"2012-03-27T06:37:03","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2147"},"modified":"2020-11-03T16:23:53","modified_gmt":"2020-11-03T15:23:53","slug":"css3-effet-parallaxe-sans-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/css3-effet-parallaxe-sans-javascript","title":{"rendered":"CSS3 – Effet parallaxe (sans JavaScript)"},"content":{"rendered":"

Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3.
\nC’est \u00e0 la suite de l’article de Simon Kern sur Alsacr\u00e9ations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement con\u00e7u avec JavaScript.<\/p>\n

L’article zoom sur l’effet parallaxe<\/a> de Simon est bien con\u00e7u, je vous invite \u00e0 le lire si vous pr\u00e9f\u00e9rez l’utilisation de jQuery, ou si vous souhaitez d\u00e9couvrir une alternative ou un compl\u00e9ment \u00e0 ce tutoriel.
\nJ’en profite pour remercier Simon qui m’a autoris\u00e9 \u00e0 reprendre son design ainsi que la base du code qu’il a con\u00e7u pour l’article sur Alsacr\u00e9ations.<\/p>\n

D\u00e9monstration<\/a><\/p>\n

Place \u00e0 l’explication !<\/p>\n

Pour les personnes qui cherchent un effet smooth pour passer d’une ancre \u00e0 l’autre, beaucoup plus simple que cette solution, sachez que CSS permet de le faire tr\u00e8s rapidement en 3 lignes de code : Effet smooth scroll avec scroll-behavior<\/a><\/p>\n

Concept<\/h2>\n

Pour r\u00e9aliser cet effet il nous faut plusieurs \u00e9l\u00e9ments qui vont nous permettre de simuler diff\u00e9rents plans. Ces plans vont se mouvoir dans le m\u00eame sens mais \u00e0 vitesses diff\u00e9r\u00e9es afin de donner l’impression que certains sont en premier plan (mouvements rapides) d’autres sont en arri\u00e8res plan (mouvements plus lents).<\/p>\n

Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide \u00e0 l’autre.<\/p>\n

Sch\u00e9matisation<\/h2>\n

Nous utiliserons trois plans pour r\u00e9aliser cet effet : un fond imag\u00e9 en CSS (dernier plan), notre contenu qui se trouve naturellement dans le flot du document (second plan), et des \u00e9l\u00e9ments plac\u00e9s ci et l\u00e0 (premier plan) pour ajouter de la profondeur.<\/p>\n

\"\"
L’encadr\u00e9 gris repr\u00e9sente un slide, le fond gris une image de fond, le bloc jaune un bloc de contenu, et le personnage blanc un \u00e9l\u00e9ment de premier plan<\/figcaption><\/figure>\n

Le principe de l’animation \u00e9tant \u00e9tabli, il nous faut \u00e9galement garder en t\u00eate que CSS ne permet pas de positionner les \u00e9l\u00e9ments en fonction de la position du contenu dans la page, ou en fonction de la position de la souris.
\nNous allons donc utiliser la pseudo classe target<\/code> afin de d\u00e9terminer \u00e0 quelle slide nous nous trouvons, et effectuer les animations en cons\u00e9quence.<\/p>\n

Base HTML<\/h2>\n

Voici un code all\u00e9g\u00e9 qui reprend le contenu du document de d\u00e9monstration<\/a>. (je n’ai repris que le contenu de body<\/code>)<\/p>\n

<!-- \u00e9l\u00e9ments cach\u00e9s pour jouer avec :target -->\r\n<span id=\"s1\"><\/span>\r\n<span id=\"s2\"><\/span>\r\n<span id=\"s3\"><\/span>\r\n\u00a0\r\n<!-- Le gros conteneur qui va glisser -->\r\n<div id=\"wrap\">\r\n\u00a0\r\n\t<!-- La navigation -->\r\n\t<ul id=\"nav\">\r\n\t\t<li><a href=\"#s1\">Splash<\/a><\/li>\r\n\t\t<li><a href=\"#s2\">Lorem Schnapsum<\/a><\/li>\r\n\t\t<li><a href=\"#s3\">Credits<\/a><\/li>\r\n\t<\/ul>\r\n\u00a0\r\n\t<!-- La slide 1 -->\r\n\t<div id=\"slide1\">\r\n\t\t<div class=\"slide_inside\">\r\n\t\t\t<!-- Le logo -->\r\n\t\t\t<h1><img src=\"images\/logo-stop-wars.png\" alt=\"Stop Wars\"><\/h1>\r\n\t\t<\/div> <!-- \/.slide_inside-->\t \t\r\n\t<\/div> <!-- \/#slide1 -->\r\n\u00a0\r\n\t<!-- La slide 2 -->\r\n\t<div id=\"slide2\">\r\n\t\t<div class=\"slide_inside\">\r\n\t\t\t<!-- Les deux \u00e9l\u00e9ments en 1er plan -->\r\n\t\t\t<!-- Mettez ici les images que vous voulez :) -->\r\n\t\t\t<img src=\"images\/bomb-squad-trooper.png\" id=\"trooper\" alt=\"\">\r\n\t\t\t<img src=\"images\/clone.png\" id=\"clone\" alt=\"\">\r\n\u00a0\r\n\t\t\t<h2>Star Wars Parallax<\/h2>\r\n\t\t\t<p>Lorem Salu bissame !<\/p>\r\n\t\t<\/div> <!-- \/.slide_inside-->\t     \t\r\n\t<\/div> <!-- \/#slide2 -->\r\n\u00a0\t\r\n\t<!-- La slide 2 -->\r\n\t<div id=\"slide3\">\r\n\t\t<div class=\"slide_inside\">\t\t\t\r\n\t\t\t<h2>Credits<\/h2>\t\t\r\n\t\t\t[\u2026]\r\n\t\t<\/div> <!-- \/.slide_inside-->\t    \r\n\t<\/div> <!--  \/#slide3 -->\r\n<\/div><\/code><\/pre>\n
Pour reprendre la structure de mani\u00e8re sch\u00e9matique, nous avons \u00e0 peu pr\u00e8s cela :<\/p>\n
\"Trois<\/p>\n
Nous aurions pu utiliser HTML5 sans aucun probl\u00e8me, le principe est le m\u00eame.
\nMaintenant nous devons passer au CSS.<\/p>\n
Beaucoup de styles<\/h2>\n
Dimensionnons nos conteneurs et pla\u00e7ons nos images de fond. Le code suivant est comment\u00e9 pour vous aider \u00e0 le comprendre.<\/p>\n
body {\r\n\tmargin: 0; padding: 0; \/* annulation des marges *\/\r\n\toverflow: hidden; \/* on cache le d\u00e9bordement de contenu *\/\r\n\tcolor: #fff;\r\n\tbackground: #000;\r\n}\r\n\u00a0\r\n#wrap {\r\n\t\/* position du conteneur pour le pr\u00e9parer \u00e0 bouger *\/\r\n\tposition: relative;\r\n\ttop: 0;\r\n\t\/* on pr\u00e9pare la transition \u00e0 venir *\/\r\n\ttransition: top 1.4s cubic-bezier(.49,.22,.52,1.35);\r\n}\r\n\u00a0\r\n#nav {\r\n\t\/* on fixe le menu en haut *\/\r\n\tposition: fixed;\r\n\ttop: 0; left: 0; right: 0;\r\n\tpadding: 1em 0;\r\n\tmargin: 0;\r\n\t\/* on centre les liens *\/\r\n\ttext-align: center;\r\n\tbackground: #000;\r\n}\r\n#nav li {\r\n\t\/* on aligne les \u00e9l\u00e9ments de liste *\/\r\n\tdisplay: inline;\r\n\tmargin:0;\r\n}\r\n#nav a {\r\n\t\/* on applique des marges aux liens *\/\r\n\tdisplay: inline-block;\r\n\tmargin: 0 3em;\r\n\tcolor: #eee;\r\n\t\/* on applique une petite lueur *\/\r\n\ttext-shadow: 0 0 5px #fff;\r\n\t\/* on pr\u00e9voit une petite transition (lueur) *\/\r\n\ttransition: all 1s;\r\n}<\/code><\/pre>\n
\u00c7a c’\u00e9tait pour l’aspect du cadre, nous allons mettre en styles les diff\u00e9rents slides et leur attribuer une image de fond tout en pr\u00e9voyant les transitions.
\nNous allons en profiter pour styler les contenus.<\/p>\n
\/* slides *\/\r\n#slide1, #slide2, #slide3 {\r\n\t\/* height \u00e0 adapter avec media queries *\/\r\n\theight: 1000px;\r\n\tpadding-top:100px;\r\n\t\/* pr\u00e9paration des transitions *\/\r\n\ttransition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);\r\n}\r\n\/* attribution des images de fond *\/\r\n#slide1 { background:url(images\/slide1-bg.jpg) center 0 no-repeat fixed; }\r\n#slide2 { background: url(images\/slide2-bg.jpg) center 0 no-repeat fixed; }\r\n#slide3 { background: url(images\/slide3-bg.jpg) center 0 no-repeat fixed; }\r\n\u00a0\r\n\/* Contenus des slides *\/\r\n.slide_inside {\r\n\twidth: 770px;\r\n\tmargin: 0 auto;\r\n\tposition: relative;\r\n\tbackground-color: rgba(0, 0, 0, .6);\r\n\tpadding: 50px;\r\n}\r\n\r\n#slide1 .slide_inside {\r\n\ttext-align: center;\r\n\tbackground-color: transparent;\r\n}\r\n#slide2 .slide_inside p {\r\n\twidth: 500px;\r\n\ttext-align: justify;\r\n}\r\n#slide3 .slide_inside {\r\n\tmargin-top: 50px;\r\n}<\/code><\/pre>\n
Attention, Webkit semble ne pas supporter la valeur 1.35 de la fonction cubic-bezier()<\/code>, il conviendra de corriger le tir en utilisant la syntaxe -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);<\/code><\/p>\n
Les images de fond et les contenus sont pr\u00eats.
\nOn va maintenant positionner et d\u00e9former (transform<\/code>) nos petits personnages en pr\u00e9voyant \u00e9galement leurs transitions.<\/p>\n
\/* positionnement des personnages anim\u00e9s *\/\r\n#trooper, #clone {\r\n\tposition: absolute;\r\n\tleft:-180px; top: 300px;\r\n\t\/* on tourne l\u00e9g\u00e8rement les images *\/\r\n\ttransform: rotate(10deg);\r\n\t\/* et on pr\u00e9voit une transition *\/\r\n\ttransition: all 1.4s cubic-bezier(.49,.22,.52,1);\r\n}\r\n\/* positionnement diff\u00e9r\u00e9 d'un des 2 personnages *\/\r\n#clone {\r\n\tleft: -280px;\r\n\ttop: 400px;\r\n}<\/code><\/pre>\n
Voil\u00e0, tous nos \u00e9l\u00e9ments sont positionn\u00e9s.
\nMaintenant il faut revoir le positionnement de tous ces \u00e9l\u00e9ments en fonction de l’\u00e9l\u00e9ment cibl\u00e9 lors d’un clic, c’est l\u00e0 que la pseudo classe target<\/code> va jouer son r\u00f4le.<\/p>\n
Animation en fonction de la cible<\/h2>\n
Le principe va \u00eatre le m\u00eame pour chaque \u00e9l\u00e9ment cibl\u00e9 par notre menu de navigation.
\nJe vais donc expliquer le code pour le second \u00e9l\u00e9ment cibl\u00e9 (lorsque nous cliquons sur le deuxi\u00e8me \u00e9l\u00e9ment de menu).<\/p>\n
Nous allons utiliser la m\u00e9thode propos\u00e9e par Vincent De Oliveira dans son article \u00ab\u00a0Emp\u00eacher le scroll avec l’utilisation de target<\/a>\u00a0\u00bb afin d’\u00e9viter qu’un saut dans la page soit effectu\u00e9 lorsque l’on demande \u00e0 rejoindre une ancre.<\/p>\n
\/* d\u00e9calage du conteneur vers le haut *\/\r\n#s2:target ~ #wrap {\r\n\ttop:-1000px;\r\n}\r\n\u00a0\r\n\/* d\u00e9calage des fonds de chaque slide *\/\r\n#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }\r\n#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }\r\n#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }\r\n\u00a0\r\n\/* mouvements d'un des personnages *\/\r\n#s2:target ~ #wrap #trooper { \r\n\tleft: -180px;\r\n\ttop: -100px;\r\n\ttransform: rotate(-7deg);\r\n}\r\n\u00a0\r\n\/* mouvements de l'autre personnage *\/\r\n#s2:target ~ #wrap #clone {\r\n\tleft: -350px;\r\n\ttop: 50px;\r\n\ttransform: rotate(0deg);\r\n}\r\n\u00a0\r\n\/* juste pour la d\u00e9co (lueur sur le lien cliqu\u00e9) *\/\r\n#s2:target ~ #wrap #nav li:first-child + li a {\r\n\ttext-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603;\r\n}<\/code><\/pre>\n
Pour traduire l’un des s\u00e9lecteurs CSS avanc\u00e9s en fran\u00e7ais, on pourrait dire : \u00ab\u00a0Lorsque #s2<\/code> est cibl\u00e9, je cherche un #wrap<\/code> directement ou indirectement fr\u00e8re et je style l’\u00e9l\u00e9ment #clone<\/code> qui se trouve dedans\u00a0\u00bb (interpr\u00e9tation du s\u00e9lecteur de la ligne 19).<\/p>\n
Le principe est le m\u00eame lorsque l’on cible les autres slides.
\nLe plus dur pour vous maintenant, c’est de trouver quels changements appliquer, \u00e0 quelle vitesse (distance\/temps) et dans quelle condition.<\/p>\n
Je vous donne le code CSS pour les deux slides restantes. (quand m\u00eame !)<\/p>\n
\/* vers Slide 1 *\/\r\n#s1:target ~ #wrap { top:0px; }\r\n#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }\r\n#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }\r\n#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }\r\n#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }\r\n#s1:target ~ #wrap #trooper { left: -180px; top: 300px; transform: rotate(10deg); }\r\n#s1:target ~ #wrap #clone { left: -280px; top: 300px; transform: rotate(10deg); }\r\n\u00a0\r\n\/* vers Slide 3 *\/\r\n#s3:target ~ #wrap { top:-2150px; }\r\n#s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }\r\n#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }\r\n#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }\r\n#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }\r\n#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px; transform: rotate(-15deg); }\r\n#s3:target ~ #wrap #clone { left:-1000px;top: -800px; transform: rotate(-15deg); }<\/code><\/pre>\n
Le code CSS complet se trouve ici : CSS de la d\u00e9mo<\/a><\/p>\n
Vous aurez not\u00e9 que les \u00e9l\u00e9ments cibl\u00e9s sont nos span<\/code> du tout d\u00e9but du code HTML. \u00c0 partir de ce type de cible, nous pouvons parcourir tout le DOM afin de s\u00e9lectionner l’\u00e9l\u00e9ment \u00e0 styler.<\/p>\n
N’h\u00e9sitez pas si vous avez des questions \ud83d\ude09<\/p>\n
D\u00e9monstration<\/a><\/p>\n
\n
Liens utiles<\/h2>\n