Animated Scroll down Button | Scroll Down Button Animation

Animated Scroll down Button | Scroll Down Button Animation

Animated Scroll down Button | Scroll Down Button Animation

Learners you must have experienced that when you visit any web-page, the content of web-page is visible to you as per you device screen width, some time you get in illusion that apart from this there is nothing more content in webpage. You don’t go after. So for resolving this illusion from your mind you have scroll down notation that we used to pointing that there is more content below please visit it. 😊 

Animated Scroll down Button | Scroll Down Button Animation

Hey learners..!

Welcome to our 🎊 today’s blog with codewithrandom  In this blog, we gonna learn how can we design animated scroll down symbol one of the bonus is our animation part that we’re going to explore it in the same blog.

I hope you must have got an idea about the project. I want to make sure about figures is in  dynamic it seems static but don’t get confused.

Let’s get started….

HTML SECTION 

Here I’m not going to add a structure of the HTML file from scratch, I have just added one div with class circle and arrow symbol within as favicon. At the top we have one h1.

Go through the below code 👇 and run in your IDE or where you used to design just HTML without CSS styling.

<h1>animated Scroll Down</h1>  

 <div class="circle">  

  <i class="fa fa-chevron-down" aria-hidden="true"></i>  

  <i class="fa fa-chevron-down" aria-hidden="true"></i>  

  <i class="fa fa-chevron-down" aria-hidden="true"></i>  

 </div>

CSS SECTION 

 In css part we haven’t not much things as you can look by below we have just added background color to the body and text-align center as for our heading.


Div with class circle we will make it in center.

Now for each arrow as selector of nth child we have added some animation as flashing.
It will come in fade and become dark at button.

The Below code will analyse you more👇. So just add in your HTML half complete file and wait to watch some magic.

 * {  

      margin: 0;  

      padding: 0;  

      box-sizing: border-box;  

 }  

 body {  

      background: violet;  

      color: white;  

      text-align: center;  

 }  

 h1{  

      margin-top:70px;  

      text-transform:capitalize;  

      font-family:verdana  

 }  

 .circle {  

      position: absolute;  

      top: 50%;  

      left: 50%;  

      transform: translate(-50%, -50%);  

      display: flex;  

      flex-direction: column;  

 }  

 .circle i {  

      margin: -7px;  

      font-size: 30px;  

      animation: flashing 1s ease infinite alternate;  

 }  

 .circle i:nth-child(2) {  

      animation-delay: 0.3s;  

 }  

 .circle i:last-child {  

      animation-delay: 0.6s;  

 }  

 @keyframes flashing {  

      0% {  

           opacity: 1;  

      }  

      100% {  

           opacity: 0.1;  

      }  

 }

If you want a live preview of your project that you have designed till now 😀. Have look below👇

See the Pen Scroll Down by Hakkam Abdullah (@Moslim) on CodePen.


By this blog… We have learned how we can design Animated Scroll down button.

Now I’m looking for your reviews.
So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

Code by Moslim



Leave a Reply