해당 테마에서 다음 섹션으로 이동하는 스크롤 다운 효과
본문
적용될 사이트 : http://heyleny2024.dothome.co.kr/
적용 테마 : https://sir.kr/g5_theme/7495?page=4
주고싶은 효과 : https://www.innerviewit.com/
질문 :
안녕하세요 적용 테마에서 주고싶은 효과의 링크처럼
마우스 스크롤을 한번 내리면 뭔가 걸리는 느낌을 주면서 바로 이동하게 해주고 싶습니다!!
몇시간째 머리를 싸매고 있는데 해당 테마에서는 스크롤 다운 효과를 줄 수 없을까요ㅠ
부탁드립니다 고수님들!!
요런 느낌으로 해주면 될 것 같은데 어디에 효과를 적용 시켜주어야 할 지 감이 안잡힙니다!!
<script>
$(function() {
var divs = ["#s_1", "#s_2", "#s_3","#s_4", "#s_5", "#s_6"];
var currentDivIndex = 0;
$(window).on("mousewheel DOMMouseScroll", function(e) {
e.preventDefault();
if (e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
// 스크롤을 아래로 내릴 때
currentDivIndex = Math.min(currentDivIndex + 1, divs.length - 1);
} else {
// 스크롤을 위로 올릴 때
// currentDivIndex = Math.max(currentDivIndex - 1, 0);
return; // 위로 스크롤 시에는 아무 것도 하지 않도록 설정
}
$("html, body").animate({
scrollTop: $(divs[currentDivIndex]).offset().top
}, 600);
});
});
</script>
답변 3
전에 보던게 있는데 fullpage.js 라고 위에 내용처럼 페이지 전환 하는 스크립트 있어요 그거 참고해보세요
메인의 전체 각 섹션을 다 그런식으로 주고 싶으시면 swiper를 사용하면 간단히 되는데,
사용하실 수 있으시면 참고하세여~
