Comment réaliser un site web avec l'effet Parallaxe - Tendance WEB 2015

Comment réaliser un site web avec l'effet Parallaxe - Tendance WEB 2015

, , , , , , , Edit



L'effet parallaxe est sans doute l'une des tendances web design qui est en train de s'imposer en 2014. Personnellement, je suis assez friand de l'effet que cela procure à la page, à condition de ne pas en abuser et d'avoir un rendu qui soit visuellement confortable pour l'utilisateur. Afin de découvrir cette technique et de comprendre comment elle fonctionne, je vous propose de suivre ce tutoriel pas-à-pas pour réaliser un effet parallaxe. Comme disait mon grand-père "rien de tel que la pratique !".






Pour suivre ce tutoriel, vous aurez besoin de :
  • Niveau : avancé.
  • Langages : HTML, CSS, JS
  • Accès : gratuit
  • Outils : votre éditeur de texte et de l'imagination

Définition

Le parallaxe est un déplacement ou une différence dans la position apparente d'un objet vu le long de deux lignes de vue différentes. - Wikipedia

Le mot "parallax" dérive du grec παραλλαξη (parallaxis) qui signifie altération.
L'effet Parallaxe a été utilisé dès le début des années 1980 la première fois pour ajouter de la profondeur de champs à des jeux vidéo. Dernièrement, c'est (re)devenu un outil de web design dont on se sert pour modifier l'apparence visuelle de certaines pages. Lorsqu'il est combiné avec la fonctionnalité de défilement d'un site web, l'effet Parallaxe peut avoir un impact visuel fort, surtout lorsqu'il est utilisé pour raconter une certaine forme de récit dans le but d'augmenter l'expérience utilisateur.

Conception du projet

Pour vous montrer comment mettre en œuvre ce défilement parallaxe dans votre site Internet, j'ai créé un site web simple avec quatre diapositives qui utilise cet effet visuel sur ​​les différentes slides. J'ai également ajouté un menu de navigation (en haut à gauche) qui permet d'accéder directement à une page spécifique (la page active se différencie des autres par un titre plus visible). Pour terminer, je me suis attaché à ce que cet exemple soit "Responsive Design".
Techniquement, je me suis assuré que le code final soit le plus simple possible (on doit sans doute pouvoir encore l'améliorer) afin d'être léger et facilement mis en oeuvre. Pour ce faire, j'ai privilégié le recours au CSS et à 3 plugins JavaScript que nous allons détailler maintenant.

Les plugins utilisés

Stellar.js

Pour m'aider à obtenir l'effet voulu, j'utilise Stellar.js, un plugin jquery créé par Mark Dalgleish qui facilite le défilement Parallaxe. Il existe d'autres plugins qui vous permettent de mettre en oeuvre cet effet, certains sont listés à la fin de ce tutoriel. J'ai décidé d'utiliser Stellar.js pour son excellent rapport mise en oeuvre / rendu visuel obtenu.

Waypoints v2.0.5

J'utilise également le plugin jQuery waypoints de Caleb Troughton. Waypoints exécute une fonction lorsque vous scrollez vers un élément de la page. Cela permet de mettre en surbrillance la slide sur laquelle l'on est en fonction de la position de la barre de défilement.

jQuery Easing 1.3

jQuery easing est un plugin conçu par GSGD. Nous l'utiliserons pour obtenir un effet de transistion entre les différentes slides.

La structure HTML

Notre index.html ouvre directement sur le doctype HTML5 et vient ensuite la balise head.
Après le titre de la page, nous indiquons notre feuille de style "style.css.
Nous ajoutons ensuite la librairie jQuery avec le fichier correspondant : "js.js" suivi des 3 plugins décris plus haut : "jquery.stellar.min.js","waypoints.min.js" et "jquery.easing.1.3.js".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Combiner l'effet Parallaxe et le Responsive Design sur un site Internet</title>
 
<link rel="stylesheet" type="text/css" href="/css/style.css">
 
<script type="text/javascript" GARBAGE></script>
<script type="text/javascript" src="/js/js.js"></script>
<script type="text/javascript" src="/js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="/js/waypoints.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
 
</head>

Les slides

Les 4 slides utilisent la même structure :
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5"> 
<a class="button" data-slide="2" title=""></a> 
Nous utilisons une classe "slide" qui sera utilisée comme style commun à toutes les slides. Chaque slide se voit attribuer un id de slide suivi par son numéro (exemple : slide2). Nous utilisons les data attributs HTML5 et les nommons "data-slide". Ceci nous permet d'utiliser jQuery de manière plus ciblée.
Un autre attribut "data-stellar-background-ratio" est ajouté. Ceci est un attribut spécifique à Stellar.js. Il indique au plugin à quel ratio de vitesse l'élément doit défiler. Ce ratio est relatif à la vitesse naturelle de défilement. Un ratio de 0.5 aura pour effet de réduire de moitié la vitesse du défilement, un ratio égal à 1 n'aura pas d'effet, et un ratio de 2 fera défiler l'élément deux fois plus vite.
Excepté pour celles qui ont une image de fond, les slides disposent d'un bouton (en bas de page) qui permet de passer à la page suivante. Pour cela, nous ajoutons l'attribut "data-slide" avec la valeur de la slide suivante. La majorité des slides ont également un span avec une classe "slideno"qui affiche dans le coin inférieur gauche, le nom de la slide. Cela peut être utilisé pour titrer la slide, comme par exemple sur la slide n°1.
  
 <span class="slideno">Slide 4</span>
Sur les slides 1 et 3, nous avons également des éléments "images". Ces images apporteront un effet Parallaxe supplémentaire propre à la silde. Nous terminerons avec une div "wrapper" qui sera centralisée avec une largeur de 960px pour s'assurer qu'elle affiche parfaitement pour toutes les tailles d'écran de bureau.
 <div class="wrapper">
 <img src="/img/slide3/image1.png" data-stellar-ratio="2.4" data-stellar-vertical-offset="-102" alt="">
 <img src="/img/slide3/image2.png" data-stellar-ratio="1" data-stellar-vertical-offset="-53" alt="">
 <img src="/img/slide3/image3.png" data-stellar-ratio="2.5" data-stellar-vertical-offset="-50" alt="">
 <img src="/img/slide3/iamge4.png" data-stellar-ratio="0.8" data-stellar-vertical-offset="-180" alt="">
 <img src="/img/slide3/image5.png" data-stellar-ratio="1.2" data-stellar-vertical-offset="-230" alt="">
Chaque image possède un attribut "data-stellar-ratio" qui lui est attaché. C'est encore un attribut spécifique à Stellar.js qui indique au pligin à quel ration de vitesse doit défiler l'élément en question.

Le CSS

Heureusement, il n'y a pas trop de travail avec le CSS. Il s'agit essentiellement de styler quelques éléments simples, mais la majorité du CSS concerne le positionnement des images.
La première chose que nous définissons est la largeur et la hauteur de la page et du body à 100%. Cela permettra à nos slides d'occuper toute la largeur et la hauteur de l'écran de l'utilisateur. Ici la police de caractère est "Calibri", ce qui peut être changé si besoin.
   
@font-face {
    font-family: Calibri;
    font-weight: normal;
    font-style: normal;

}
html,body{
 font-family: Calibri;
 width:100%;
 height:100%;
 color:#000000;
 background:#FFFFFF;
 margin:0;
 padding:0;
}

La navigation

Grâce à la classe "navigation", nous fixons le menu de navigation afin qu'il apparaisse à la même place sur toutes les slides. Nous donnons une marge de 20px par rapport au haut de la page pour donner un peu d'espace et mettons le z-index de 1 pour nous assurer que c'est sur ​​la partie supérieure du site.
Le menu de navigation est composé d'une liste li qui est stylisée assez simplement. Il est possible de modifier cela très facilement en fonction de vos besoins.
Notez que "hover" utilise les mêmes propriétés que la classe ""active"; c'est à dire une augmentation de la taille de la police et la largeur à 100%. La classe ""active" est utilisée par jQuery pour styler la slide qui est actuellement affichée dans la fenêtre du navigateur.
   
.navigation{
 position:fixed;
 z-index:1;
 top:20px;
}
.navigation li{
 color:#333333;
 display:block;
 padding: 0 10px;
 line-height:30px;
 margin-bottom:2px;
 font-weight:bold;
 -webkit-transition: all .2s ease-in-out;
 border-bottom:1px solid black;
 text-align:left;
 width:53px;
}
.navigation li:hover,.active{
 font-size:25px;
 cursor:pointer;
 width:100px!important;
}
Voyons maintenant le style général des slides. Nous donnons à la propriété "background-attachment" la valeur "fixe. La propriété "background-attachment" détermine si une image de fond est fixe ou si elle défile avec le reste de la page; cela est particulièrement utile pour "background-images". Nous avons mis la position de la slide à "relative". La largeur et la hauteur sont également réglées à 100% pour occuper la totalité de la fenêtre du navigateur.
La propriété " box shadow est purement décorative; elle ajoute une petite ombre au bas de chaque slide.
  
.slide{
 background-attachment: fixed;
 width:100%;
 height:100%;
 position: relative;
 box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
 width:960px;
 height:200px;
 margin:0 auto;
 position:relative;
}
.slideno{
 position:absolute;
 bottom:0px;
 left:0px;
 font-size:100px;
 font-weight:bold;
 color:rgba(255,255,255,0.3);
}
La classe "button" est pour le bouton qui est au bas de la page et qui permet de passer à la slide suivante. Il est positionné au centre de chaque slide et utilise une image .png
Le "hover" donne une couleur différente au background de l'image.
  
.button{
 display:block;
 width:50px;
 height:50px;
 position:absolute;
 bottom:0px;
 left:50%;
 background-color:#333333;
 background-image:url(../img/arrow.png);
}
.button:hover{
 background-color:#494949;
 cursor:pointer;
}
Le style de chaque slide est relativement simple et suit le même schéma à chaque fois.
La première slide a une couleur de fond "#019F59". Elle contient également des images que nous pouvons cibler en utilisant le sélecteur CSS " nth-child (n) ".
Nous avons ajouté une ligne de texte que nous stylisons avec la classe "parallaxbg".
La deuxième slide a une image de fond. Grâce à la propriété "cover", nous rendons "Responsive Design" cette image de fond sur les différents navigateurs "modernes". Ceci permet de couvrir entièrement la fenêtre du navigateur et l'image se redimensionne automatiquement.
  
#slide1{
 background-color:#019F59;
}

#slide1 img:first-child{
 position:absolute;
 top: 700px;
 left: 300px;
}
#slide1 img:nth-child(2){
 position:absolute;
 top:100px;
 left:200px;
}
#slide1 img:nth-child(3){
 position:absolute;
 top:150px;
 left:400px;
}
#slide1 img:nth-child(4){
 position:absolute;
 top:450px;
 left:300px;
}
#slide1 img:nth-child(5){
 position:absolute;
 top:200px;
 right:650px;
}
#slide1 img:nth-child(6){
 position:absolute;
 top:100px;
 right:300px;
}

#slide1 .parallaxbg{
 position:absolute;
 right: 50px;
 top:265px;
 font-size:65px;
 font-weight: bold;
 background-color:rgba(51,51,51,0.3);
 padding: 15px;
 color:#AEDBFA;
}

#slide2{
 background: url(../img/slide-2.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

#slide2 .parallaxbg{
 position:absolute;
 left:150px;
 top:100px;
 font-size:45px;
 font-weight: bold;
 color:#ffffff;
}
La slide 3 suit le même schéma que la slide 1
  
#slide3{
 background-color:#B3B3B3;
}
#slide3 img:first-child{
 position:absolute;
top: 350px;
left: 400px;
}
#slide3 img:nth-child(2){
 position:absolute;
 top:100px;
 left:350px;
}
#slide3 img:nth-child(3){
 position:absolute;
 top:150px;
 left:400px;
}
#slide3 img:nth-child(4){
 position:absolute;
 top:450px;
 left:300px;
}
#slide3 img:nth-child(5){
 position:absolute;
 top:200px;
 left:50px;
}
#slide3 img:nth-child(6){
 position:absolute;
 top:100px;
 right:300px;
}
Comme la slide 2, la quatrième slide ne contient pas d'éléments d'image ou une couleur de fond, mais utilise un background-image.
  
#slide4{
 background-image:url(../img/slide-4.jpg);
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
#slide4 .parallaxbg{
 position:absolute;
 right:40px;
 top:250px;
 font-size:48px;
 background-color:rgba(51,51,51,0.3);
 padding: 15px;
 color:#dddddd;
}

Conclusion

Le défilement parallaxe est l'un des effets web design préférés de ces derniers temps et les web designers ne cessent d'en repousser les limites. Au cours de ce tutoriel, je vous ai montré comment mettre en place un site Web qui utilise le défilement parallaxe en étant "Responsive Design".
Pour ceux d'entre vous qui voudraient créer un site Internet en utilisant ce type d'effet, je les invite à se familiariser d'abord avec le concept et l'histoire avant d'aborder la technique.
L'important est la façon dont vous pouvez utiliser cet effet à bon escient et non l'utiliser juste pour l'utiliser.
J'espère que vous avez apprécié ce tutoriel et que vous en avez appris un peu plus à propos du défilement Parallaxe. J'ai hâte de voir les sites que vous allez pouvoir créer. N'hésitez pas à partager vos remarques et vos liens dans les commentaires !
Share on Google Plus

About Mbarki Chadi

Chef de projet Web/Cloud SS, Fondateur DCI Websolutions (Agence de développement Web,Applicatif et Mobile).
Sous Traiter vos projets Web | Devenir partenaire DCI et réduisez vos coûts et délais
    Blogger Comment
    Facebook Comment

1 commentaires:

  1. ProActivationKeys10 septembre 2022 à 08:39


    Yes, amazing blog post site! How long
    Have you written a blog before? Working on a blog like a pro.
    Well-structured content.
    reason crack
    K7 Total Security Crack
    windows 11 activator

    RépondreSupprimer

Inscription à : Publier les commentaires ( Atom )