Scroll Down Animation

Developer
Rostislav Ugrynyuk
Size
1,857 Kb
Views
10,120
  1. Scroll Down Animation Previews
  2. Scroll Down Animation HTML Codes
  3. Scroll Down Animation CSS Codes

How do I make an scroll down animation?

A simple and efficient UX animation to scroll down from http://lamoulade.comForked from Adrien Pierre's Pen Scroll Down Animation.. What is a scroll down animation? How do you make a scroll down animation? This script and codes were developed by Rostislav Ugrynyuk on 26 December 2022, Monday.

Scroll Down Animation Previews
IQ Test

Scroll Down Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Down Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div>
</body>
</html>

Scroll Down Animation - Script Codes CSS Codes

@-webkit-keyframes circleBounce { 0% {-webkit-transform: scale(0.9); opacity: 0;} 20% {opacity: 0.5;} 50% {opacity: 1;} 80% {opacity: 0.5;} 100% {-webkit-transform: scale(1.1); opacity:0;}
}
div { position: relative; top: 50px; left: calc(50% - 3px); width: 6px; height: 6px; border: 3px solid red; border-top: none; border-left: none; cursor:pointer; -webkit-transform: rotate(45deg); -webkit-transform-origin: 50% 50%;
}
div:after { content: ""; display: block; position: absolute; top: calc(50% - 23px); /*circle = 1+50+1 = 52px*/ left: calc(50% - 23px); /*arrow = 3+3 = 6px*/ width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.8); border: 1px solid red; border-radius: 50%; -webkit-animation: circleBounce 1.2s linear infinite;
}
div:hover:after { background-color: rgba(255,0,0,.15);
}
Scroll Down Animation - Script Codes
Scroll Down Animation - Script Codes
Home Page Home
Developer Rostislav Ugrynyuk
Username ugross
Uploaded December 26, 2022
Rating 3
Size 1,857 Kb
Views 10,120
Do you need developer help for Scroll Down Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rostislav Ugrynyuk (ugross) Script Codes
Name
A Pen by Rostislav Ugrynyuk
Pomodoro Timer
Simple CSS Pricing Table
Simple article cards
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!