Techniques JavaScript
Pour créer un effet de parallaxe, la méthode la plus populaire utilise JavaScript. À partir de ce chapitre, nous discuterons des concepts de JavaScript et de certaines des bibliothèques utilisées pour réaliser le défilement Parallax.
L'utilisation de JavaScript pur est logique pour maintenir les performances du site Web optimales. L'utilisation de bibliothèques présente de nombreux autres avantages du point de vue des performances. Cependant, pour mieux comprendre l'organisation du code, nous commencerons par une implémentation de parallaxe JavaScript pure. Fait amusant, parfois du JavaScript pur est également appelévanilla JavaScript.
Défilement parallaxe à l'aide de JavaScript pur
Tout d'abord, créez le fichier HTML principal avec le code ci-dessous. La page HTML comprendra simplement quatre textes d'en-tête.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Observez qu'à la ligne 4, pour cet exemple, nous utilisons myscripts.js fichier qui sera stocké dans le même dossier que le fichier HTML et le fichier CSS.
Maintenant, préparons notre fichier CSS comme indiqué ci-dessous.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Vient maintenant la partie JavaScript, créez un fichier dans le bloc-notes et enregistrez-le sous myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analyse du code
Analysons le code JavaScript.
Code de line number 1 to 4 représente la fonction d'assistance.
À la ligne 6, nous sélectionnons notre élément de parallaxe et ajoutons scrollévénement à la fenêtre. Pour déterminer la zone de défilement, nous utilisonsscrolledHeightpropriété. Alors que l'écran défile vers le bas,backgroundPositionY est mis à jour pour l'élément de parallaxe.
Pour ralentir l'effet de parallaxe, nous avons divisé par 1,5, ce nombre peut être changé en n'importe quel nombre que vous voulez.
Maintenant, vous pourrez voir la page défiler vers le bas comme indiqué dans la capture d'écran ci-dessous.
Utilisation de la bibliothèque JavaScript ScrollMagic
Comme indiqué dans la section précédente, bien que nous puissions utiliser du JavaScript pur pour créer un effet de parallaxe, il existe de puissantes bibliothèques JavaScript qui amélioreront l'expérience utilisateur. ScrollMagic est l'une de ces bibliothèques pour créer des interactions de défilement de parallaxe.
Discutons-en plus à ce sujet à l'aide d'un exemple donné ci-dessous -
Note- Dans cet exemple, pour rester simple, nous aurons le CSS stocké dans un fichier HTML. De plus, le code JavaScript sera présent dans le même document. En un mot, nous ne créerons qu'un seul fichier HTML et les bibliothèques ScrollMagic seront référencées avec le CSS requis.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Comme indiqué dans le code ci-dessus, nous avons requis des références de bibliothèques JavaScript de line 3 to 6. Le code CSS est spécifié de la ligne 9 à 19.
Réseau de diffusion de contenu
Les références de script des lignes 3 à 6 pointent vers les URL ScrollMagic Content Delivery Network (CDN). L'utilisation d'un CDN est logique dans le développement de sites Web modernes, car vous pouvez charger les bibliothèques requises sans ralentir votre site Web.
Si des personnalisations sont nécessaires dans les bibliothèques, il faudrait héberger les bibliothèques sur leur serveur respectif pour utiliser ces effets. Si vous utilisez les fonctionnalités de base d'une bibliothèque, il est efficace d'utiliser l'URL CDN.
Le code HTML ci-dessus montre une image séparée par 2 divisions. La première division apparaît avec un en-tête -These are bricks et la deuxième division apparaît avec - Some More Bricks.
Notez que dans le code CSS de la ligne 9 à 19, nous spécifions uniquement la position et le style du div de parallaxe respectif.
Le travail de création de cette douce parallaxe sceneest fait par la bibliothèque ScrollMagic. Si vous faites référence au code de script de la ligne 43 à 62, ScrollMagiccontroller est invoqué et un scene est créé.
Les scènes guident le DOM pour créer un effet de parallaxe lorsque 80% de l'écran est occupé. JavaScript est utilisé pour comprendre le déclencheur de défilement. En conséquence, vous obtenez une expérience flottante sur cette page.
Note - En considérant l'image ci-dessus comme une image GIF, vous ne pourrez pas observer l'effet lisse des divisions de texte.
Animations de déclenchement
Les possibilités de créer une expérience utilisateur variée sont infinies avec ScrollMagic Library. Observez les extraits de code ci-dessous pour déclencher des animations lors du défilement.
Notez que pour cela, vous avez besoin de deux fichiers * moins; un fichier HTML et un fichier CSS.
Créez un fichier HTML avec le code ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Maintenant, créez un fichier CSS avec le code suivant.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analyse du code
En se référant au code HTML, le code ScrollMagic commence à partir de line 17 et continue jusqu'à line 25. Dans cette section, nous créons deux scènes ScrollMagic. La première scène est pour l'image de la brique et l'autre pour l'animation de la bannière.
Comme spécifié dans setTween fonction sur line 20, lorsque l'action de défilement se produit à 40% de la taille de l'écran, la scène suivante commence qui montre la bannière C'est ça!
L'opacité du div avec id - square est contrôlé dans le fichier CSS sur line 10 et line 15.
En conséquence, vous pourrez voir l'animation ci-dessous sur la page.
Défilement horizontal
Nous pouvons également appliquer le défilement parallaxe et réaliser un défilement horizontal. La bibliothèque ScrollMagic peut être utilisée pour créer un effet horizontal de défilement. Voir le code ci-dessous.
Bien que le code soit simple pour créer un effet de défilement horizontal, nous aurons besoin d'une référence jquery pour réaliser le mouvement horizontal des écrans. Les détails de jQuery sont fournis dans le chapitre suivant, pour l'instant, suivez simplement le code ci-dessous.
Nous allons créer trois fichiers séparés - un fichier HTML pour le code principal, un fichier CSS pour les styles et un fichier JS pour les appels de fonction ScrollMagic.
Voici le code du document HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Notez que nous avons trois sections, qui apparaîtront après le défilement. Les trois sections sont désignées par les identifiants title1, title2 et title3 aux lignes 15, 19 et 23 respectivement.
Le code du document CSS est donné ci-dessous -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analyse du code
Les couleurs d'arrière-plan des trois écrans (ou sections) sont fournies sur lines 10, 22 et 25.
Nous calculons la largeur relative de chaque écran dans le code à partir du line 13.
Le code JavaScript pour ScrollMagic est donné ci-dessous -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Remarquez le triggerHookpropriété à la ligne 8. Cette propriété est chargée de fournir l'effet de défilement lorsque l'utilisateur atteint la fin de l'événement de défilement. La fonctionTimelineMax est responsable de fournir l'effet de défilement horizontal à nos écrans.
Une fois les fichiers créés, vous pourrez voir l'animation de défilement horizontal comme indiqué ci-dessous.
