Loading...

bS 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

  1. Download Plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
  4. 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.

5 Comments on “bS Animate On Scroll”

  • 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.

  • 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:

      <div data-aos="fade-up"></div>
      

      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:

      
      .responsive-width {
          width: 70%;
      }
      
      .responsive-width.sm {
          width: 50%;
      }
      
      .responsive-width.md {
          width: 60%;
      }
      
      .responsive-width.lg {
          width: 70%;
      }
      
      .top {
          top: 0;
      }
      
      .bottom {
          bottom: 0;
      }
      
      .left {
          left: 0;
      }
      
      .right {
          right: 0;
      }
      
      .left-2 {
          left: 2rem;
      }
      
      .center {
          top: 24%;
          /*transform: translate(0, -50%);*/
      }
      
      
      @media (min-width: 1px) and (max-width: 767px) {
          .section-collage {
              height: 300px;
          }
      }
      
      @media (min-width: 768px) and (max-width: 991px) {
          .section-collage {
              height: 565px;
          }
      }
      
      @media (min-width: 992px) and (max-width: 1199px) {
          .section-collage {
              height: 400px;
          }
      }
      
      @media (min-width: 1200px) {
          .section-collage {
              height: 500px;
          }
      }
      
      .z-1 {
          z-index: 1;
      }
      

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information