상 하로 움직이는 스크롤다운 애니메이션

---

▒ 상 하로 움직이는 스크롤다운 애니메이션

요즘 웹사이트에서 흔히 볼 수 있으며, 간단한 css로 만들 수 있다.

 

 

 

 

 

- 사용 방법

<style>
    div.scroll_icon {
      position:absolute; <!-- 레이어 위에 띄우기 위해서-->
      z-index:9999;
      margin:0 auto;
      text-align:center;
      width:100%; 
      bottom:100px; <!-- 바닥에서 부터 위치 반대로 top으로도 조정가능 --> 
    }
    p.scroll_down {
       position: relative;
       animation-name: scroll_down; <!--애니메이션 이름지정-->
       animation-duration: 3s; <!--애니메이션 시간(시간이 늘어나면 더 느리게)-->
       animation-iteration-count: infinite; <!--애니메이션 반복-->
     }

     @keyframes scroll_down { <!--위에서 지정한 애니메이션 이름과 동일해야 함-->
      0%   {top:0px;}  <!--처음 시작지점-->
      50%  {top:20px;} <!--중간 지점-->
      100% {top:0px;}  <!--끝 지점-->
    }
</style>



<!--스크롤다운-->
  <div class="scroll_icon">
      <p class="scroll_down"><img src="scroll_down.png" alt="스크롤아이콘"></p>
  </div>

 

---

| 예제소스

soharu_hc_1.html

0.00MB