No products in the cart.
bS5 Animate On Scroll
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 the available effects, check out the demo page. For detailed information and settings, take a look to the official documentation and read the developer’s post on css-tricks.
2 Comments on “bS5 Animate On Scroll”
Leave a Comment
You must be logged in to post a comment.
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:
<section id="plugins" class="py-5 bg-light"> <div class="container py-lg-5"> <div class="row"> <div class="col-lg-6"> <div class="h-100 d-flex align-items-center pr-xl"> <div data-aos="fade-up" class="aos-init aos-animate"> <h2 class="display-4"><i class="fas fa-plug text-secondary"></i> Plugins</h2> <div class="section-collage position-relative d-lg-none my-5"> <img class="responsive-width lg position-absolute top left shadow rounded" src="https://bootscore.me/wp-content/uploads/2021/01/contact-form-7.png" alt="Contact Form 7"> <img class="responsive-width sm position-absolute center right shadow rounded" src="https://bootscore.me/wp-content/uploads/2021/01/isotope.png" alt="Isotope"> <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" src="https://bootscore.me/wp-content/uploads/2021/01/dark-mode.png" alt="Dark Mode"> </div> <p class="lead">Extend bootScore with useful WordPress plugins, custom written for this theme. Each plugin uses Bootstrap or adds it to 3rd party plugins.</p> <p>Use Isotope to filter posts, custom post types or products. Display posts or products in a Swiper slideshow, use Bootstrap Forms and Components with Contact Form 7 or animate landing pages with Animate On Scroll library.</p> <p class="lead"><a href="https://bootscore.me/plugins/">Explore plugins »</a></p> </div> </div> </div> <div class="col-lg-6"> <div class="h-100 d-none d-lg-flex align-items-center"> <div class="section-collage position-relative w-100"> <img class="responsive-width lg position-absolute top left shadow rounded aos-init aos-animate" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://bootscore.me/wp-content/uploads/2021/01/contact-form-7.png" alt="Contact Form 7"> <img class="responsive-width sm position-absolute center right shadow rounded aos-init" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://bootscore.me/wp-content/uploads/2021/01/isotope.png" alt="Isotope"> <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1 aos-init" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://bootscore.me/wp-content/uploads/2021/01/dark-mode.png" alt="Dark Mode"> </div> </div> </div> </div> </div> </section>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.