How To Add Scroll Effects In Your Website
In this article we will discuss about how to add scroll effects in your website.
If You have designed a website or a portfolio for yourself and you are willing to give scroll effects like fade in or fade out kind of stuff then you are at the right place, we will be dicsussing about how to add scroll effects in your website.
First of all click on this link and visit this website:
In this website you must have seen a lot of effects like fade,flip,zoom,etc. Okay now scroll down to that website and you will see something written like this:
CDN Sources
CSS
<link href=”https://unpkg.com/aos@2.3.1/dist/aos.css" rel=”stylesheet”>
JS
<script src=”https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Initialize AOS
<script> AOS.init(); </script>
You need to add the CSS link at the top of your HTML file means at the header.
Then you need to add the JS link at the extreme bottom, means where your code ends and just below it you need to add the AOS script tag.
After adding all this at each section of your code you need to add an extra <div></div> like this:
<div data-aos=”fade-down” data-aos-duration=”1000">
<div class=”d-flex flex-wrap align-items-center”>
<div class=”bgimage”></div>
<div class=”col-md-5">
<h1 style=”color:orangered”>Stay in.<span style=”color: orchid; font-size:30px;”>Stay Safe.</span></h1>
<br/>
<br/>
<p>Welcome To The World Of Health Care. Here You Can Get All The Details Related To Covid <br/> Please Don’t Forget to Wear Double Mask and carry Hand Sanitizers with you whenever you are going out. </p>
</div>
</div>
</div>
And don’t forget to add the data-aos-duration=”1000".
You can also visit the website (link mentioned above) and check out various other scroll effects and add the respective <div></div> required for that scroll effect.
So thats’s it, it was as simple as that. Now you can add any kind of scroll affects in your website.
