Skip to main content

Enhance Your Bootstrap Site With AOS for Better User Interface and User Experience

Have you ever seen those long web pages where different animations are being applied as you scroll down? Scroll down and you will see the live demo right on this page.

A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, you have come to the right place.

Web design is no more limited to content and graphics. One cannot deny the role of animations and their effects on websites. I think it's about time for you to enhance and beautify your Bootstrap site for better UI/UX.

AOS is a very simple and easy to use animation library. AOS uses CSS3 animation with the combination of jquery to animate the content on the website.

How AOS Works

AOS is a CSS-driven "On Scroll" animation library. Every aspect of animation is handled by CSS.

To use animation on scroll plugin, we need to install only two files aos.css and aos.js:


<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Add the CSS in head and js before the closing body tag.

Once the two files have been installed we need to init it.


<script type="text/javascript">    
  // Init AOS
  function aos_init() {
    AOS.init({
      duration: 2000
    });
  }
  $(window).on('load', function() {
    aos_init();
  });
</script>

That is all we need to do and we are ready to animate the elements on the site. Using data-aos attribute we can design all our elements very easily.


<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div> <div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div> <div class="item" data-aos="flip-down">9</div> <div class="item" data-aos="flip-right">10</div> <div class="item" data-aos="flip-left">11</div>

The best part of the AOS is that we can animate elements while scrolling down and to up of the page as well. AOS is very easy to implement and can be customized as per the requirements.

Explore all the available animation and options on the official website - AOS - Animate On Scroll

AOS is fully open source, so if you have an interesting idea or something is not working how you'd expect open issue and see you on GitHub! Any contribution is highly appreciated.

All the best!

Custom Web Design + Copywritng + SEO

Web copy, Designs, and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Get A Free Proposal Today

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM