How to add a Sticky top page loading progress bar using JS and CSS

Hello everyone, Welcome here, scroll reveal animation is nowadays popular, Nowadays we can see this on several landing page websites and some blogs. You might be finding a solution for implementing scroll reveal animation in your website and I found a method to implement scroll reveal animation in your website, So today I am going to share that method with you.

Here is a demo of the scroll reveal animation:-

On this website, we can see animation while scrolling, so without wasting much time let's check how to implement it.

How to add a scroll reveal animation to a website?

• First of all, open the index.html file of your website


• Then find the </head> section and paste the following code just above it



<script src="https://unpkg.com/scrollreveal"></script>



• Then find the </body> section and paste the following JS just above it

<script>ScrollReveal({reset: false,distance: '40px',duration: 2500,delay: 400});</script>

If you want to hide before viewed element after scrolling down then replace false with true and replace 40px according to your website design.

Then select any of the scripts that you like from below and paste it just above the </body> tag.

Float animation

<script>ScrollReveal().reveal('.your_class_here', { delay: 500});</script>

Float from the left animation

<script>ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});</script>

Float from the right animation

<script>ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'right'});</script>

To add scroll reveal animation to more elements

Choose a style from the above list and paste it as given below

<script>ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});</script>

Don't forget to replace your_class_here with your element class name.

After following every step save your HTML file

---

How to add a scroll reveal animation to a Blogger website?

• First of all, go to your Blogger dashboard
• Then click the Theme option from the sidebar
• Then click on the drop-down icon near Customize option
• Then click on the Edit HTML option from the drop-down menu


• Then find the </head> section and paste the following code just above it



<script src='https://unpkg.com/scrollreveal'/>



• Then find the </body> section and paste the following JS just above it

<script>/*<![CDATA[*/ScrollReveal({reset: false,distance: '40px',duration: 2500,delay: 400});/*]]>*/</script>

If you want to hide before viewed element after scrolling down then replace false with true and replace 40px according to your Blogger template.

Then select any of the scripts that you like from below and paste it just above the </body> tag.

Float animation

<script>/*<![CDATA[*/ScrollReveal().reveal('.your_class_here', { delay: 500});/*]]>*/</script>

Float from the left animation

<script>/*<![CDATA[*/ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});/*]]>*/</script>

Float from the right animation

<script>/*<![CDATA[*/ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'right'});/*]]>*/</script>

To add scroll reveal animation to more elements

Choose a style from the above list and paste it as given below

<script>/*<![CDATA[*/ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});ScrollReveal().reveal('.your_class_here', { delay: 500,origin:'left'});/*]]>*/</script>

Don't forget to replace your_class_here with your element class name.

After following every step click on the save icon to save HTML.

Conclusion

Hope this tutorial will help you implement scroll reveal animation on your website, If you have any doubts related to this tutorial ask me in the comment. Don't forget to share this tutorial with your friends may be it useful to them. Thanks for visiting, Have a nice day!