bS Animate On Scroll

5 Comments on “bS Animate On Scroll”

• 

  Cli

  says:

  11. June 2021 at 8:05

  Hello, What tool was used to design And development your homepage（https://bootscore.me/）, thank you

• 

  Basti

  says:

  11. June 2021 at 8:54

  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:

  11. October 2021 at 11:03

  Hi,

  What additional CSS please? imgages cover text on mobile.

  thanks,

  Andrew

• 

  Basti

  says:

  11. October 2021 at 11:41

  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:

  11. October 2021 at 12:05

  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;
  }