Code

Comment créer un effet de parallaxe simple

Partout sur le Web, des sites surgissent, utilisant ce qu'on appelle un défilement de parallaxe. Essentiellement, un défilement de parallaxe se produit lorsque le contenu défile à des vitesses différentes, créant ainsi une impression de perspective et donc de profondeur.

C'est un effet attrayant et peut être appliqué à autant de couches que vous le souhaitez. Dans cet article, je vais vous présenter les principes de base en vous montrant comment créer un simple effet de parallaxe à deux couches.

Le HTML

Pour commencer, nous avons besoin de HTML, nous allons inclure du texte de remplissage à placer dans une section, puis un autre

cela tiendra notre arrière-plan: 

Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

C'est tout le HTML dont nous aurons besoin. Tout le texte est juste pour s'assurer que nous couvrons toute la page pour que le défilement soit nécessaire. Passons plus au CSS:

Le CSS

Le CSS requis pour créer un effet de parallaxe est en fait assez simple si vous comprenez pourquoi il est écrit tel quel. Nous devons d'abord définir l'image d'arrière-plan du div .bg , puis nous devons arrêter le défilement du div car l'action de défilement sera appliquée par jQuery; nous devons donc définir sa position sur fixe. Ensuite, nous définissons la largeur à 100% et la hauteur à 300% pour nous assurer que le div est plus grand que l'écran réel. Nous le positionnons en haut à gauche et lui donnons finalement un index z de -1 pour nous assurer qu'il est rendu sous le texte. 

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

C'est tout le CSS dont nous avons besoin pour le div bg, maintenant nous avons juste besoin de styliser le reste de notre page (bien que cela soit entièrement facultatif, cela n'affecte pas le défilement de parallaxe): 

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Essayez de faire défiler la page maintenant et vous verrez que le texte défile mais que l'arrière-plan reste fixe, nous allons changer cela avec notre jQuery:

Le jQuery

Ce que nous voulons, c'est que jQuery vérifie jusqu'où l'utilisateur a défilé et déplace l'arrière-plan plus lentement. Nous allons créer une fonction appelée parallaxe et créer une variable qui contiendra la valeur des pixels que l'utilisateur a fait défiler: 

function parallax(){var scrolled = $(window).scrollTop();

Maintenant, pour faire défiler l'arrière-plan à la même vitesse que le texte, nous définissons la valeur supérieure du div comme la valeur négative du défilement, puis nous fermons la fonction. Ainsi: 

    $('.bg').css('top', -(scrolled) + 'px');}

Cependant, le point de défilement de la parallaxe consiste à se déplacer à une vitesse différente. Pour ajuster la vitesse, nous multiplions la valeur par une fraction, par exemple 0,2 pour 20%: 

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

Il n’ya qu’une chose à faire pour que l’effet soit exécuté et cela appelle la fonction à chaque fois que l’événement de défilement est déclenché: 

$(window).scroll(function(e){parallax();});

Ceci fait, notre code est complet. Si vous testez le fichier, vous le verrez fonctionner. Pour changer la vitesse, nous devons changer la fraction dans la fonction; des fractions plus petites réduisent la vitesse et des fractions plus élevées l'augmentent. Vous pouvez voir le résultat final de ce code dans ce stylo que j'ai créé.

Conclusion

Comme vous pouvez le constater, créer un effet de parallaxe n’est pas aussi difficile que prévu. Bien sûr, ce n'est qu'un exemple simple, mais vous pouvez en tirer parti pour créer tout type d'effet de parallaxe complexe que vous aimez.

Avez-vous utilisé un effet de parallaxe dans un projet? Avez-vous une meilleure méthode? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image en perspective glissante via Shutterstock.

défilement de parallaxe parallaxe parallaxe simple comment construire un site web parallaxe

OdWebDesign.Net