Une introduction aux animations basées sur le scroll jQuery

Points de base

• Les animations basées sur défilement et les effets spéciaux sont une technologie qui permet aux développeurs Web de créer des expériences Web dynamiques et interactives. Ils sont déclenchés lorsque l'utilisateur fait défiler la page et peut être manipulé et implémenté avec CSS et JQuery.
• Pour créer des effets basés sur un défilement réactif, les propriétés de largeur et de hauteur de la fenêtre du navigateur doivent être définies. Sans ces propriétés, les effets ne fonctionneront pas correctement lorsque l'utilisateur redimensionne la fenêtre.
• Ce tutoriel fournit quatre exemples d'animations et d'effets basés sur un défilement qui montrent comment ils varient en fonction de la valeur de l'attribut de largeur de fenêtre. Ces exemples incluent l'animation de l'opacité, de la hauteur, de la largeur, des propriétés gauche, droite et inférieure de divers éléments.
• Ce tutoriel contient également une section FAQ qui fournit des solutions à des problèmes communs tels que la création d'effets de défilement en douceur, la détection des directions de défilement et l'arrêt des animations jQuery.

La technologie des pages Web change chaque jour qui passe, les nouvelles technologies et techniques émergent les unes après les autres, et certaines anciennes technologies sont progressivement éliminées. Par conséquent, les concepteurs de sites Web et les développeurs frontaux doivent être familiers avec de nombreuses dernières tendances de conception Web. Le défilement de parallaxe, l'en-tête fixe, la conception plate, les sites Web à une page unique et l'animation sont actuellement quelques-unes des tendances Web les plus chaudes.

Dans ce tutoriel, nous apprendrons à créer des animations basées sur un défilement et des effets spéciaux à l'aide de CSS et JQuery.

Vous pouvez cliquer sur cette démo pour afficher les quatre effets spéciaux que nous créerons. Mais avant de commencer à expliquer les effets spéciaux, introduisons-le brièvement.

Remarque: Le code utilisé dans ce tutoriel peut être amélioré par la mise en cache d'objet et l'utilisation d'animations CSS (plutôt que par la méthode de jQuery animate()), mais pour la simplicité, nous avons répété la déclaration d'objet et y mettre tout dedans pour tout .

Que sont les animations basées sur Scroll et les effets spéciaux?

Les animations basées sur le défilement et les effets spéciaux sont une approche nouvelle et bien connue qui permet aux développeurs frontaux de créer des expériences Web riches et interactives. Ils sont déclenchés lorsque l'utilisateur fait défiler la page et peut être facilement manipulé et implémenté à l'aide de CSS et JQuery.

Pour détecter si l'utilisateur fait défiler la page, nous utilisons l'événement Scroll () de JQuery.

Une fois que nous savons que l'utilisateur fait défiler, nous pouvons utiliser la méthode ScrollTop () de JQuery pour obtenir la position verticale de la barre de défilement de la fenêtre et appliquer les effets spéciaux requis:

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});</code>

sont-ils réactifs?

Si nous voulons créer des effets basés sur un défilement réactif, nous devons définir les propriétés suivantes:

1. Propriété de largeur de la fenêtre du navigateur.
2. Propriétés de hauteur de la fenêtre du navigateur.

Si ces propriétés ne sont pas définies, nous créerons des effets "statiques" basés sur un défilement qui ne fonctionneront pas correctement lorsque l'utilisateur redimensionne la fenêtre horizontalement ou verticalement.

Nous pouvons facilement récupérer les valeurs de ces propriétés en utilisant les méthodes Largeth () et Height () de JQuery.

Le code d'extrait de code suivant affiche toutes les vérifications nécessaires qui doivent être prises en compte afin de créer des effets basés sur Scroll.

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});</code>

Maintenant que nous avons introduit les bases des effets de défilement, jetons-le avec quatre exemples différents.

Remarque: Pour la simplicité, nous nous concentrons uniquement sur la façon dont ces effets varient en fonction des différentes valeurs de l'attribut de largeur de fenêtre. Le même processus peut également être utilisé pour les propriétés de hauteur de la fenêtre.

Exemple # 1

Cet effet sera déclenché lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 60px. Dans ce cas, l'extrait de code exécuté est le suivant:

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
        // 应用特效
    } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
        // 应用特效
    } else if ($(this).scrollTop() > 450) {
        // 应用特效
    }
});</code>

Le code ci-dessus masque l'élément enfant

de l'élément .banner et affiche son élément enfant initialement caché. h2 .info Ce code peut également être écrit comme ceci:

Pour afficher cet effet en action, consultez la démo complète sur Codepen.

<code class="language-javascript">if ($(window).scrollTop() > 60) {
    $('.banner h2').css('display', 'none');
    $('.banner .info').css('display', 'block');
} else {
    $('.banner h2').css('display', 'block');
    $('.banner .info').css('display', 'none');
}</code>

Exemple # 2

Le prochain effet spécial dépend non seulement de la position supérieure de la barre de défilement du navigateur, mais également de la largeur de la fenêtre. Plus précisément, nous avons fait les hypothèses suivantes:

La valeur de l'attribut de largeur de la fenêtre est inférieure ou égale à 549px. Dans ce cas, l'animation ne sera déclenchée que si la position supérieure de la barre de défilement de la fenêtre dépasse 600px.

1. La valeur de l'attribut de largeur de la fenêtre est comprise entre 550px et 991px. Dans ce cas, l'animation ne sera déclenchée que si la position supérieure de la barre de défilement de la fenêtre dépasse 480px.
2. La valeur de l'attribut de largeur du navigateur est supérieure à 991px. Dans ce cas, l'animation ne sera déclenchée que si la position supérieure de la barre de défilement de la fenêtre dépasse 450px.
L'hypothèse ci-dessus conduit à l'extrait de code suivant:

Le code contenant l'animation à exécuter est le suivant:

<code class="language-javascript">if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();
}</code>

Le code ci-dessus anime l'opacité, la hauteur et la largeur pour les éléments

<code class="language-javascript">if ($(window).width() <= 549) {
    if ($(window).scrollTop() > 600) {
        // 执行的动画
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 480) {
        // 执行的动画
        firstAnimation();
    }
} else {
    if ($(window).scrollTop() > 450) {
        // 应该执行的动画
        firstAnimation();
    }
}</code>

.

.clients-info Pour afficher cet effet en action, consultez la démo complète sur Codepen.

(Exemples ultérieurs 3 et 4, ainsi que les parties de conclusion et de la FAQ, en raison des limitations de l'espace, veuillez effectuer des réécritures similaires en fonction du texte d'origine, gardez le sens d'origine inchangé et remplacez une partie du vocabulaire et Structures de phrase.)

N'oubliez pas de garder le format d'origine et la position de l'image.

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!