Hey Guys, Welcome To Our Blog, In Today's Blog We Are Going To See How To Create An Scroll Arrow Animation Using HTML and CSS Code. A Scroll Arrow is used to scroll across the website and helped to get to a particular section of a webpage by clicking on the arrow itself. Here we have created it with the help of HTML & CSS and made some animations on it.
So, Let's Begin Our Scroll Arrow Project By Adding The Source Codes. For That, First, We Are Using The Html Code.
Html Code For Scroll Arrow Animation
<div class="scroll-prompt" scroll-prompt="" ng-show="showPrompt" style="opacity: 1;">
<div class="scroll-prompt-arrow-container">
<div class="scroll-prompt-arrow"><div></div></div>
<div class="scroll-prompt-arrow"><div></div></div>
</div>
</div>
First We have created an div class with a class name and adding the style of opacity property. Then again we creating an div class inside of another div class with different class name.
Now We added the div class for arrow representation which can be done with CSS by calling those of it. Lastly we close all the div tags. So out HTML code is over , It's time to move onto CSS for making scroll arrows with animation on it.
CSS CODE For Scroll Arrow Animation
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: black;
}
.scroll-prompt {
position: fixed;
z-index: 998;
bottom: -80px;
left: 50%;
margin-left: -80px;
width: 160px;
height: 160px;
.scroll-prompt-arrow-container {
position: absolute;
top: 0;
left: 50%;
margin-left: -18px;
animation-name: bounce;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.scroll-prompt-arrow {
animation-name: opacity;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.scroll-prompt-arrow:last-child {
animation-direction: reverse;
margin-top: -6px;
}
.scroll-prompt-arrow > div {
width: 36px;
height: 36px;
border-right: 8px solid #bebebe;
border-bottom: 8px solid #bebebe;
transform: rotate(45deg) translateZ(1px);
}
}
@keyframes opacity {
0% {
opacity: 0;
}
10% {
opacity: 0.1;
}
20% {
opacity: 0.2;
}
30% {
opacity: 0.3;
}
40% {
opacity: 0.4;
}
50% {
opacity: 0.5;
}
60% {
opacity: 0.6;
}
70% {
opacity: 0.7;
}
80% {
opacity: 0.8;
}
90% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
@keyframes bounce {
0% {
transform: translateY(0);
}
10% {
transform: translateY(3px);
}
20% {
transform: translateY(6px);
}
30% {
transform: translateY(9px);
}
40% {
transform: translateY(12px);
}
50% {
transform: translateY(15px);
}
60% {
transform: translateY(18px);
}
70% {
transform: translateY(21px);
}
80% {
transform: translateY(24px);
}
90% {
transform: translateY(27px);
}
100% {
transform: translateY(30px);
}
}
In the First Part of CSS , we are adding the Box model properties with the required CSS properties of Box model.
In the Second Part Of CSS, We fixed out thee background color using body section and calling out the first div class name and adding the properties on it. The properties were width , height , top , bottom , left, position and z-index. Which will make the arrow to the required alignment and fixed with the correct position.
In the Third Part of CSS, Now We calling out Second div class and adding the same alignment properties but additionally we are adding the animations like animation name , animation duration and animation iteration count.
So the Code for the above steps of explanation were given down below.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: black;
}
.scroll-prompt {
position: fixed;
z-index: 998;
bottom: -80px;
left: 50%;
margin-left: -80px;
width: 160px;
height: 160px;
.scroll-prompt-arrow-container {
position: absolute;
top: 0;
left: 50%;
margin-left: -18px;
animation-name: bounce;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
In the Fourth Part Of CSS , We are calling the div class (scroll-prompt-arrow) to start making the scroll arrow and for that we were adding the same animation properties on it and then using last child property we were fixing margin top and animation direction for the scroll arrow.
For the arrow line to be represented we are adding the width , height , border , and transformation property for making arrow to animate in required direction.
.scroll-prompt-arrow {
animation-name: opacity;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.scroll-prompt-arrow:last-child {
animation-direction: reverse;
margin-top: -6px;
}
.scroll-prompt-arrow > div {
width: 36px;
height: 36px;
border-right: 8px solid #bebebe;
border-bottom: 8px solid #bebebe;
transform: rotate(45deg) translateZ(1px);
}
}
In this Step Of CSS , We just adding the animation core which means on starting the position the changes of arrow will be held. and for that we calling out keyframes with animation name and here the animation is based on opacity.
@keyframes opacity {
0% {
opacity: 0;
}
10% {
opacity: 0.1;
}
20% {
opacity: 0.2;
}
30% {
opacity: 0.3;
}
40% {
opacity: 0.4;
}
50% {
opacity: 0.5;
}
60% {
opacity: 0.6;
}
70% {
opacity: 0.7;
}
80% {
opacity: 0.8;
}
90% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
Now The Last Step Of CSS Involves on adding another animation which is making the arrow to move in a particular direction and for that we adding the transform and translate properties. Here the animation name would be change.
@keyframes bounce {
0% {
transform: translateY(0);
}
10% {
transform: translateY(3px);
}
20% {
transform: translateY(6px);
}
30% {
transform: translateY(9px);
}
40% {
transform: translateY(12px);
}
50% {
transform: translateY(15px);
}
60% {
transform: translateY(18px);
}
70% {
transform: translateY(21px);
}
80% {
transform: translateY(24px);
}
90% {
transform: translateY(27px);
}
100% {
transform: translateY(30px);
}
}
Now The CSS code is Done Successfully and Hence we can move on to the Output Section for the Scroll Arrow Animation.
Now We have Successfully created our Scroll Arrow Animation Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
REFER CODE - Chris Schmieder
WRITTEN BY - Ragunathan S
Top comments (0)