The content of the web page is not displayed at the beginning, and there is still a time difference with the mouse pull-down delay
At first, I thought it was difficult, complicated and tall, until I found that wow.js
The first is the demo address: https://www.delac.io/wow/
Well, dogs are really cute
Next, Download: http://www.downyi.com/downinfo/37040.html
It seems that everyone has given a github address to download, but I have tried countless times and I still can't open the website
Maybe it's because there's no turning over the wall 555
Anyway, I found a pheasant website and downloaded it
Because wow.js has to be used with animate.css
So both downloaded together
First of all, compatible with IE10 + and other mainstream browsers
Official presentation:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> *{margin:0;padding:0;} body{overflow-x:hidden;font-family:"Microsoft Yahei";} body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;} body .txt{margin:80px 0;font-size:16px;text-align:center;} .dowebok{margin:0 auto;} .dowebok ul{list-style-type:none;} .dowebok .row{font-size:0;text-align:center;} .dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";vertical-align:top;*display:inline;zoom:1;} .bg-green{background:#5bd5a0;} .bg-blue{background:#1daee9;} .bg-purple{background:#c843a5;} .bg-red{background:#eb3980;} .bg-yellow{background:#ffcc35;} </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <h1>WOW.js - Page scrolling animation display</h1> <p class="txt">WOW.js It can make the page display animation when scrolling, making the page more interesting.</p> <div class="dowebok"> <div class="row"> <div class="wow rollIn bg-blue"></div> <div class="wow bounceInDown bg-green">WOW.js</div> <div class="wow lightSpeedIn bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">Simple and easy to use</div> <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInRight bg-blue">Lightweight</div> </div> <div class="row"> <div class="wow bounceInLeft bg-green"></div> <div class="wow flipInX bg-purple">WOW.js</div> <div class="wow bounceInRight bg-yellow"></div> </div> <div class="row"> <div class="wow rollIn bg-blue">No need jQuery</div> <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow swing bg-purple" data-wow-iteration="2">pure JS</div> </div> <div class="row"> <div class="wow rollIn bg-red"></div> <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div> <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div> </div> <div class="row"> <div class="wow bounceInLeft bg-purple">rely on animate.css</div> <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div> <div class="wow lightSpeedIn bg-yellow">Multiple animations</div> </div> <div class="row"> <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInUp bg-red">WOW.js</div> <div class="wow bounceInRight bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-red" data-wow-delay="0.5s">No need jQuery!？</div> <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div> <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">Thank you</div> </div> </div> <script src="js/wow.min.js"></script> <script> //Only compatible IE10+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script> </body> </html>
Design sketch
There are many special and simple online tutorials. I'll follow them
After introducing wow.js and animate.css
Instantiate the constructor and call the base method
<script> //Only compatible IE10+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script>
Then write the html structure
<div class="box"> <div class="wow slideInLeft"></div> <div class="wow bounceIn"></div> <div class="wow slideInRight"></div> </div>
Each child div has a wow class, which is equivalent to the animated basic class in Animate.css
wow class is a must, because it is a basic class. If it is not written, everything behind it will be in vain
The wow class is followed by the action class name, which can be found in Animate.css
Write a little style for these div s to show on the page
<style type="text/css"> .box { width: 900px; margin: 100px auto; display: flex; } .box div { width: 300px; height: 300px; border-radius: 50%; } .box div:nth-child(1) { background-color: #9C89B8; } .box div:nth-child(2) { background-color: #F0A6CA; } .box div:nth-child(3) { background: #B8BEDD; } </style>
Design sketch
Let's play some advanced games
On the html element, you can also add the following four attributes
Data wow delay: animation delay execution (unit can be ms or s)
Data wow duration: animation execution time (the unit is the same as above)
Data wow iteration: the number of times an animation repeats (number or loop)
Data wow offset: how many pixels from the bottom of the browser (offset) after the element's position is exposed
wow, that's about it. By the way, add animate.css
A simple example with a div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id="box" class="animated bounce"></div> </body> </html>
You can see the green little box, the bullet, the bullet
There are also settings for animation cycle execution, animation delay execution, and animation execution time
delay-2s: animation in 2 seconds
delay-3s: execute animation in 3 seconds
delay-4s: animation in 4 seconds
delay-5s: execute animation in 5 seconds
slow: finish animation in 2 seconds
Slow: finish the animation in 3 seconds
fast: finish the animation in 0.8 seconds
Fast: finish the animation in 0.5 seconds
If you want to animate infinite repetition, use the following class
infinite
<div id="box" class="animated bounce delay-2s faster infinite"></div>
This is the effect of all the connections. It's not bad
Next click the button to trigger the demo of the animation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } #btn{ display: block; width:100px; height:30px; background: paleturquoise; text-align: center; line-height:30px; border:none; margin:30px auto; cursor:pointer; } </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id="box"></div> <button id="btn">btn</button> <script> function animateCss(element, animationName, callback) { /* Get the message */ const node = document.querySelector(element); /* Add the basic class animated to the element, and the animation class */ node.classList.add('animated', animationName); function handleAnimationEnd() { /* Remove base and animation classes */ node.classList.remove('animated', animationName); /* Remove event listening of current element */ node.removeEventListener('animationend', handleAnimationEnd); /* If there is a callback function, execute it */ if (typeof callback === 'function') callback(); } /* Through event listening, when the animation is finished, execute the handleAnimationEnd function */ node.addEventListener('animationend', handleAnimationEnd); } /*Trigger animateCss function after clicking the button*/ btn.onclick = function() { animateCss('#box', 'bounce'); }; </script> </body> </html>
If the animation in animate.css can't meet your needs, you can write your own
But don't modify the animate.css file directly
Find the animated class, copy it to your css file, and then modify the settings
Over~