1 (Wenn die Seite nach unten scrollt, erzeugen einige Elemente kleine Animationseffekte. Obwohl die Animation relativ klein ist, kann sie Aufmerksamkeit erregen. )
Ich habe gerade etwas über das wow.js-Plugin erfahren, als ich andere Websites besuchte und die Bildlaufleiste herunterzog.
Obwohl der Effekt herausgekommen ist, wurden die Klassennamen, die den verschiedenen Spezialeffekten entsprechen, nicht online zusammengestellt, daher habe ich einen leicht verständlichen Artikel (zumindest kann ich ihn verstehen) geschrieben, damit jeder ihn nachschlagen und studieren kann . (^_^)
2. Erklären Sie zunächst, wie dieses Plug-In verwendet wird:
1. wow.js hängt von animate.css ab, verweisen Sie zuerst auf animate.css oder animate.min in der Kopf .css.
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
2. Zitieren Sie unten wow.js oder wow.min.js und schreiben Sie dann unten eine Zeile Javascript-Code. (JQuery muss nicht zitiert werden)
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script> Beachten Sie, dass WOW in new WOW().init(); groß geschrieben werden muss, sonst hat es keine Wirkung.
2. Zitieren Sie unten wow.js oder wow.min.js und schreiben Sie dann unten eine weitere Zeile Javascript-Code. (JQuery muss nicht zitiert werden)
3. Schreiben Sie die Elemente, die eine Animation benötigen, unter das CSS und über das JS (muss auf Block oder Inline-Block eingestellt sein! Muss auf Block oder Inline-Block eingestellt sein! Muss eingestellt sein to block oder Inline block! ) und fügen Sie den Klassennamen hinzu.
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></p>
Das Wow vor dem Klassennamen muss jedem animierten Element hinzugefügt werden, und slideInLeft gibt den Animationsstil an. Die folgenden
data-wow-duration (Animationsdauer),
data-wow-delay (Animationsverzögerungszeit),
data-wow-offset (Anzahl der Elemente). Pixel vom Boden entfernt, nachdem die Position freigelegt wurde)
data-wow-iteration (Anzahl der Animationsausführungen)
Diese vier Attribute sind optional.
4. Um einen Artikel zu schreiben, habe ich speziell die beiden Attribute data-wow-offset und data-wow-iteration getestet. Der Wert in data-wow-offset="value" ist animiert . Die Position des hinteren Elements vom unteren Rand des Monitors, nicht vom unteren Rand des Browserfensters.
3. Um zum Punkt zu kommen, testen wir nacheinander die Animationseffekte verschiedener Klassennamen. (Bemühen Sie sich, es leicht verständlich zu machen)
| wow rollIn | Scrollen Sie im Uhrzeigersinn von links nach rechts, die Transparenz wechselt von 100 % auf den eingestellten Wert |
| | |
| wow bounceIn | erscheint von der ursprünglichen Position, ändert sich von klein zu größer als der eingestellte Wert und dann kleiner als Stellen Sie den Wert ein, kehren Sie dann zum eingestellten Wert zurück, und die Transparenz ändert sich von 100 % auf den eingestellten Wert |
| wow bounceInUp | von unten nach oben, er wird überschritten nach oben springen Ein Teil springt dann zurück und die Transparenz bleibt unverändert auf dem eingestellten Wert |
| wow bounceInDown | Von oben nach unten, nach dem Fallen geht es weiter einen Teil nach unten und dann ein wenig hüpfen, Transparenz Der eingestellte Wert bleibt unverändert |
| wow bounceInLeft | Von links nach rechts wird nach dem Überfahren ein Teil erweitert Die Transparenz ist der eingestellte Wert. |
| wow bounceInRight | Von rechts nach links wird sie erweitert Die Transparenz bleibt unverändert auf dem eingestellten Wert |
| wow slideInUp | Von unten nach oben, komm nach oben und fixiere es. An der eingestellten Position bleibt die Transparenz auf dem eingestellten Wert (oben bedeutet von unten nach oben) (wenn das Element unten ist, Dadurch wird die Höhe der Box erweitert) |
| wow slideInDown | Von oben nach unten wird es nach dem Hochfahren an der eingestellten Position und der Transparenz fixiert bleibt auf dem eingestellten Wert |
| wow slideInLeft | Von links nach rechts, nach dem Hochfahren Fest an der eingestellten Position bleibt die Transparenz auf dem eingestellten Wert (links ist). von links nach rechts) |
| wow slideInRight | Fixiert von rechts nach links, oben und oben. Bei Erreichen der eingestellten Position bleibt die Transparenz unverändert auf dem eingestellten Wert |
| 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 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Klassennamen, die verschiedenen Spezialeffekten in wow.js entsprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
