반응형
#1 기능 설명
마우스 휠을 스크롤하면 해당 위치까지 부드럽게 애니메이션처럼 스크롤되는 효과.
전체 화면을 페이지 넘기듯 전환하는 방식으로 웹페이지에서 자주 사용되었던 지금은 유행이 살짝 지난 효과.
#2 적용 및 사용방법 (샘플)
1. jQuery 연결하기
jQuery를 사용하므로 jQuery 연결은 필수.
2. HTML 샘플
<body>
<header>
<div id="header_title">
<h1>한국</h1>
</div>
<nav id="header_gnb">
<ul>
<li><a href="#section_so">서울</a></li>
<li><a href="#section_dj">대전</a></li>
<li><a href="#section_dg">대구</a></li>
<li><a href="#section_bu">부산</a></li>
</ul>
</nav>
</header>
<!-- <div id="fullpage" class="contents"> -->
<section id="section_so" class="location"><h2>서울</h2></section>
<section id="section_dj" class="location"><h2>대전</h2></section>
<section id="section_dg" class="location"><h2>대구</h2></section>
<section id="section_bu" class="location"><h2>부산</h2></section>
<!-- </div> -->
<footer>
<a href="http://bicute.net">bicute.net</a>
</footer>
</body>전체적인 내용은 중요하지 않지만 이 글에선 16~19라인의 section을 전체 화면으로 스크롤되게 할 것이며, 모두 동일한 location이라는 클래스를 주었습니다.
위아래 주석처리가 되어있는 div는 일반적으로 이 부분을 따로 그룹을 지어주겠지만, 이 스크롤 기능을 이용하게 되면 해당 영역(div) 내에서만 움직이기 때문에 위와 같이 nav나 footer 가 추가로 있을 경우 해당 위치로 이동을 할 수 없게 됩니다.
그것을 방지하기 위해서 section을 담고 있는 div를 제거합니다.
3. CSS 샘플
* { margin: 0 auto; color: black; }
a { text-decoration: none; }
h2 { font-size: 96px; color: white; }
#header_title { text-align: center; height: 48px; margin: 6px; }
header nav { background: #ff9100; }
#header_gnb ul { display: flex; width: 80%; text-align: center;
justify-content: space-around; align-items: center; height: 48px; }
li { width: 25%; list-style: none; padding: 10px 30px; }
section {
width: 100%;
height: 100vh;
position: relative;
}
section h2 {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#section_so { background: yellow; }
#section_dj { background: green; }
#section_dg { background: blue; }
#section_bu { background: gray; }이건 샘플이니 크게 중요한건 없고, 그냥 각 section들이 전체 화면을 차지하고 있다 정도.
4. JS 샘플
window.onload = function () {
var elm = ".location"; // 제어하고자 하는 해당하는 클래스명을 지정
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().top;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().top;
}catch(e){}
}
}
// 화면 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 1600, complete: function () {
}
});
});
});
}2번째 줄에 elm 값을 자신에게 맞춰 해당 요소를 입력해주면 됩니다.
#3 잡담
위의 HTML과 같은 형식으로 링크와 스크롤 모두 사용하게 된다면,
[jQuery] 앵커 태그 이동 시 부드러운 스크롤 효과를 함께 사용하여 마우스 휠과 앵커 태그 모두에게 스크롤 효과를 줄 수 있습니다.
반응형