You can see the simplest example of using this combination a little lower on this page. The most interesting thing is that this beauty (scrolling animation) works WITHOUT jQuery. It turns out that all the doors are open for this script... And as an example, scroll down... More boldly...
I can tell you with confidence that now scrolling animation is becoming VERY popular, and you can often see this effect on the selling sites of successful Internet entrepreneurs. Such "tricks" VERY enliven sites, and also help to focus the visitor's attention on those important points which you want to be seen first.
Scroll Animation: Combination
« WOW.js" and " Animate.css» on wordpress...
* to repeat the animation, reload the page.
How to setup?
STEP 1 To get started, download these two files ("WOW.js" and "Animate.css")
UPDATED(July 25, 2019): wow.min.js v1.2.1| animate.min.css v3.7.2 STEP 2 We place the folder "wow-animation" in the root folder of the site. Of course, you can put it anywhere, as long as you specify the correct path to the files. It is still advisable to place this folder in the root folder: index.html. If it's WordPress, then put the folder wherever you want. (the main thing is to specify the correct path to it).
STEP 3 We place in
this line:
"wow-animation/animate.min.css">
* Naturally, we specify the correct path to the file. If you are installing on WordPress, then I recommend specifying full path, i.e. starting with httpS://YourDomain etc. To check if you have connected the file correctly - copy the URL, enter it in the address bar and press "Enter". If a file with an incomprehensible code opens, then everything is OK 🙂
STEP 4 Placed at the very bottom of the page before
these lines:
<script src="wow-animation/wow.min.js" >
* Also specify the correct path to the file and check in the browser.
<div class ="wow fadeInRight" > Certain Informationdiv >
STEP 6 Advanced settings. Adding functions: data-wow-duration: Change the duration of the animation; data-wow-delay: Delay before animation starts; data-wow-offset: Distance before the animation starts (relative to the bottom of the browser window); data-wow-iteration: Repeat the "so many times" animation.
<div class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Certain Informationdiv >
<h1 class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Certain Informationh1 >
Hello. Let me remind you that I already wrote about, but it was just basic principles. Now I suggest that you familiarize yourself with the ready-made set of animation properties in one animate.css file. This is not a generator, but a library that works quite correctly in all popular browsers. And you can see these examples here.
Connecting Animate.css
If you want to make a CSS animation of a picture, text, or buttons for a site and implement all this without using Javascript, then you just need to include one file, which was already mentioned above, in a standard way, that is, between the head tags.
This is how the animation properties of objects are written. , animated is required, and tada is one of the effects. But we need the cycle itself, and now we will do it. This can be done by creating a new class and assigning special properties to it or to an existing one.
Loop Animation Animate.css
.new ( animation-iteration-count : infinite ; )
New(animation-iteration-count: infinite;)
And to make it even more clear to you what I was trying to explain here, then watch this video, where I clearly demonstrate how it works with a real example, and also download the styles themselves.
Increasingly, on many landing pages or promo pages, you can find various animation effects. After all, they make the page more interesting and attractive.
Basically, these effects are set either on some event (click or hover on an element), or at the moment of scrolling the page. I think you have seen such sites, when scrolling through the page, various elements appear smoothly and beautifully.
Previously, to implement these effects, you had to use only JS, but development does not stand still and with the release of CSS3, all these effects can be implemented on it.
In this lesson, we will get acquainted with a very interesting tool called animate.css. This is a ready-made CSS style sheet, which has over 50 different effects in its arsenal and all these effects are implemented in CSS3.
To use it, you just need to set a certain class for the required element and the animation effect will be applied to this element. As I said earlier, this animation is implemented in CSS3, so these effects will work in all modern browsers.
Now let's take a closer look at animate.css.
Basic HTML markup
Watch video tutorial
bounce
flash
pulse
rubber band
shake
swing
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
Endless animation
If you did everything as described above, then at the moment the page loads, this effect will be applied to the element and that's it, the animation will end there.
But what if you want the animation to continue without stopping?
To do this, just add another class for our animated element. This class is infinite.
header
Set animation when hovering the mouse over an element
Watch video tutorial
All the examples described earlier set the animation immediately after the page is loaded, but in practice this is rarely necessary. In practice, it is very often necessary to set an animation when hovering over an element, and therefore below I have given the ready-made code for this implementation.
HTML
HTML our markup has changed a bit, now we do not need to set a class that is responsible for a specific animation. We need to specify this value in a special attribute data effect. Pay attention to this, it's very important.
header
Here is a little code for jQuery, which will track the event of hovering the mouse cursor over the element and in case of occurrence of this event, the script will add a class to it, the value of which is specified in the attribute data effect. By adding this class, animation will be applied.
Naturally, you can change this script as you like, for example, you can change the event in it mouseenter on the click. Then, in this case, the animation will occur not at the moment of hovering the mouse over the element, but at the moment of clicking.
Making animation when scrolling the page
Watch video tutorial
And finally, let's look at another example where you can easily apply animate.css.
Namely, you can set different effects for elements when scrolling the page. For these purposes, in addition to animate.css, we need another special script wow.js.
CSS3 animation makes websites dynamic. It brings web pages to life, improving the user experience. Unlike CSS3 transitions, animation creation is based on keyframes, which allow you to automatically play and repeat effects for a specified time, as well as stop the animation inside the loop.
CSS3 animation can be applied to almost all html elements, as well as :before and :after pseudo-elements. The list of animated properties is given on the page. When creating animation, do not forget about possible problems with performance, since changing some properties requires a lot of resources.
Keyframes are used to specify animation property values at various points in the animation. Keyframes define the behavior of a single animation loop; animation can be repeated zero or more times.
Keyframes are specified using the @keyframes rule, defined as follows:
@keyframes animation name ( list of rules )
Animation creation starts with installation key personnel@keyframes rules. Frames determine which properties will be animated at which step. Each frame may include one or more declaration blocks of one or more property and value pairs. The @keyframes rule contains the element's animation name, which links the rule and the element's declaration block.
Keyframes are created using the from and to keywords (equivalent to 0% and 100%) or percentage points, which can be set to any number. You can also combine keywords and percentage points. If frames have the same properties and values, they can be combined into one declaration:
If 0% or 100% frames are not specified, then the user's browser creates them using the computed (originally set) values of the property being animated.
If multiple @keyframes rules are defined with the same name, the last one in document order will fire, and all previous ones will be ignored.
After declaring the @keyframes rule, we can refer to it in the animation property:
It is not recommended to animate non-numeric values (with rare exceptions), as the result in the browser can be unpredictable. Also, don't keyframe property values that don't have a midpoint, such as property values color: pink and color: #ffffff , width: auto and width: 100px, or border-radius: 0 and border-radius: 50% ( in this case, it would be correct to specify border-radius: 0%).
1.1. Timing function for keyframes
A keyframe style rule can also declare a timing function to be used when moving the animation to the next keyframe.
Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (that is, between 0% and 25%), the slowdown function is used. Between the second and third keyframe (that is, between 25% and 50%), the smooth acceleration function is used. And so on. The element will move up the page by 50px , slowing down as it reaches its highest point, and then accelerating as it drops to 100px . The second half of the animation behaves similarly, but only moves the element 25px up the page.
The time function specified in the to or 100% keyframe is ignored.
2. Animation name: animation-name property
The animation-name property specifies a list of animations to apply to the element. Each name is used to select a keyframe in the rule that provides property values for animation. If the name does not match any key frame in the rule, there are no properties to animate, there is no animation name, the animation will not run.
If multiple animations attempt to change the same property, then the animation closest to the end of the list of names will be executed.
Animation name is case sensitive, not allowed keyword none . It is recommended to use a name that reflects the essence of the animation, and you can use one or more words listed with a hyphen - or underscore _ .
The animation-duration property determines the duration of one animation cycle. Specified in seconds s or milliseconds ms . If more than one animation is set for an element, then you can set different time for each, listing the values separated by commas.
The animation-timing-function property describes how the animation will progress between each pair of keyframes. During animation delay time functions are not applied.
The property is not inherited.
animation-timing-function
Values:
linear
Linear function, animation occurs evenly throughout the entire time, without fluctuations in speed.
bezier functions
ease
The default feature, the animation starts slowly, accelerates quickly and slows down at the end. Matches cubic-bezier(0.25,0.1,0.25,1) .
ease-in
The animation starts slowly and then smoothly speeds up at the end. Matches cubic-bezier(0.42,0,1,1) .
ease-out
The animation starts quickly and slowly slows down at the end. Corresponds to cubic-bezier(0,0,0.58,1) .
ease-in-out
The animation starts slowly and ends slowly. Matches cubic-bezier(0.42,0,0.58,1) .
cubicbezier(x1, y1, x2, y2)
Allows you to manually set values from 0 to 1. You can build any trajectory of the animation change speed.
step functions
step start
Sets the animation step by step, breaking the animation into segments, changes occur at the beginning of each step. Calculated in steps(1, start) .
step-end
Step by step animation, changes occur at the end of each step. Calculated in steps(1, end) .
steps(number of steps, step position)
A step time function that takes two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second argument is jump-none, in which case it must be a positive integer greater than 1 . The second parameter, which is optional, specifies the position of the step, the point at which the animation starts, using one of the following values:
jump-start - the first step occurs at a value of 0
jump-end - the last step occurs at a value of 1
jump-none - all steps occur within the range (0, 1)
jump-both - the first step occurs at a value of 0 , the last - at a value of 1
start - behaves like jump-start
end - behaves like a jump-end
With a value of start, the animation starts at the beginning of each step, with a value of end, at the end of each step, with a delay. The delay is calculated as the result of dividing the animation time by the number of steps. If the second parameter is not specified, the default value end is used.
The animation-iteration-count property specifies the number of times the animation loop plays. An initial value of 1 means that the animation will play from start to finish once. This property is often used in conjunction with the alternate value of the animation-direction property, which causes the animation to play in reverse order in alternate cycles.
The animation-direction property determines whether the animation should play in reverse on some or all of the loops. When the animation is played in reverse, the timing functions are also reversed. For example, when playing backwards, the ease-in function will behave like ease-out .
The property is not inherited.
animation direction
Values:
normal
All animation repeats play as specified. Default value.
reverse
All animation repeats play backwards from how they were defined.
alternate
Every odd iteration of the animation loop plays in the normal direction, every even iteration plays in the opposite direction.
alternate reverse
Every odd iteration of the animation loop plays in reverse, every even iteration plays in the normal direction.
initial
Sets the value of a property to its default value.
inherit
Inherits the property value from the parent element.
To determine if an animation loop repeat is even or odd, the repeat count starts at 1 .
7. Animation playback: the animation-play-state property
The animation-play-state property determines whether the animation will be started or paused. Stopping the animation inside the loop is possible through the use of this property in the JavaScript script. You can also stop the animation when you hover over an object — state:hover .
The animation-delay property determines when the animation will begin. Specified in seconds s or milliseconds ms .
The property is not inherited.
Syntax
Animation-delay: 5s; animation-delay: 3s, 10ms
9. The state of the element before and after the animation is played: the animation-fill-mode property
The animation-fill-mode property determines which values are applied by the animation outside of its execution time. When the animation ends, the element reverts to its original styles. By default, animation does not affect property values when the animation is applied to an element - animation-name and animation-delay . Also, by default, the animation does not affect the values of the animation-duration and animation-iteration-count properties after it has finished. The animation-fill-mode property can override this behavior.
The property is not inherited.
animation-fill-mode
Values:
none
Default value. The state of the element does not change before or after the animation plays.
forwards
After the animation ends (as determined by the animation-iteration-count value), the animation will apply the property values by the time the animation ended. If animation-iteration-count is greater than zero, the values for the end of the animation's last completed iteration are applied (rather than the value for the start of the next iteration). If animation-iteration-count is zero, the values applied will be those that start the first iteration (same as animation-fill-mode: backwards;).
backwards
For the period specified with animation-delay , the animation will apply the property values defined on the keyframe, which will begin the first iteration of the animation. These are either from keyframe values (when animation-direction: normal or animation-direction: alternate) or to keyframe values (when animation-direction: reverse or animation-direction: alternate).
both
Allows the element to stay on the first keyframe until the animation starts (ignoring a positive delay value) and to stay on the last frame until the end of the last animation.
All animation playback options can be combined in one property - animation , listing them separated by a space: animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
To play the animation, it is enough to specify only two properties - animation-name and animation-duration , the rest of the properties will take their default values. The order of the properties doesn't matter, the only thing is that the animation-duration must come before the animation-delay .
11. Multiple animations
For one element, you can set several animations by listing their names separated by commas:
Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)
Today we will learn how to animate site objects quickly and easily using two scripts. The name of which you can see above, in the title of this article. But first, let me tell you what each of them is for.
WOW.js is a small library that allows you to enable animation at a certain stage of page scrolling. It weighs very little, and besides, it is completely independent - that is, there is no need to connect jQuery or other monsters.
Animate.CSS- 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 worked with a bang
Therefore, before you start, I advise you to watch the lesson “”. 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 things easy. After all, now we will not need to write and delve into the js code. Connect and forget
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
Well, have you looked? This is what you "zababahat" with your own hands. So now run to watch the video.
Lesson: WOW.js and Animate.CSS - more fun together!
Dare!
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 tag
:
Note from Master-CSS channel subscriber:
The script tag must always be added to the end of the body. This is done to speed up the loading of the page. Every time the browser hits the script tag, the entire site will freeze loading and rendering until the script is loaded. From this we often see sites that for a long time just a white sheet. And also, if the script is placed at the end of the body, you have a guarantee that the body is ready and the script will definitely work. Thanks to Roman Belyaev for detailed explanations of connecting scripts on the site.
Step 3 You need to initialize the script by adding the following code, immediately after connecting it:
This completes the connection, and it's time for the second stage.
Using wow.js
Step 1. Select the element we want to animate and add the class="wow" class to it. In the code below, I showed this with an example picture:
Step 2 Select the animation and add it as an additional class to our dog:
Step 3 Add settings for animation if necessary, using special data-attributes:
In the code above, I specified that the animation should fire when the image passes 200 pixels from the bottom of the screen. But at the same time, it will have a delay of half a second, and the animation itself will take exactly 2 seconds in time.
WOW.js animation settings via attributes
data-wow-duration - specify the animation playback time data-wow-delay - set a delay before playing the animation data-wow-offset - turn on the animation when the element passes a certain number of pixels from the bottom of the screen data-wow-iteration - the number of animation repetitions
Please note that these attributes are optional. If you do not specify them, the animation will simply play by default as soon as the element appears on the screen when the browser window is scrolled.
Well guys. That's probably all. If you have any questions - ask in the comments;)
