해당 테마에서 다음 섹션으로 이동하는 스크롤 다운 효과

해당 테마에서 다음 섹션으로 이동하는 스크롤 다운 효과

QA

해당 테마에서 다음 섹션으로 이동하는 스크롤 다운 효과

답변 3

본문

적용될 사이트 : 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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,087
© SIRSOFT
현재 페이지 제일 처음으로