jquery scroll event 순수제작

2022. 11. 3. 11:48

1. 문제 설명

작업을 하다 보면 가끔 플러그인이 과하다고 생각하고

그냥 javascript 혹은 jquery로만 스크롤 이벤트를 만들고 싶을 때가 있습니다.

그럴 때를 위해 간소하게 jquery로 만들어 논 걸 올려 놉니다.

2. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 500px;
        margin:0 auto;
        margin-top:100px;
    }
    .color1 {
        background-color: aqua;
    }

    .color2 {
        background-color: rgb(110, 188, 36);
    }

    .color3 {
        background-color: rgb(115, 84, 45);
    }

    .color4 {
        background-color: rgb(114, 54, 134);
    }
</style>
<body>
    <div class="box color1"></div>
    <div class="box color2"></div>
    <div class="box color3"></div>
    <div class="box color4"></div>
</body>
</html>

3. CSS

.dir_top {
	position: relative;
	top: 50px;
}

.dir_bottom {
	position: relative;
	top: -50px;
}

.dir_left {
	position: relative;
	left: 50px;
}

.dir_right {
	position: relative;
	left: -50px;
}

.dir_bottom.sc-event,
.dir_top.sc-event,
.dir_left.sc-event,
.dir_right.sc-event {
	top: 0px;
	left: 0px;
	transition: all 1s ease;
}

.delay03 {
	transition-delay: .3s !important;
}

.delay05 {
	transition-delay: .5s !important;
}

.delay06 {
	transition-delay: .6s !important;
}

.delay1 {
	transition-delay: 1s !important;
}

.delay13 {
	transition-delay: 1.3s !important;
}

.delay15 {
	transition-delay: 1.5s !important;
}

.opacity {
	opacity: 0;
	transition: all 2s ease;
}

.opacity_slow {
	transform: scale(0.8);
	opacity: 0;
	transition: all 4s ease;
}

.opacity_slow02 {
	transform: scale(0.8);
	transition: all 0.8s ease;
}

.opacity_slow03 {
	transform: scale(0.8);
	transition: all 1s ease;
}

.opacity.sc-event {
	opacity: 1;
}

.opacity_slow.sc-event,
.opacity_slow02.sc-event,
.opacity_slow03.sc-event {
	transform: scale(1.0);
	opacity: 1;
}

4. JS

$(function () {
    var scrollobj = ".scale_down, .opacity, .opacity_slow, .dir_top, .dir_bottom, .dir_left, .dir_right";
    var active_once = true;
    function scrollContainer() {
        var scrollPos = $(document).scrollTop();
        var activePoint = parseInt($(window).height() - $(window).height() / 3.5);
        var removePoint = parseInt(0);
        $(scrollobj).each(function (e) {
            var currLink = $(this)
            if (currLink.offset().top - activePoint <= scrollPos && currLink.offset().top + currLink.height() > scrollPos + removePoint) {
                currLink.addClass("sc-event");
            } else {
                if (active_once == false) {
                    currLink.removeClass("sc-event");
                }
            }
        });
        // scrollpos();
    }
    $(window).bind("scroll", function () {
        scrollContainer();
    });
    scrollContainer();
});

5. 종합

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 500px;
        margin:0 auto;
        margin-top:100px;
    }

    .color1 {
        background-color: aqua;
    }

    .color2 {
        background-color: rgb(110, 188, 36);
    }

    .color3 {
        background-color: rgb(115, 84, 45);
    }

    .color4 {
        background-color: rgb(114, 54, 134);
    }

    .dir_top {
        position: relative;
        top: 50px;
    }

    .dir_bottom {
        position: relative;
        top: -50px;
    }

    .dir_left {
        position: relative;
        left: 50px;
    }

    .dir_right {
        position: relative;
        left: -50px;
    }

    .dir_bottom.sc-event,
    .dir_top.sc-event,
    .dir_left.sc-event,
    .dir_right.sc-event {
        top: 0px;
        left: 0px;
        transition: all 1s ease;
    }

    .delay03 {
        transition-delay: .3s !important;
    }

    .delay05 {
        transition-delay: .5s !important;
    }

    .delay06 {
        transition-delay: .6s !important;
    }

    .delay1 {
        transition-delay: 1s !important;
    }

    .delay13 {
        transition-delay: 1.3s !important;
    }

    .delay15 {
        transition-delay: 1.5s !important;
    }

    .opacity {
        opacity: 0;
        transition: all 2s ease;
    }

    .opacity_slow {
        transform: scale(0.8);
        opacity: 0;
        transition: all 4s ease;
    }

    .opacity_slow02 {
        transform: scale(0.8);
        transition: all 0.8s ease;
    }

    .opacity_slow03 {
        transform: scale(0.8);
        transition: all 1s ease;
    }

    .opacity.sc-event {
        opacity: 1;
    }

    .opacity_slow.sc-event,
    .opacity_slow02.sc-event,
    .opacity_slow03.sc-event {
        transform: scale(1.0);
        opacity: 1;
    }
</style>

<body>

    <div class="box color1 dir_top opacity"></div>
    <div class="box color2 dir_left opacity"></div>
    <div class="box color3 dir_right opacity"></div>
    <div class="box color4 dir_bottom opacity"></div>


    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            var scrollobj = ".scale_down, .opacity, .opacity_slow, .dir_top, .dir_bottom, .dir_left, .dir_right";
            var active_once = true;
            function scrollContainer() {
                var scrollPos = $(document).scrollTop();
                var activePoint = parseInt($(window).height() - $(window).height() / 3.5);
                var removePoint = parseInt(0);
                $(scrollobj).each(function (e) {
                    var currLink = $(this)
                    if (currLink.offset().top - activePoint <= scrollPos && currLink.offset().top + currLink.height() > scrollPos + removePoint) {
                        currLink.addClass("sc-event");
                    } else {
                        if (active_once == false) {
                            currLink.removeClass("sc-event");
                        }
                    }
                });
                // scrollpos();
            }
            $(window).bind("scroll", function () {
                scrollContainer();
            });
            scrollContainer();
        });
    </script>
</body>

</html>

간단한 사용법은 사용할 css를 만들고 위에 예시처럼

. dir_left와. dir_left.sc-event 2개를 만들고 스크롤 이벤트가 걸릴 전후의

상태 값을 저장한 후에 스크립트에 있는 var scrollobj 변수에 선언한 css를 등록하면 됩니다.

제일 심플하게 설명한 것이고

기타 조정방법은 스크립트단에 activePoint라는 부분에 3.5는 어떤 걸 의미하냐면

내가 등록한 div 혹은 element들이 브라우저에 하단 부분 35% 정도에 걸치면 이벤트가 걸리게끔

만들어져 있습니다.

위에 수치를 바꾸면 스크롤이 걸리는 높이를 조정할 수 있습니다.

6. 실행

Document

저작자표시 비영리 변경금지

'웹 개발 > 자주쓰는 코드' 카테고리의 다른 글

jquery modal popup custom1 (10)	2022.11.03
tab menu custom 심플 반응형 (1)	2022.11.03
SSL 인증서 총정리 (3)	2022.10.26
php recaptcha v3 사용법 심플적용 (8)	2022.09.15

퍼블리셔 이과장