상단 로고

라이브러리 없이 자바 스크립트를 직접 적용하여 

스크롤 다운 애니메이션을 구현하는 방법입니다.

별모아 홈페이지 메인화면 하단의 퀵메뉴 영역 좌측에 있는

6개의 퀵 메뉴의 스크롤 다운 애니메이션 소스입니다.

스크롤을 내리면 좌측에서 우측으로 나타나며

스크롤을 올리면 다시 좌측으로 사라지는 애니메이션입니다.

-----------------------------------------------------------------------------------------------------------

1. <!--@js(/js/main.js)--> 경로의 파일을 생성하여 아래 소스를 복사하여 붙여넣기합니다.

아래 빨간색 부분을 해당 영역의 아이디명, 혹은 클래스명으로 수정해주시면 됩니다.

녹색은 해당 요소가 나타나는 스크롤의 위치를 말합니다. 원하시는 숫자로 수정해주세요.

let mainText = document.querySelector("#q_menu");

window.addEventListener('scroll', function ( ){

  let value = window.scrollY;

  console.log("scrollY", value);

if (value<1400) {

    mainText.style.animation="disappear 1s ease-out forwards";

  } else {

    mainText.style.animation="slide 1s ease-out";

}

});

2.  라이브러리를 사용할 경우에는 CSS 소스는 손 댈 필요없이 HTML 소스에만 간단하게 코드를 사용하면 되지만

라이브러리없이 직접 CSS 를 적용할 경우, 아래 CSS 소스의 빨간색 부분처럼 

애니메이션 소스와 키프레임 소스를 추가해주시면 됩니다.

/* 메인 퀵 메뉴 */

    #main_quick_menu { position:relative; max-width:100%; height:auto; 

    background:url("/web/upload/byulmoa81/images/bg_quick_menu.jpg"); }

#q_menu { position:absolute; top:0px; left:0px; animation: slide 1.5s ease-out; animation-delay:5s; }

/* 스크롤 내리면 메인 퀵 메뉴 나타나는 애니메이션 */

@keyframes slide {

from { left:-100px; opacity:0; }

to { left:0px; opacity:1; }

}

/* 스크롤 올리면 메인 퀵 메뉴 사라지는 애니메이션 */

@keyframes disappear { 

from { left:0px; opacity:1; }

to { left:-100px; opacity:0; }

}

-----------------------------------------------------------------------------------------------------------------------------------------

아래는 참고사항입니다.

퀵 메뉴 각각에 마우스를 올리면 우측으로 살짝 움직이는 애니메이션 소스는 아래와 같습니다.

/* 퀵 메뉴 마우스 오버 애니메이션 */

#q_menu li { -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    -o-transition: all .3s ease; }

#q_menu li:hover { margin-left:15px; opacity:0.5; }