디자인천일공책

Html＆JQuery 스크롤 애니메이션(scroll animation)

페이지 정보

작성자 디자인천일 작성일Date: 2025-07-11 20:16 조회view: 4

본문

스크롤 애니메이션(scroll animation)


css

.viz .scroll {display:block;position:absolute;right:40px;bottom:40px;color:#fff;font-size:10px;text-align:center;z-index:3;}
.viz .scroll div {width:16px;margin:0 auto 8px auto;}

.arrows {display:block;width:10px;height:10px;margin:0 0 2px 2px;border-right:solid 2px #fff;border-bottom:solid 2px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.arrows1, .arrows2, .arrows3 {
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
animation: mouse-scroll 1s infinite;
}

.arrows1 {
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
  
animation-direction: alternate;
animation-delay: alternate;
}

.arrows2 {
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
  
animation-delay: .2s;
animation-direction: alternate;
  
margin-top: -6px;
}

.arrows3 {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
  
animation-delay: .3s;
animation-direction: alternate;
  
margin-top: -6px;
}

@-moz-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-o-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {
0% { opacity: 0;}
50% { opacity: .5;}
100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}

html

<section class="sec viz">
<div class="scroll">
	<div>
		<span class="arrows arrows1"></span>
		<span class="arrows arrows2"></span>
		<span class="arrows arrows3"></span>
	</div>
	Scroll Down
</div>

</section>