Explication détaillée des noms de classes correspondant à divers effets spéciaux dans wow.js

Noms de classe correspondant à divers effets spéciaux dans wow.js

1. (Lorsque la page défile vers le bas, certains éléments produiront de petits effets d'animation. Bien que l'animation soit relativement petite, elle peut attirer votre attention. )

Je viens de découvrir le plug-in wow.js. J'avais l'habitude de voir divers effets lorsque je visitais d'autres sites Web et que je descendais la barre de défilement.

Bien que l'effet soit sorti, les noms de classe correspondant aux divers effets spéciaux n'ont pas été compilés en ligne, j'ai donc écrit un article facile à comprendre (au moins je peux le comprendre) pour que chacun puisse s'y référer et l'étudier. . (^_^)

2. Expliquez d'abord comment utiliser ce plug-in :

1. wow.js dépend de animate.css, faites d'abord référence à animate.css ou animate.min dans la tête .css.

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

　2. Citez wow.js ou wow.min.js en bas, puis écrivez une autre ligne de code javascript ci-dessous. (Pas besoin de citer jQuery)

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

　Notez que WOW dans new WOW().init();
2. Citez wow.js ou wow.min.js en bas, puis écrivez une autre ligne de code javascript ci-dessous. (Pas besoin de citer jQuery)

3. Écrivez les éléments qui nécessitent une animation sous le CSS et au-dessus du js (doit être défini sur block ou inline block ! Doit être défini sur block ou inline block ! Doit être défini bloquer ou bloquer en ligne ! ) et ajoutez le nom de la classe.

<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></p>

Le wow devant le nom de la classe doit être ajouté à chaque élément animé, et slideInLeft indique le style d'animation. Les

data-wow-duration (durée de l'animation),

data-wow-delay (délai d'animation),

data-wow-offset (combien d'éléments pixels à partir du bas une fois la position exposée)

data-wow-iteration (nombre d'exécutions d'animation)

Ces quatre attributs sont facultatifs.

4. Afin d'écrire un article, j'ai spécifiquement testé les deux attributs data-wow-offset et data-wow-iteration. La valeur dans data-wow-offset="value" est animée. . La position de l'élément arrière à partir du bas du moniteur, et non du bas de la fenêtre du navigateur.

3. Pour en venir au fait, testons tour à tour les effets d’animation de différents noms de classes. (Efforcez-vous de le rendre facile à comprendre)

.

wow rollIn	Faites défiler dans le sens des aiguilles d'une montre de gauche à droite, la transparence passe de 100% à la valeur définie
wow rebondIn	apparaît à partir de la position d'origine, passe de petit à plus grand que la valeur définie, puis plus petit que Définissez la valeur, puis revenez à la valeur définie, et la transparence passe de 100% à la valeur définie
wow rebondInUp	de bas en haut, elle dépassera vers le haut après avoir sauté Une partie rebondit ensuite, et la transparence reste inchangée à la valeur définie
wow rebondInDown	De haut en bas, après être tombée, elle ira descendre une pièce puis rebondir un peu, transparence La valeur définie reste inchangée
wow rebondirInLeft	De gauche à droite, après s'être déplacé, il étendra une pièce jusqu'à vers la droite puis rebondir vers la gauche. La transparence est la valeur définie Inchangée
wow rebondInRight	De droite à gauche, après s'être déplacée, elle s'étendra jusqu'à. vers la gauche puis rebondir vers la droite. La transparence reste inchangée à la valeur définie
wow slideInUp	De bas en haut, remontez et fixez-le A la position définie, la transparence reste à la valeur définie (haut signifie de bas en haut) (si l'élément est en bas, cela augmentera la hauteur de la boîte)
wow slideInDown	De haut en bas, après être remonté, il sera fixé à la position définie, et la transparence restera à la valeur définie
wow slideInLeft	De gauche à droite, après avoir été fixée à la position définie, la transparence reste à la valeur définie (la gauche est de gauche à droite)
wow slideInRight	Fixé de droite à gauche, de haut en haut Lorsque la position définie est atteinte, la transparence reste inchangée à la valeur définie
wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

　　　测试了这么多终于摸到窍门了，打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。

****************************************************************
            https://daneden.github.io/animate.css/          也可以在这个地方看各种演示
****************************************************************

四、配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。

五、IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

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!