recherche
Maisoninterface Webjs tutorielUne introduction aux animations basées sur le scroll jQuery

An Introduction to jQuery Scroll-based Animations

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:

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});

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.

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});

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:

$(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) {
        // 应用特效
    }
});
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.
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');
}

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.
  3. L'hypothèse ci-dessus conduit à l'extrait de code suivant:

Le code contenant l'animation à exécuter est le suivant:
if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();
}

Le code ci-dessus anime l'opacité, la hauteur et la largeur pour les éléments
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();
    }
}
.

.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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Node.js diffuse avec dactylographieNode.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéPython vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationLes origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsL'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementPython vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

JavaScript est-il écrit en C? Examiner les preuvesJavaScript est-il écrit en C? Examiner les preuvesApr 25, 2025 am 12:15 AM

Oui, le noyau du moteur de JavaScript est écrit en C. 1) Le langage C fournit des performances efficaces et un contrôle sous-jacent, qui convient au développement du moteur JavaScript. 2) Prendre le moteur V8 comme exemple, son noyau est écrit en C, combinant l'efficacité et les caractéristiques orientées objet de C. 3) Le principe de travail du moteur JavaScript comprend l'analyse, la compilation et l'exécution, et le langage C joue un rôle clé dans ces processus.

Rôle de JavaScript: rendre le Web interactif et dynamiqueRôle de JavaScript: rendre le Web interactif et dynamiqueApr 24, 2025 am 12:12 AM

JavaScript est au cœur des sites Web modernes car il améliore l'interactivité et la dynamicité des pages Web. 1) Il permet de modifier le contenu sans rafraîchir la page, 2) manipuler les pages Web via Domapi, 3) prendre en charge les effets interactifs complexes tels que l'animation et le glisser-déposer, 4) Optimiser les performances et les meilleures pratiques pour améliorer l'expérience utilisateur.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP