Flash Down

Animated flash / scroll down hints in both light and dark colors.


Scroll Top

Include a scroll to top button inside your pages to help user bad to header of page with one click.

Add following code to your page, maybe after your footer:

<button class="btn btn-circle btn-primary scroll-top"><i class="fa fa-angle-up"></i></button>

Scroll To Section

Send your visitors to a specific section by clicking a button

For this purpose, you need to add an ID attribute to your target element, probably your <section>. Then, use that ID in value of href attribute of your <a> tag. For example, you have a demo section with following code:

<section class="section" id="section-demo"></section>

To scroll to the demo section, you need a link tag with href="#section-demo", so it can scroll to the target element upon click. A sample button is as follow:

<a class="btn btn-primary" href="#section-demo">See demos</a>

Move to flash downs


Animate On Scroll

Small library to animate elements on your page as you scroll.

Official Website

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.

All you have to do is to add data-aos attribute to html element, like so:

<div data-aos="animation_name">

Also, you can set other options such as duration, delay and offset:

<div data-aos-duration="1300" data-aos-delay="500" data-aos-offset="200">

To see the list of available animations, visit the oficial documentation.

It's recommended to add class .overflow-hidden to each section that contains animation, so you can be sure that your animated objects don't display outside of the section.