bS Animate On Scroll

| 11 Comments on 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

Contents

Different setting examples

Anchor placement

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>

11 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

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

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

Andrew
says:
24. November 2021 at 2:58
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:
24. November 2021 at 2:59
Outside the Section I mean?

Basti
says:
24. November 2021 at 9:54
Hi Andrew,
I do not know what you exactly mean. There is now wrapper outside the section.

Andrew
says:
24. November 2021 at 10:19
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

24. November 2021 at 10:54

This is the complete HTML:

<!-- cta -->
<section id="frontpage-cta" class="py-5 height-100 position-relative bg-light">
    <div class="container h-100">

        <div class="row h-100">

            <div class="col-lg-7 h-100">

                <div class="h-100 d-flex align-items-center">
                    <div>
                        <h1 class="display-6">Hello, I’m bootScore! <br>A powerful, free <a target="_blank" href="https://getbootstrap.com/" rel="noreferrer noopener">Bootstrap 5</a> starter theme for <a target="_blank" href="https://wordpress.org/download/" rel="noreferrer noopener">WordPress</a>.</h1>
                        <p class="lead mb-4">Flexible Bootstrap WordPress theme with full WooCommerce support, built-in Sass compiler and many ready-to-use templates.</p>
                        <div class="">
                            <a href="#theme" class="btn btn-secondary btn-lg mr-2">Learn more</a> <a href="#download" class="btn btn-primary btn-lg">Download</a>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-lg-5 position-relative">
                <div class="h-100 d-flex align-items-center justify-content-center">
                    <img class="d-none d-lg-block version-img position-absolute shrink drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/version-5.svg" alt="Version 5">
                    <img class="d-none d-lg-block bootstrap-logo position-absolute pulse-hor drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/bootstrap.svg" alt="Bootstrap Logo">
                    <img class="d-none d-lg-block wordpress-logo position-absolute pulse-vert drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/wordpress.svg" alt="WordPress Logo">
                    <img class="d-none d-lg-block drop-container-bottom position-absolute pulse-vert drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/drop.svg" alt="Drop">
                </div>
            </div>

        </div>

    </div>

    <img class="drop-top-right position-absolute pulse-vert d-none d-lg-block drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/drop.svg" alt="Drop">
    <img class="drop-bottom-left position-absolute pulse-hor d-none d-lg-block drop-shadow" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/cta/drop.svg" alt="Drop">

</section>

<!-- Theme -->
<section id="theme" class="py-5">
    <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">
                        <h2 class="display-4"><i class="fab fa-wordpress-simple text-secondary"></i> Theme</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://files.bootscore.me/media/frontpage/theme/page-full-width-image.webp" alt="Full Width Image">
                            <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" src="https://files.bootscore.me/media/frontpage/theme/category-equal-height.webp" alt="Equal Height">
                            <img class="responsive-width sm position-absolute center right shadow rounded" src="https://files.bootscore.me/media/frontpage/theme/category-default.webp" alt="Category Default">
                        </div>
                        <p class="lead">Design, develop and launch faster with Bootstrap 5, the world’s leading responsive and mobile-first front-end CSS framework and WordPress.</p>
                        <p>Use a large number of ready-to-use templates for pages, posts, categories, authors and archives as well as pre-made header templates.</p>
                        <p class="lead"><a href="https://bootscore.me/theme/">View theme templates »</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" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/theme/page-full-width-image.webp" alt="Full Width Image">
                        <img class="responsive-width sm position-absolute center right shadow rounded" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/theme/category-default.webp" alt="Category Default">
                        <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/theme/category-equal-height.webp" alt="Equal Height">
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>

<!-- Plugins -->
<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">
                        <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://files.bootscore.me/media/frontpage/plugins/bs-contactform-7.webp" alt="Contact Form 7">
                            <img class="responsive-width sm position-absolute center right shadow rounded" src="https://files.bootscore.me/media/frontpage/plugins/bs-isotope.webp" alt="Isotope">
                            <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" src="https://files.bootscore.me/media/frontpage/plugins/bs-dark-mode.webp" 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" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/plugins/bs-contactform-7.webp" alt="Contact Form 7">
                        <img class="responsive-width sm position-absolute center right shadow rounded" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/plugins/bs-isotope.webp" alt="Isotope">
                        <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/plugins/bs-dark-mode.webp" alt="Dark Mode">
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- Shop -->
<section id="shop" class="py-5">
    <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">
                        <div class="d-flex align-items-end">
                            <h2 class="display-4">Shop</h2>
                            <img class="woocommerce-logo" src="https://bootscore.me/wp-content/themes/custom-child-theme/img/shop/shop.svg" alt="WooCommerce Logo">
                        </div>

                        <div class="section-collage position-relative d-lg-none my-5">
                            <img class="responsive-width lg position-absolute top left shadow rounded" src="https://files.bootscore.me/media/frontpage/shop/checkout.webp" alt="Checkout">
                            <img class="responsive-width sm position-absolute center right shadow rounded" src="https://files.bootscore.me/media/frontpage/shop/single-product.webp" alt="Product page">
                            <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" src="https://files.bootscore.me/media/frontpage/shop/offcanvas-cart.webp" alt="Cart Offcanvas">
                        </div>

                        <p class="lead">Create <a href="https://woocommerce.com/" target="_blank" rel="noreferrer noopener">WooCommerce</a> stores with seamless Bootstrap integration and an integrated Ajax Offcanvas shopping cart.</p>

                        <p>Visit the shop, download the themes and plugins via WooCommerce. If you are planning to create an online store, you can see how the checkout works.</p>
                        <p class="lead"><a href="https://bootscore.me/shop/">Browse shop »</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" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/shop/checkout.webp" alt="Checkout">
                        <img class="responsive-width sm position-absolute center right shadow rounded" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/shop/single-product.webp" alt="Product page">
                        <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/shop/offcanvas-cart.webp" alt="Cart Offcanvas">
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Docs -->
<section id="docs" 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">
                        <h2 class="display-4"><i class="fas fa-code text-secondary"></i> Docs</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://files.bootscore.me/media/frontpage/docs/dev-console.webp" alt="Console">
                            <img class="responsive-width sm position-absolute center right shadow rounded" src="https://files.bootscore.me/media/frontpage/docs/width-and-height-classes.webp" alt="Width & Height Classes">
                            <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" src="https://files.bootscore.me/media/frontpage/docs/editor.webp" alt="Editor">
                        </div>
                        <p class="lead">bootScore is 100% customizable by use of code. Read here how to use and edit this theme.</p>
                        <p>There are no Customizer or Backend settings. Build your Bootstrap on the fly with included source and built-in scssphp compiler. Basic HTML, CSS/SCSS and maybe some PHP and JavaScript skills are required for customizing. No drag'n'drop, just simple code.</p>
                        <p class="lead">
                            <a href="https://bootscore.me/category/documentation/">Read docs »</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" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/docs/dev-console.webp" alt="Console">
                        <img class="responsive-width sm position-absolute center right shadow rounded" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/docs/width-and-height-classes.webp" alt="Width & Height Classes">
                        <img class="responsive-width md position-absolute bottom left-2 shadow rounded z-1" data-aos="zoom-in" data-aos-delay="400" data-aos-duration="600" src="https://files.bootscore.me/media/frontpage/docs/editor.webp" alt="Editor">
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- Blog -->
<section id="blog" class="py-5">

    <div class="container">
        <h2 class="display-4 text-center">Blog</h2>
        <p class="lead mb-4 text-center">Announcements and news, as well as general posts or tipps and tricks around bootScore. Want to stay up to date? Subscribe to the <a href="#newsletter">newsletter.</a></p>
        [bs-swiper-card type="post" category="blog" order="DESC" orderby="date" posts="12"]
    </div>

</section>

<!-- Download -->
<section id="download" class="py-5 bg-primary text-white">

    <div class="container">

        <h2 class="display-4">Download</h2>

        <p class="lead">Download the files via WooCommerce. By clicking the respective button, the file will be added to the shopping cart. If you are planning to create an online shop with bootScore, you can see how the checkout works.</p>

        <h3 class="mb-4">Theme</h3>

        <div class="row">

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=744" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="744" data-product_sku="BS0001" aria-label="Add “bootScore WordPress Theme” to your cart" rel="nofollow">bootScore</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2107" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2107" data-product_sku="BS0002" aria-label="Add “bootScore Child Theme” to your cart" rel="nofollow">bootScore Child</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=3793" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="3793" data-product_sku="BS0002-01" aria-label="Add “bootCommerce Child Theme” to your cart" rel="nofollow">bootCommerce Child</a>
            </div>

        </div>

        <h3 class="mb-4">Plugins</h3>

        <div class="row">

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2143" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2143" data-product_sku="BS0003" aria-label="Add “bS Animate On Scroll” to your cart" rel="nofollow">bS Animate On Scroll</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2132" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2132" data-product_sku="BS0004" aria-label="Add “bS Contact Form 7” to your cart" rel="nofollow">bS Contact Form 7</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=3855" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="3855" data-product_sku="BS0015" aria-label="Add “bS Cookie Consent” to your cart" rel="nofollow">bS Cookie Consent</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2606" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2606" data-product_sku="BS0013" aria-label="Add “bS Dark Mode” to your cart" rel="nofollow">bS Dark Mode <span class="badge bg-danger">10 €</span></a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2153" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2153" data-product_sku="BS0007" aria-label="Add “bS Post/Page Grid/List” to your cart" rel="nofollow">bS Grid</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2146" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2146" data-product_sku="BS0005" aria-label="Add “bS Gutenberg Gallery Lightbox” to your cart" rel="nofollow">bS Gutenberg Gallery Lightbox</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=4170" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="4170" data-product_sku="BS0018" aria-label="Add “bS Gutenberg Responsive Video” to your cart" rel="nofollow">bS Gutenberg Responsive Video</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2150" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2150" data-product_sku="BS0006" aria-label="Add “bS Isotope” to your cart" rel="nofollow">bS Isotope <span class="badge bg-danger">19 €</span></a>
            </div>


            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=3794" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="3794" data-product_sku="BS0014" aria-label="Add “bS Masonry” to your cart" rel="nofollow">bS Masonry</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=3863" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="3863" data-product_sku="BS0016" aria-label="Add “bS5 Preloader” to your cart" rel="nofollow">bS Preloader</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=2603" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2603" data-product_sku="BS0012" aria-label="Add “bS Share Buttons” to your cart" rel="nofollow">bS Share Buttons</a>
            </div>

            <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
                <a href="?add-to-cart=9388" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="9388" data-product_sku="BS0009-1" aria-label="Add “bS Swiper” to your cart" rel="nofollow">bS Swiper</a>
            </div>

        </div>

    </div>

</section>

And this the CSS:

/* CTA */
#frontpage-cta {
  background-image: url(../../img/cta/bottom-wave-white.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100%;
}

.dark-theme #frontpage-cta {
  background-image: url(../../img/cta/bottom-wave-dark.svg);
}

.drop-shadow {
  filter: drop-shadow(0px .5rem 1rem rgba(0, 0, 0, .15));
}

@media (max-width: 767px) {

  .drop-top-right {
    width: 23px;
    top: 100px;
    right: 30px;
  }

  .drop-bottom-left {
    bottom: 23px;
    left: 73px;
    width: 35px;
  }

}

@media (min-width: 768px) and (max-width: 991px) {

  .drop-top-right {
    top: 152px;
    right: 109px;
    width: 50px;
  }

  .drop-bottom-left {
    bottom: 45px;
    left: 145px;
    width: 40px;
  }

}

@media (min-width: 992px) and (max-width: 1199px) {

  .drop-top-right {
    top: 110px;
    right: 75px;
    width: 40px;
  }

  .drop-bottom-left {
    bottom: 36px;
    left: 99px;
    width: 40px;
  }

  .version-img {
    width: 100%;
    max-width: 380px;
  }

  .wordpress-logo {
    top: 19%;
    left: 30%;
    width: 133px;
  }

  .bootstrap-logo {
    top: 48%;
    left: 13%;
    width: 150px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {

  .version-img {
    width: 100%;
    max-width: 450px;
  }

  .wordpress-logo {
    top: 19%;
    left: 22%;
    width: 150px;
  }

  .bootstrap-logo {
    top: 48%;
    left: 13%;
    width: 190px;
  }

  .drop-top-right {
    top: 137px;
    right: 129px;
    width: 50px;

  }

  .drop-bottom-left {
    bottom: 54px;
    left: 153px;
    width: 50px;

  }
}

@media (min-width: 1400px) {
  .version-img {
    width: 100%;
    max-width: 500px;
  }

  .wordpress-logo {
    top: 19%;
    left: 26%;
    width: 170px;
  }

  .bootstrap-logo {
    top: 48%;
    left: 16%;
    width: 200px;
  }

  .drop-top-right {
    top: 165px;
    right: 213px;
    width: 64px;
  }

  .drop-bottom-left {
    bottom: 64px;
    left: 167px;
    width: 60px;

  }
}

.dark-theme #frontpage-cta {
  background-color: var(--bs-gray-dark);
}

.drop-container-bottom {
  bottom: 82px;
  width: 72px;
}

.pulse-vert {
  -webkit-animation: pulse-vert 5s infinite;
  animation: pulse-vert 5s infinite;
}

@keyframes pulse-vert {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.pulse-hor {
  -webkit-animation: pulse-hor 4.5s infinite;
  animation: pulse-hor 4.5s infinite;
}

@keyframes pulse-hor {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(0, 7px);
    transform: translate(7px, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.shrink {
  -webkit-animation: shrink 6s infinite;
  animation: shrink 6s infinite;
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

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

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

@media (max-width: 375px) {
  .woocommerce-logo {
    margin-bottom: 8px;
    width: 111px;
    margin-left: -45px;
  }
}

@media (min-width: 414px) and (max-width: 767px) {
  .woocommerce-logo {
    margin-bottom: 8px;
    width: 123px;
    margin-left: -45px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .woocommerce-logo {
    margin-bottom: 8px;
    width: 141px;
    margin-left: -45px;
  }
}

@media (min-width: 992px) {
  .woocommerce-logo {
    margin-bottom: 9px;
    width: 163px;
    margin-left: -50px;
  }
}

Andrew
says:
24. November 2021 at 10:59
Awesome, thanks a lot!

Comments are closed.

Installation

Usage

Fade

Fade up

Fade down

Fade right

Fade left

Fade up right

Fade up left

Fade down right

Fade down left

Flip

Flip left

Flip right

Flip up

Flip down

Zoom

Zoom in

Zoom in up

Zoom in down

Zoom in left

Zoom in right

Zoom out

Zoom out up

Zoom out down

Zoom out right

Zoom out left

Different setting examples

Fade up

Fade down

Fade right

Fade left

Fade zoom in

Flip left

Anchor placement

Fade up

Fade up

Fade up

Fade up

Fade up

Fade up

11 Comments on “bS Animate On Scroll”

Cli

Basti

Andrew Paterson

Basti

Basti

Andrew

Andrew

Basti

Andrew

Basti

Andrew