Aos.js page scrolling element animation jquery Animation Library

Source: Internet
Author: User

Aos.js page scrolling element animation jquery Animation Library

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.

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 Describe Example values Default value
Disable Conditions for AOS to be disabled Mobile False
Startevent AOS 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 = 1024x768;    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:

    • Init
    • Refresh
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

Aos.js page scrolling element animation jquery Animation Library

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.