Comment créer des animations de défilement en JavaScript et CSS

Avez-vous vu pratiquement tous les sites Web d'entreprise sympas et remarqué que le texte glisse vers le haut lorsque vous y faites défiler l'écran ? (voir le site Web d'Apple) Parce que c'est si courant, on pourrait penser qu'il y aurait de nombreuses réponses à cette question, n'est-ce pas ? Mais après avoir parcouru de nombreux didacticiels en ligne, je n'ai pas trouvé d'animation apparaissant au défilement, j'ai donc créé la mienne.

Le HTML (Dun dun dun !!!)

Le HTML est assez simple. Créez simplement un élément

Quelques textes

et attachez la classe>

Le HTML complet (notez que vous pouvez modifier l'élément. J'ai utilisé

pour des raisons de simplicité.):

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Que se passe-t-il ici ? La classe .animate-scroll déclare l'animation. C'est le code qui réalise réellement l'animation. Vous pouvez en créer une autre, mais j'ai créé une animation de fondu enchaîné car c'est la plus courante que j'ai vue. Le .animate-scroll.visible, cependant, montre l'état de l'élément une fois l'animation terminée. Si vous modifiez .animate-scroll, vous devez également modifier cela. Par exemple, si vous changez de taille, vous devez mettre size:100%; ou quelque chose comme ça. Cependant, si vous voulez juste un tutoriel simple sur la façon de procéder, ne changez rien.

Le Javascript

Copiez ce simple JavaScript :

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

Wouah ! Cela fait beaucoup de code ! Ce qui se passe! Décomposons-le étape par étape.
Premièrement, document.addEventListener('DOMContentLoaded', () => détecte si le contenu est chargé. Cela exécute simplement la "fonction".
const elements = document.querySelectorAll('.animate-scroll'); Cela trouve la classe. Modifiez cela également si vous modifiez la classe HTML et CSS.
const observer = new IntersectionObserver((entries) => { inputs.forEach(entry => Ceci détecte si l'élément est dans la fenêtre. Si ce n'est pas le cas, il ne l'animera pas.
if (entry.isIntersecting) { Entry.target.classList.add('visible');} Ceci détecte si l'animation est terminée. Si c'est le cas, il ajoute .visible au CSS. c'est pourquoi il est là !
seuil : 0,9 Ceci calcule la quantité de contenu sur la page avant de l'animer. 0 est dès qu'un pixel atteint la page. 1, c'est quand il se trouve à environ 25 % de la hauteur de la page. 2 est d'environ 50 %... J'aime le maintenir à environ 0,9 pour avoir une chance que l'utilisateur voie l'animation sans cacher le texte trop longtemps.
elements.forEach(element => { observer.observe(element); Ceci observe simplement l'élément. C'est un peu inutile d'expliquer. Est-ce sur la page ??? Cela gère cela.

Le code final...

Es-tu trop paresseux pour lire mes étonnantes explications ? Voici tout le code.

HTML :

<p>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript :

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

C'est ça ! J'espère que vous avez aimé cette plongée en profondeur. Si vous avez des questions, des commentaires ou si vous souhaitez simplement parler au célèbre auteur de ceci, laissez un commentaire. J’aimerais voir vos suggestions !

Merci d'avoir lu, CodeMonster

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!