WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How To Create A Scroll Down Animation Icon Using CSS with SVG

So you have seen on websites that typically have a full-screen header with an indicator to scroll down to view the rest/more of the content. We’re going to show a very nice and clean way to represent this feature. In today’s tutorial, we have a scroll down icon created as an SVG using just HTML & CSS and it looks pretty awesome if we do say so ourselves.

Here is a CodePen of what we are going to be creating.

So let’s being:-

HTML


<div class="scrolldown-wrapper">
	<div class="scrolldown">
		<svg height="30" width="10">
			<circle class="scrolldown-p1" cx="5" cy="15" r="2" />
			<circle class="scrolldown-p2" cx="5" cy="15" r="2" />
		</svg>
	</div>
</div>

CSS


body {
  background: #000;
}

/* Scroll Down */

.scrolldown-wrapper {
	left: 50%;
	position: absolute;
	text-align: center;
	bottom: 0;
	transform: translate(-50%, -50%);
}
  
.scrolldown {
	border: 2px solid #FFFFFF;
	border-radius: 30px;
	height: 46px;
	margin: 0 auto 8px;
	text-align: center;
	width: 30px;
}

.scrolldown-p1,
.scrolldown-p2 {
	animation-duration: 1.5s;
	animation-name: scrolldown;
	animation-iteration-count: infinite;
	fill: #FFFFFF;
}
  
.scrolldown-p2 {
	animation-delay: .75s;
}

@keyframes scrolldown {
	0% {
		opacity: 0;
		transform: translate(0, -8px);
	}
	50% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 8px);
	}
}

If you want to adjust the positioning of the icon, simply edit the .scrolldown-wrapper class and adjust the bottom position (e.g. changing bottom: 10%; will move the icon 10% of the viewport height from the bottom).

You can also adjust the speed of the animation by adjusting either .scrolldown-p1 or .scrolldown-p2 classes.

Pretty simple and lightweight right?

Any questions feel free to drop us a comment.

We hope you’ve enjoyed today’s tutorial.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

One thought on “How To Create A Scroll Down Animation Icon Using CSS with SVG

Join the discussion