WebTec
WebTec
Learn everything about Webdevelopment
Home
Social Media
About
Scroll Down Animation| Using HTML, CSS and JavaScript
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Scrolldown Animation</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet"> </head> <body> <div class="scroll"> <p>scroll</p> <div class="scrolldown"></div> </div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } .scroll { position: absolute; width: 30px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .scroll p { transform: rotate(-90deg); font-family: 'Nanum Myeongjo', serif; margin-right: 2px; } .scrolldown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 70px; background: black; animation: animate 2s linear infinite; } @keyframes animate { 0% { transform-origin: top; transform: scaleY(0); } 100% { transform-origin: top; transform: scaleY(1); } }
Back
Video
Back
Video