CSS Mouse Scroller
CODEPEN:
Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Mouse%20Scroll
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="mouseScroller.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div id="container">
<div id="scroll-down">
<div id="mouse">
<div id="scroller"></div>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
body{
background: #262626;
}
#container{
display:flex;
align-content:center;
}
#scroll-down{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:auto;
}
#mouse {
width: 20px;
height: 100px;
padding: 150px 100px;
border: 10px solid #ff6a00;
border-radius:120px;
}
#scroller{
width:25px;
height:50px;
background:#ff6a00;
border-radius:20px;
opacity:0.9;
animation:ani 1s linear infinite;
animation-direction:alternate;
}
@keyframes ani{
0%{
transform: translateY(0);
}
50% {
transform: translateY(-125px);
}
100% {
opacity: 0;
transform: translateY(-125px);
}
}
Advertisements
