+371 28243283 dantemasuri@mail.ru
Выбрать страницу

ANIMATION WHEN USER SCROLLING!

Working embed code

<link href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css” rel=”stylesheet” type=”text/css” media=”all” >

<!– JS –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js”></script>

 

WOW.js is a small library that allows you to enable animation at a certain stage of the page scroll. It weighs very little, and besides, it is completely independent – that is, there is no need to connect jQuery or other monsters.

Animate.CSS is a script that is directly responsible for the animation itself. In fact, wow.js takes animations from this thing. And there are dozens of them.

The downside of animate.css is that it’s just a simple set of animation-based CSS rules. That is, they are played immediately after the page is loaded. And if the animated elements are not visible on the “first” screen, then visitors simply will not see all this beauty. After all, it will be played before they rewind the page to the right place.

And in the first note (link in the next paragraph), so that this does not happen, I showed you how and where to write js codes so that the animation would play at a certain stage of the page scroll. It was extremely inconvenient, but it worked with a bang cool smile

Therefore, before you start, I advise you to watch the lesson “Animate.CSS + animation on scroll”. Since I will already imply that you know how to use animation on the site. At the same time, you will immediately understand how wow.js makes work easier. After all, now we will not need to write and delve into the js code. Connected and forgot wink

And so, the introduction is over. Now let’s get closer to the “body”. I recorded a video lesson on this topic, but before watching, I want to show what you get if you go through the lesson to the end in practice. So to speak, for more motivation power

WOW.js by example

 

Setting up WOW.js
How to download and connect.
1 step. Download the wow.js and animate.css scripts from the official sites (see links above under the video) and place them in your project folder.

2 step. We connect scripts with simple HTML code on the page in the <head> tag:

<link rel=”stylesheet” href=”animate.min.css”>
<script src=”wow.min.js”></script>
Note from Master-CSS channel subscriber:

EXAMKPLE

<div class=”block block–black wow bounceInUp” ></div>
<div class=”block block–green wow slideInLeft” data-wow-duration=”2s” data-wow-delay=”0.5s”></div>
<div class=”block block–orange wow pulse” data-wow-iteration=”infinite” data-wow-duration=”1500ms”></div>
<div class=”block block–blue wow lightSpeedIn” data-wow-duration=”2s” data-wow-delay=”0.5s”></div>

See the Pen WOW.js by vinh (@vjhnguyen) on CodePen.