Maintenant, sur de nombreux sites, vous pouvez trouver une telle animation, et ci-dessous, je montrerai également un exemple. Personnellement, j'utilise cette animation lors de la création de pages de destination (landing pages). De nombreux webmasters l'utilisent activement sur leurs sites et cette animation est plutôt agréable lors du défilement.

Pour faire cela sur votre site, vous devez travailler un peu. Si vous comprenez au moins un peu, alors il n'y a rien de compliqué. Décomposons toutes nos actions en étapes afin de ne pas nous perdre.

Étape 1

Comme toujours, pour que la bibliothèque fonctionne jQuery, il faut un chapeau avant de fermer diriger ou au sous-sol avant la fermeture corps connecter la bibliothèque.

Étape 2

Ou créez un fichier comme - scriptviewport.js et connectez-le.

Dans les balises ou le fichier, ajoutez le code suivant :

Function(a)(a.fn.viewportChecker=function(b)(var c=(classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function( a,b)(),scrollHorizontal:!1);a.extend(c,b);var d=this,e=(height:a(window).height(),width:a(window).width( )),f=-1!=navigator.userAgent.toLowerCase().indexOf("webkit")?"body":"html";return this.checkElements=function())(var b,g;c.scrollHorizontal ? (b=a(f).scrollLeft(),g=b+e.width):(b=a(f).scrollTop(),g=b+e.height),d.each(function())( var d=a(this),f=(),h=();if(d.data("vp-add-class")&&(h.classToAdd=d.data("vp-add-class") ),d.data("vp-remove-class")&&(h.classToRemove=d.data("vp-remove-class")),d.data("vp-offset")&&(h.offset= d.data("vp-offset")),d.data("vp-repeat")&&(h.repeat=d.data("vp-repeat")),d.data("vp-scrollHorizontal") &&(h.scrollHorizontal=d.data("vp-scrollHorizontal")),d.data("vp-invertBottomOffset")&&(h.scrollHorizontal=d.data("vp-invertBottomOffset")),a.extend( f,c),a.extend(f,h),!d.hasClass(f.classToAdd)||f.repeat)(String (f.offset).indexOf("%")>0&&(f.offset=parseInt(f.offset)/100*e.height);var i=f.scrollHorizontal?Math.round(d.offset(). left)+f.offset:Math.round(d.offset().top)+f.offset,j=f.scrollHorizontal?i+d.width():i+d.height();f.invertBottomOffset&&( j-=2*f.offset),g>i&&j>b?(d.removeClass(f.classToRemove),d.addClass(f.classToAdd),f.callbackFunction(d,"add")):d.hasClass (f.classToAdd)&&f.repeat&&(d.removeClass(f.classToAdd),f.callbackFunction(d,"remove")))))),a(document).bind("touchmove MSPointerMove pointermove",this.checkElements ),a(window).bind("load scroll touchmove",this.checkElements),a(window).resize(function(b)(e=(height:a(window).height(),width:a( window).width()),d.checkElements())),this.checkElements(),this))(jQuery);

Le code est compressé en une seule ligne pour un chargement rapide par le navigateur et est long, soyez donc prudent lors de la copie et assurez-vous de le copier dans son intégralité.

Étape 3

Après avoir connecté le script de retard, nous connectons un autre petit script qui définit les paramètres :

La troisième ligne contient la classe entre parenthèses - élémentanm. Cette classe devra être affectée à tous les blocs et éléments auxquels vous souhaitez affecter une animation. La quatrième ligne spécifie la classe - slideRight. C'est la classe d'animation. Pour définir l'animation souhaitée et la classe souhaitée, le dernier article, dont j'ai parlé au tout début, vous aidera. Dans notre cas, ce sera la sortie à droite.

Si vous souhaitez implémenter plusieurs types d'animation différents pour les éléments de page, le code doit être dupliqué uniquement en modifiant la classe dans la troisième ligne et la classe d'animation. Par exemple:

Étape 4

Comme mentionné à l'étape précédente, vous devez définir la classe sur les éléments élémentanm. DANS Balisage HTML ce sera comme ça :

Si vous avez déjà attribué une classe à l'élément, ajoutez simplement un espace, par exemple :

Étape 5

Et la dernière chose à faire est de définir des styles CSS. Écrivons d'abord les styles d'animation. Nous les prenons de l'article précédent, qui a déjà été mentionné dans cet article. Je prends l'animation - sortie à droite.

/*Animation à droite*/ .slideRight( animation-name : slideRight ; -webkit-animation-name : slideRight ; animation-duration : 4s ; -webkit-animation-duration : 4s ; animation-timing-function : facilité d'entrée -out ; -webkit-animation-timing-function : facilité d'entrée ; visibilité : visible !important ; ) @keyframes slideRight ( 0 % ( transformation : translateX(-150 %) ); ) 100 % ( transformation : translateX(0 %) ; ) ) @-webkit-keyframes slideRight ( 0% ( -webkit-transform: translateX(-150%); ) 100% ( -webkit-transform: translateX(0%); ) )

Comme vous pouvez le voir, les styles d'animation ont la classe slideRight, donc cette classe est écrite dans le script à l'étape 3. Il y a aussi un sens 4s est le temps d'animation et est égal à 4 secondes. Ajoutons maintenant des styles pour rendre l'élément invisible dans un premier temps.

Masqué( opacité : 0 ; ) .visible ( opacité : 1 ; )

Le chemin difficile en cinq étapes a été surmonté, vous pouvez donc regarder le résultat de votre travail. Vous pouvez être confus, mais si vous faites tout avec soin, tout ira bien. Le code de l'article provient d'un exemple, donc tout fonctionne. Essayez d'appliquer différents types animation pour obtenir le résultat souhaité.

C'est tout, merci pour votre attention. 🙂

Bonjour chers amis! Je prépare depuis longtemps le matériel de l'article d'aujourd'hui et j'ai essayé de le présenter le plus en détail possible. J'espère qu'après avoir lu, vous n'aurez plus de questions sur la façon dont le css est fait.

Je tiens à vous avertir tout de suite : nous n'écrirons pas de scripts ou quelque chose comme ça nous-mêmes (après tout, le blog est conçu pour les débutants, et nous avons besoin qu'il soit facile à connecter et qu'il fonctionne parfaitement).

Pour travailler, nous devons télécharger plusieurs outils.

Taille : 0,48 Mo

Source de téléchargement

Tout d'abord, il s'agit du fichier animate.css - une bibliothèque qui contient des styles pour animer des éléments sur la page. Afin d'évaluer visuellement et de sélectionner le type d'animation, j'utilise généralement la page de ressources http://daneden.github.io/animate.css/

Autrement dit, le processus d'ajout d'animation à un élément commence par le fait que je vais sur cette ressource et que je sélectionne le style d'animation parmi les options proposées. (Heureusement, il y a beaucoup de choix)

Ensuite, vous devez inclure une feuille de style. Pour ce faire, copiez le fichier animate.css dans le dossier de feuille de style de votre site. J'ai - ce dossier s'appelle "css". Et dans le fichier « index.html », entre les balises head, on écrit :

Nous devons maintenant attribuer une classe à l'élément que nous voulons animer avec le nom approprié qui a été choisi à l'étape précédente. Autrement dit, le style bounceInRight montré dans la capture d'écran ci-dessus sera la classe de l'élément que nous animerons. Ainsi que la classe animée, pour que l'animation soit jouée. J'espère que j'ai expliqué clairement? Sinon, l'exemple ci-dessous est extrêmement simple !

Par exemple:

Maintenant, lorsque la page est actualisée, l'animation jouera. Vous pouvez essayer d'appuyer sur la touche f5.

Vraiment cool? Mais ce n'est pas la fin du processus de création de l'animation, car nous devons nous assurer que l'animation se joue lorsque la page défile, et pas immédiatement après son chargement !

Pour ce faire, nous devrons utiliser le script wow.js prêt à l'emploi. Il doit être placé dans le dossier js du répertoire principal de votre site. Je n'ai posté qu'une version compressée, car elle pèse moins et se charge plus rapidement. Vous pouvez vous familiariser avec le projet dans son intégralité.

Ainsi, pour que l'animation des éléments se produise lors du défilement de la page, il est nécessaire d'ajouter les 2 lignes suivantes entre les balises head dans le fichier index.html :

Et aussi, à la classe bounceInRight, au lieu d'animé, vous devez ajouter wow. Vous devriez obtenir ce qui suit :

Comme vous pouvez le voir, la première animation est jouée immédiatement après le chargement de la page, et la seconde, uniquement lors du défilement, lorsque l'utilisateur la voit. Alors que le premier ne sera pas remarqué s'il n'est pas situé sur le premier écran.
Nous pouvons conclure que le processus de création d'une telle animation peut être réduit à 5 minutes du temps passé. Tout ce que tu dois faire est:

• Ajoutez 3 lignes de code entre les balises head d'ouverture et de fermeture.
• Copiez les fichiers animate.css et wow.min.js dans les dossiers appropriés.
• Ajoutez la classe wow et une classe avec le nom de l'animation à l'élément avec lequel nous voulons animer

Et voilà, votre site aura l'air beaucoup plus vivant et plus spectaculaire. Et en cas de vente - plus cher.

Mais il existe des outils de contrôle d'animation supplémentaires. Pour chaque élément, vous pouvez définir plusieurs attributs spéciaux pour une personnalisation plus fine :

• data-wow-offset : Distance depuis le bord inférieur du navigateur pour démarrer l'animation ;
• data-wow-duration : Modifier la durée de l'animation ;
• data-wow-delay : Délai avant le démarrage de l'animation ;
• data-wow-itération : Combien de fois répéter l'animation ?

Par exemple comme ceci :

C'est tout pour aujourd'hui, rendez-vous à smartlanding. Laissez vos commentaires et posez des questions ! Au revoir!

P.S. : Si vous souhaitez que l'animation soit lue lors du défilement dans les deux sens, je vous recommande de lire

Beaucoup ont déjà vu sur les sites une animation lors du défilement de la page. Mais les sites de cette collection sont légèrement différents de ceux que l'on trouve habituellement dans Runet. Ici, l'animation dépend directement du défilement. Lorsque vous naviguez sur ces sites, essayez de faire défiler la page lentement vers le bas, puis lentement vers le haut.

J'ai déjà écrit sur les pages de destination interactives. Assurez-vous de consulter cette collection :

Quelques mots sur la façon dont l'animation lors du défilement sur les sites de cette collection diffère de l'animation que l'on retrouve le plus souvent sur le Runet :

Généralement, lorsque vous faites défiler la page, l'élément apparaît dans son intégralité. Par exemple, une telle animation peut être réalisée à l'aide du plugin Wow.js. Il existe également des analogues où l'élément apparaît à chaque fois qu'il disparaît de l'écran que l'utilisateur voit.

Et voici des exemples de sites où l'animation des éléments dépend directement du défilement de l'écran. C'est-à-dire que l'élément apparaît exactement aussi loin que la personne a fait défiler l'écran. Les valeurs sont interpolées.

Grâce à cela, l'utilisateur contrôle lui-même le processus d'apparition des éléments sur la page. L'animation de défilement a une signification différente dans ce cas.

Ici, vous pouvez immédiatement trouver les inconvénients et les avantages de cette animation. Après tout, vous ne voulez pas toujours qu'une personne contrôle l'apparence des éléments, car tout le monde ne devinera pas tourner à la bonne vitesse. Et pour éviter cela, mieux vaut ne pas faire d'animation lors du défilement de la fonctionnalité principale.

Un peu plus tard, j'essaierai d'expliquer plus en détail le processus de création d'une telle animation, mais pour l'instant, consultez ces sites et faites défiler jusqu'à la fin de chacun d'eux.

1 Appliancetecltd.com

L'animation sur ce site est la base. Parce que les blocs n'apparaissent que lorsque nous faisons défiler la page. Si nous faisons défiler un peu la page vers le haut, l'animation va dans la direction opposée.

Sur ce site, en plus de l'animation de bloc, une animation de flou est également utilisée, ce qui rend le site encore plus attrayant. Sans savoir comment fonctionne l'animation, vous pourriez penser que le site est très large. Mais en fait, les bibliothèques d'animation vous permettent de faire beaucoup de choses automatiquement.

Comparé aux sites que vous verrez ci-dessous, celui-ci est assez petit, mais l'animation des blocs est très impressionnante.

2. Lempens-design.com

Ici, nous voyons immédiatement des animations d'éléments beaucoup plus différentes : les blocs s'écartent, les boutons tournent, un train passe, etc. Une animation inhabituelle apparaît même lorsque vous survolez certains boutons.

Mais surtout sur ce site, les images placées en fin de bloc sont saisissantes. Bien qu'ils soient complètement blancs, mais à cause de la belle image de fond ils complètent parfaitement le bloc.

3. Pedrolandaverde.com

Ce que j'aime dans ce site, c'est que l'animation ici est élément supplémentaire, pas le principal. Autrement dit, cela n'interfère pas avec le défilement de la page. Ici, l'animation ne fait que compléter et "animer" la page, la rendant plus dynamique.

Comme vous l'avez déjà remarqué (si vous avez visité ce site), en plus des engrenages en rotation, il y a plusieurs autres images animées ici. Mais ils ne sont pas très nombreux. Et cette animation est vraiment sympa et intéressante. Je vous conseille d'adopter ce concept.

4. InfoQuête

L'idée derrière cet exemple est très intéressante. En faisant défiler progressivement la page, vous semblez feuilleter une bande dessinée. C'est-à-dire qu'il y a des dialogues, de l'action et de beaux graphismes. C'est un tel plaisir à regarder. Et tout ce que vous avez à faire est de faire défiler la page progressivement vers le bas.

L'idée est cool, à petite échelle, vous pouvez l'implémenter sur une page de destination. L'essentiel est de le rendre vraiment thématique pour la page de destination.

5 Durabilité.bam.co.uk

Un autre exemple de page avec animation de défilement, où l'animation n'interfère pas avec la visualisation de la page et n'en dépend pas. C'est-à-dire qu'il complète l'image globale ici.

Cette façon de créer une animation est beaucoup plus facile et il est plus facile de trouver l'idée d'une telle animation.

6. Makeyourmoneymatter.org

Vous ne surprendrez personne avec des infographies sur le site. Même ces infographies qui occupent tout l'espace de la page. Mais ce site est un excellent exemple d'animation infographique lors du défilement de la page. D'accord, cette infographie a l'air vraiment cool !

Si vous aimez ces animations et ces infographies, vous devez d'abord créer une infographie. Vous pouvez le faire en utilisant l'un de ces services :

7. Joyeux Christmallax

Animation mignonne, au cours de laquelle un arbre de Noël dessiné à la main se transforme en Sapin de Noël. Ici, les blocs individuels sont parfaitement tracés, qui sont animés lors du défilement de la page. Fait magnifiquement et vous pouvez "prendre en compte" quelques idées.

8 Fluger.com

Une idée créative avec un avion qui vole dans deux directions : si vous faites défiler la page, l'avion vole vers le bas et parfois vers la droite, et si vous faites défiler dans la direction opposée, l'avion change de direction. Cette petite nuance rend vraiment cette page encore plus interactive.

9. Café

Vous voulez savoir comment le café est fabriqué ? Ensuite, faites simplement défiler cet atterrissage jusqu'à la toute fin. Même sans connaître l'anglais, vous pouvez comprendre ce que Dans la question sur cette page. Toutes les images sont si colorées et bien exécutées qu'on a l'impression de regarder une vidéo. Mais seulement ceci est une "vidéo" avec un avantage... Vous en avez le contrôle total 😉 .

10. Kaipoche

La page elle-même n'est pas très grande, mais l'animation en haut de celle-ci est superbe. Il existe également de nombreux éléments créés avec des animations CSS3. Pour ceux qui ne savent pas encore comment il est créé, je vous conseille d'étudier cet article :

11. Buntspenden

Après avoir regardé un grand nombre sites avec animation, il est peu probable que celui-ci vous surprenne avec quoi que ce soit. Mais il y a un élément ici qui n'est pas sur les sites précédents. Cet élément est un menu. Autrement dit, lorsque vous cliquez sur les éléments de menu, le bloc correspondant s'ouvre.

12. KIA

L'animation sur le site Web de KIA est également magnifiquement réalisée, mais le site prend beaucoup de temps à charger. Et si Internet est faible, le temps de téléchargement peut atteindre 2 à 3 minutes. Il est peu probable que les utilisateurs attendent aussi longtemps, ils fermeront probablement la page avec ce site.

13. Dangers de piratage

Par rapport à l'exemple précédent, ce site se charge beaucoup plus rapidement, mais ici l'animation n'est pas aussi grande.

14. Chaque dernière goutte

Un site Web interactif avec des éléments animés qui montre la quantité d'eau que nous utilisons quotidiennement. Même si vous ne savez pas ce qui est écrit en anglais, il est intuitivement clair à partir des images ce qui est quoi.

15. Arnold Clark

C'est l'un de ces sites où il y a tellement d'animations de défilement que même les doigts se fatiguent en faisant défiler la page. De plus, l'animation apparaît parfois très lentement. Par conséquent, pour voir l'animation complète de l'élément, vous devez beaucoup tourner la molette de la souris.

Internet change tous les jours. Certaines technologies et méthodes apparaissent, d'autres disparaissent. Pour cette raison, les concepteurs Web et les développeurs frontaux doivent se tenir au courant des dernières tendances en matière de conception Web. Le défilement parallaxe, les en-têtes fixes, le design plat, les sites à une seule page et les animations CSS font partie des tendances Web les plus en vogue en ce moment.

Dans ce didacticiel, nous verrons comment créer des animations et des effets de défilement de page à l'aide de CSS et de jQuery.

Les quatre effets que nous allons créer peuvent être vus sur cette page.

Remarque : Le code utilisé dans ce tutoriel pourrait être amélioré en mettant en cache des objets et en utilisant des animations CSS au lieu du jQuery " animer()", mais par souci de simplicité, nous nous concentrerons d'abord sur l'idée.

Que sont les animations et les effets de défilement de page ?

Ces animations et effets sont une technique nouvelle et croissante qui donne aux développeurs front-end la possibilité de créer des projets Web multimédias et interactifs. Lorsque l'utilisateur fait défiler la page, les développeurs peuvent facilement manipuler les objets avec CSS et jQuery.

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

Une fois que nous savons que l'utilisateur fait défiler la page, nous pouvons obtenir la position verticale de la barre de défilement à l'aide de la méthode scrollTop() et appliquer les effets souhaités :

si ($(this ) .scrollTop () > 0 ) (
// créer des effets et une animation
}
} ) ;

Sont-ils adaptatifs ?

Si nous sommes intéressés par la création d'effets réactifs (optimisés pour différentes résolutions d'écran), nous devons alors définir les propriétés suivantes :

• Propriété largeur- largeur de la fenêtre du navigateur.
• Propriété hauteur- la hauteur de la fenêtre du navigateur.

Sans définir ces propriétés, nous créerons des effets "statiques" et ne fonctionneront pas correctement si l'utilisateur redimensionne la fenêtre horizontalement ou verticalement.

Nous pouvons facilement obtenir les valeurs de ces propriétés en utilisant les méthodes width() et height().

L'extrait de code suivant montre toutes les vérifications nécessaires que nous devons prendre en compte afin de créer des effets de défilement de page.

$(fenêtre).scroll(fonction())(
si ($(this ).width()< 992 ) {
si ($(this ).height()<= 768 ) {
si ($(this ).scrollTop()< 500 ) {
// crée des effets
}
si ($(this ) .scrollTop() > 1000 ) (
// crée des effets
}
}
}
} ) ;

Maintenant que nous avons couvert les bases de la création de ces effets, voyons-les en action avec quatre exemples différents.

Exemple 1

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

si ($(window).scrollTop() > 60 ) (
$(".banner h2" ) .css ("affichage" , "aucun" ) ;
$(".banner .info" ) .css ("afficher" , "bloquer" ) ;
) autre (
$(".banner h2" ) .css ("afficher" , "bloquer" ) ;
$(".banner .info" ) .css ("affichage" , "aucun" ) ;
}

Le code ci-dessus masque l'élément enfant h2à l'intérieur d'un élément avec une classe .bannière et montre son élément enfant .Info, qui était caché à l'origine.

Ce code peut aussi s'écrire comme ceci :

si ($(window).scrollTop() > 60 ) (
$(".banner h2" ) .hide() ;
$(".banner.info" ) .show () ;
) autre (
$(".banner h2" ) .show() ;
$(".banner.info" ) .hide() ;
}

Exemple #2

L'effet suivant 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. En particulier, nous faisons les hypothèses suivantes :

1. La largeur de la fenêtre est inférieure ou égale à 549 pixels. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 600 pixels.
2. La largeur de la fenêtre a une valeur comprise entre 550px et 991px. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 480 pixels.
3. La largeur du navigateur est supérieure à 991 pixels. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 450 pixels.

Les hypothèses ci-dessus sont implémentées dans l'extrait de code suivant :

si ($(fenêtre).width()<= 549 ) {
si ($(window).scrollTop() > 600 ) (

premièreAnimation() ;
}
) sinon si ($(window).width() ><= 991 ) {
si ($(window).scrollTop() > 480 ) (
// animation à réaliser
premièreAnimation() ;
}
) autre (
si ($(window).scrollTop() > 450 ) (
// animation à réaliser
premièreAnimation() ;
}
}

Le code qui contient l'animation à réaliser est le suivant :

var firstAnimation = fonction())(
$(".clients.clients-info" ) .each (
fonction()(
$(this ) .delay (500 ) .animate ((
opacité : 1
hauteur : "180" ,
largeur : "250"
} , 2000 ) ;
}
) ;
} ;

Le code ci-dessus anime les propriétés d'opacité, de hauteur et de largeur d'un élément .clients-info.

Exemple #3

Le troisième effet dépend aussi de la position haute de l'ascenseur de la fenêtre et de la largeur de la fenêtre. En particulier, nous faisons les hypothèses suivantes :

1. La largeur de la fenêtre est inférieure ou égale à 549 pixels. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 1750 pixels.
2. La largeur de la fenêtre a une valeur comprise entre 550px et 991px. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 1150 pixels.
3. La largeur de la fenêtre est supérieure à 991 pixels. Dans ce cas, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre dépasse 850 pixels.

Et voici le code :

si ($(fenêtre).width()<= 549 ) {
si ($(window).scrollTop() > 1750 ) (
secondeAnimation() ;
}
) sinon si ($(window) .width () > 549 & amp;& amp; $(window) .width ()<= 991 ) {
si ($(window).scrollTop() > 1150 ) (
secondeAnimation() ;
}
) autre (
si ($(window).scrollTop() > 850 ) (
secondeAnimation() ;
}
}

Le code qui contient l'animation est le suivant :

var secondeAnimation = fonction())(
$(".method:eq(0)" ) .delay (1000 ) .animate ((
opacité : 1
) , "lent" ,
fonction()(

}
) ;

$(".method:eq(1)" ) .delay (2000 ) .animate ((
opacité : 1
) , "lent" ,
fonction()(
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;

$(".method:eq(2)" ) .delay (3000 ) .animate ((
opacité : 1
) , "lent" ,
fonction()(
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;

$(".method:eq(3)" ) .delay (4000 ) .animate ((
opacité : 1
) , "lent" ,
fonction()(
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;
} ;

Le code ci-dessus anime séquentiellement la propriété opacité pour les éléments .méthode puis changer la couleur de fond éléments enfants h4.

Exemple #4

Cet effet dépend également de la position supérieure de la barre de défilement et de la largeur de la fenêtre. Plus spécifique:

1. Si la largeur de la fenêtre est inférieure ou égale à 549px, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre est supérieure à 3500px.
2. Si la largeur de la fenêtre est comprise entre 550px et 991px, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre est supérieure à 2200px.
3. Si la largeur de la fenêtre est supérieure à 991px, l'animation ne se déclenche que lorsque la position supérieure de la barre de défilement de la fenêtre est supérieure à 1600px.

Ceci est implémenté par le code suivant :

si ($(fenêtre).width()<= 549 ) {
si ($(window).scrollTop() > 3500 ) (
troisièmeAnimation() ;
}
) sinon si ($(window) .width () > 549 & amp;& amp; $(window) .width ()<= 991 ) {
si ($(fenêtre).scrollTop() > 2200 ) (
troisièmeAnimation() ;
}
) autre (
si ($(window).scrollTop() > 1600 ) (
troisièmeAnimation() ;
}
}

Le code d'animation est le suivant :

.retard(2000) .animer((
opacité : 1
droite : 0
), "lent"
) ;

$(".blogs" ) .find ("bouton" ) .delay (2500 ) .animate ((
opacité : 1
en bas : 0
), "lent"
) ;
} ;

Le code ci-dessus anime les propriétés opacity , left , right et bottom en séquence pour les éléments de P, IMG, BOUTON.

Conclusion

J'espère que les quatre exemples présentés ici vous aideront à comprendre comment vous pouvez créer divers effets et animations lors du défilement d'une page.

Si vous avez des questions, veuillez utiliser notre

Vous pouvez voir l'exemple le plus simple d'utilisation de cette combinaison un peu plus bas sur cette page. La chose la plus intéressante est que cette beauté (animation de défilement) fonctionne SANS jQuery. Il s'avère que toutes les portes sont ouvertes pour ce script... Et à titre d'exemple, faites défiler vers le bas... Plus audacieusement...

Je peux vous dire avec confiance que l'animation de défilement devient TRÈS populaire, et vous pouvez souvent voir cet effet sur les sites de vente d'entrepreneurs Internet prospères. Ces « astuces » donnent TRÈS vie aux sites et aident également à attirer l'attention du visiteur sur les points importants que vous voulez qu'il remarque en premier.

Animation de défilement : Combinaison
« WOW.js" Et " Animer.css»
sur wordpress...

* pour répéter l'animation, rechargez la page.

Comment configurer ?

ÉTAPE 1
Pour commencer, téléchargez ces deux fichiers ("WOW.js" et "Animate.css")

MIS À JOUR(25 juillet 2019):
wow.min.js v1.2.1| animer.min.css v3.7.2
ÉTAPE 2
Nous plaçons le dossier "wow-animation" dans le dossier racine du site. Bien sûr, vous pouvez le mettre n'importe où, tant que vous spécifiez le bon chemin d'accès aux fichiers. Il est tout de même conseillé de placer ce dossier dans le dossier racine : index.html. Si c'est WordPress, placez le dossier où vous voulez. (l'essentiel est de spécifier le bon chemin d'accès).

ÉTAPE 3
Nous plaçons dans cette ligne:

"wow-animation/animate.min.css">

* Naturellement, nous spécifions le chemin d'accès correct au fichier. Si vous installez sur WordPress, je vous recommande de spécifier le chemin complet, c'est-à-dire commençant par httpS://VotreDomaine etc. Pour vérifier si vous avez correctement connecté le fichier - copiez l'URL, entrez dans barre d'adresse et appuyez sur "Entrée". Si un fichier avec un code incompréhensible s'ouvre, alors tout va bien 🙂

ÉTAPE 4
Placé tout en bas de la page avant ces lignes :

<script src="wow-animation/wow.min.js" >

* Spécifiez également le chemin d'accès correct au fichier et vérifiez dans le navigateur.

<div classe ="wow fadeInRight" > Certaines informationsdiv >

ÉTAPE 6
Réglages avancés. Ajout de fonctions :
data-wow-duration: Modifier la durée de l'animation ;
data-wow-retard: Délai avant le démarrage de l'animation ;
data-wow-décalage: Distance avant le début de l'animation (par rapport au bas de la fenêtre du navigateur) ;
data-wow-itération: Répétez l'animation "tant de fois".

<div class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Certaines informationsdiv > <h1 class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Certaines informationsh1 >