Plugin Description: Aos.js is an awesome page scrolling element animated jquery Animation Library plugin. The animation library provides 28 different elements to animate when the page scrolls, as well as a variety of easing effects. When the page scrolls back, the element reverts to its original state.
Brief tutorials
Aos.js is an awesome page scrolling element animated jquery Animation Library plugin. The animation library provides 28 different elements to animate when the page scrolls, as well as a variety of easing effects. When the page scrolls back, the element reverts to its original state.
650) this.width=650; "class=" AlignCenter size-full wp-image-1291 "src=" http://www.aliyue.net/wp-content/uploads/ 2017/04/aos.png "alt=" AOS "width=" 620 "height=" "style=" height:auto;vertical-align:middle;border:0px;text-align : center;margin:0px auto; "/>
aos.js Download Case Demo
Installation
The AOS animation library plugin can be installed via bower.
Bower Install AOS--save
How to use
Introduction of AOS.CSS files in the page, jquery and aos.js files
<link rel= "stylesheet" href= "Dist/aos.css"/> <script src= "js/jquery.min.js" ></script> <script Src= "Dist/aos.js" ></script>
HTML structure
To use the AOS animation library, all you need to do is add the AOS attribute on the element that needs to be animated, for example:
<div aos= "Animation_name" >
The AOS script will trigger the corresponding animation on that element when the page scrolls.
You can also add some of the following properties on the element:
Property |
Property |
Property |
Default value |
Aos-offset |
Whether to trigger an animation immediately or after a specified time |
200 |
120 |
Aos-duration |
Animation duration |
600 |
400 |
Aos-easing |
Easing animation effects of animations |
Ease-in-sine |
Ease |
Aos-delay |
Delay Time of animation |
300 |
0 |
Aos-anchor |
Anchor element. Use its offset to replace the offset of the actual element to trigger the animation |
#selector |
Null |
Aos-anchor-placement |
Anchor position, where the element is positioned on the screen when the animation is triggered |
Top-center |
Top-bottom |
Aos-once |
Whether the animation fires only once, or if each scroll up or down will trigger |
True |
False |
Note that the Aos-duration animation duration ranges from 50-3000 milliseconds, and if you want to set a larger value, you can add the following CSS code to the page:
body[aos-duration= ' 4000 ' [AOS], [aos][aos][aos-duration= ' 4000 ']{transition-duration:4000ms;}
The above code modifies the duration of the animation to 4000 milliseconds.
Example code:
<div aos= "fade-zoom-in" aos-offset= "$" aos-easing= "Ease-in-sine" aos-duration= "> <div aos=" Flip-left " Aos-delay= "aos-anchor=". Example-selector "> <div aos=" fade-up "aos-anchor-placement=" Top-center ">
If you are concerned about the HTML5 checksum, you can add a data-prefix to the above attribute.
<div data-aos= "Animation_name" data-aos-offset= "data-aos-easing=" >
Global configuration
If you don't want to animate each element individually, you can use the Init () method to configure the animation of all elements uniformly.
Aos.init ({offset:200, duration:600, easing: ' Ease-in-sine ', delay:100,});
Additional configuration
The AOS provides 2 additional configuration methods that can only be used at initialization time.
configuration |
description |
example value |
default |
disable |
aos disabled conditions |
mobile |
false |
startevent |
aos the initialized event name |
exampleevent |
domcontentloaded |
To disable AOS:
If you disable AOS in a small-screen device, you can:
Aos.init ({disable: ' mobile '});
You can pass in 3 types of devices: mobile, phone, or tablet.
You can also set your own disabling conditions, such as disabling the AOS when the screen is less than 1024 pixels:
Disable:window.innerWidth < 1024
or pass in a function that returns TRUE or false.
Disable:function () {var maxWidth = 1024; return window.innerwidth < MaxWidth;}
To start an animated event:
If you do not want the scrolling animation to start after the page loads (domcontentloaded), you can use Startevent to set your own events, and the AOS listens on the document for this event:
Aos.init ({startevent: ' somecoolevent '});
Api
There are 2 methods available for the AOS object:
Aos.refresh ();
The above code recalculates the position and offset of the element.
Animation and Anchor position
Animation
Fade Animation:
Fade-up
Fade-down
Fade-left
Fade-right
Fade-up-right
Fade-up-left
Fade-down-right
Fade-down-left
Flip Animation:
Flip-up
Flip-down
Flip-left
Flip-right
Slide Animation:
Slide-up
Slide-down
Slide-left
Slide-right
To scale an animation:
Zoom-in
Zoom-in-up
Zoom-in-down
Zoom-in-left
Zoom-in-right
Zoom-out
Zoom-out-up
Zoom-out-down
Zoom-out-left
Zoom-out-right
Anchor position
Top-bottom
Top-center
Top-top
Center-bottom
Center-center
Center-top
Bottom-bottom
Bottom-center
Bottom-top
Easing animation
You can use some of the following easing animation effects:
Linear
Ease
Ease-in
Ease-out
Ease-in-out
Ease-in-back
Ease-out-back
Ease-in-out-back
Ease-in-sine
Ease-out-sine
Ease-in-out-sine
Ease-in-quad
Ease-out-quad
Ease-in-out-quad
Ease-in-cubic
Ease-out-cubic
Ease-in-out-cubic
Ease-in-quart
Ease-out-quart
Ease-in-out-quart
This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1918728
Aos.js page scrolling element animation jquery Animation Library