This plugin registers and initializes AOS library to WordPress. With AOS can be added nice scrolling effects to the page content. Must have for beautiful landing pages. Live preview
Also works great in category pages by inserting AOS to the card(s).
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
Usage
Insert AOS into the HTML code.
<div data-aos="fade-up"></div>
For detailed information and settings, take a look to the official documentation and read the developer’s post on css-tricks.
Fade
Fade up
<div data-aos="fade-up"></div>
Fade down
<div data-aos="fade-down"></div>
Fade right
<div data-aos="fade-right"></div>
Fade left
<div data-aos="fade-left"></div>
Fade up right
<div data-aos="fade-up-right"></div>
Fade up left
<div data-aos="fade-up-left"></div>
Fade down right
<div data-aos="fade-down-right"></div>
Fade down left
<div data-aos="fade-down-left"></div>
Flip
Flip left
<div data-aos="flip-left"></div>
Flip right
<div data-aos="flip-right"></div>
Flip up
<div data-aos="flip-up"></div>
Flip down
<div data-aos="flip-down"></div>
Zoom
Zoom in
<div data-aos="zoom-in"></div>
Zoom in up
<div data-aos="zoom-in-up"></div>
Zoom in down
<div data-aos="zoom-in-down"></div>
Zoom in left
<div data-aos="zoom-in-left"></div>
Zoom in right
<div data-aos="zoom-in-right"></div>
Zoom out
<div data-aos="zoom-out"></div>
Zoom out up
<div data-aos="zoom-out-up"></div>
Zoom out down
<div data-aos="zoom-out-down"></div>
Zoom out right
<div data-aos="zoom-out-right"></div>
Zoom out left
<div data-aos="zoom-out-left"></div>
Different setting examples
Fade up
<div data-aos="fade-up" data-aos-duration="3000"></div>
Fade down
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>
Fade right
<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>
Fade left
<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="50></div>
Fade zoom in
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>
Flip left
<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>
Anchor placement
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="center-bottom"></div>
Fade up
<div ata-aos="fade-up" data-aos-anchor-placement="bottom-bottom"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="center-center"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="bottom-center"></div>
Cli
says:Hello, What tool was used to design And development your homepage(https://bootscore.me/), thank you
Basti
says:Hello Cli,
no tool or page builder is used for that. Homepage is build by using the Blank Page Template with Gutenberg HTML Blocks, Bootstrap classes and a bit of additional CSS. AOS animations are written in the HTML.
For example, code for section plugins is this:
Paste this code in a Gutenberg Custom HTML block, choose the page template and you will have same design like here on the frontpage.
If you are not familiar to write HTML directly, you can use a page builder like Site Origin. Choose then the Blank With Container template.
Andrew Paterson
says:Hi,
What additional CSS please? imgages cover text on mobile.
thanks,
Andrew
Basti
says:Hi Andrew,
no additional CSS. Add AOS to your HTML. Example:
What do you mean with images cover text? Please post a link to your site.
Basti
says:Edit. You mean bootscore frontpage example in comment above?
Add this:
Andrew
says:Hi,
Doesn’t work for me with the above. Is there a wrapper outside the div? Images need to be a certain size? Template blank without container?
Thanks,
Andrew
Andrew
says:Outside the Section I mean?
Basti
says:Hi Andrew,
I do not know what you exactly mean. There is now wrapper outside the section.
Andrew
says:Hi,
Ok, thought might be a positioning thing.
Do the images nees to be a particular size for animation to work as it does on your home page?
Thanks
Basti
says:This is the complete HTML:
And this the CSS:
Andrew
says:Awesome, thanks a lot!