라이브러리 없이 자바 스크립트를 직접 적용하여
스크롤 다운 애니메이션을 구현하는 방법입니다.
별모아 홈페이지 메인화면 하단의 퀵메뉴 영역 좌측에 있는
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; }
관리자에게만 댓글 작성 권한이 있습니다.