1
2
3
4
5
6
7

<div class="scroll_wrap">
    <div class="scroll_on">제자리에서 나타납니다.</div>
    <div class="scroll_on type_top">위에서 나타납니다.</div>
    <div class="scroll_on type_left">왼쪽에서 나타납니다.</div>
    <div class="scroll_on type_right">오른쪽에서 나타납니다.</div>
    <div class="scroll_on type_bottom">밑에서 나타납니다.</div>
</div>

1
2
3
4
5
6
7

.scroll_wrap {overflow: hidden;}
.scroll_on {padding:50px 0;font-size: 24px;font-weight:700;text-align: center;opacity: 0;transition: all 1s;}
.scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll_on.type_top {transform: translate(0, -50px);}
.scroll_on.type_bottom {transform: translate(0, 50px);}
.scroll_on.type_left {transform: translate(-50px, 0);}
.scroll_on.type_right {transform: translate(50px, 0);}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(document).ready(function() {
    // 클래스가 "scroll_on"인 모든 요소를 선택합니다.
    const $counters = $(".scroll_on");
    
    // 노출 비율(%)과 애니메이션 반복 여부(true/false)를 설정합니다.
    const exposurePercentage = 100; // ex) 스크롤 했을 때 $counters 컨텐츠가 화면에 100% 노출되면 숫자가 올라갑니다.
    const loop = true; // 애니메이션 반복 여부를 설정합니다. (true로 설정할 경우, 요소가 화면에서 사라질 때 다시 숨겨집니다.)

    // 윈도우의 스크롤 이벤트를 모니터링합니다.
    $(window).on('scroll', function() {
        // 각 "scroll_on" 클래스를 가진 요소에 대해 반복합니다.
        $counters.each(function() {
            const $el = $(this);
    
            // 요소의 위치 정보를 가져옵니다.
            const rect = $el[0].getBoundingClientRect();
            const winHeight = window.innerHeight; // 현재 브라우저 창의 높이
            const contentHeight = rect.bottom - rect.top; // 요소의 높이
            
            // 요소가 화면에 특정 비율만큼 노출될 때 처리합니다.
            if (rect.top <= winHeight - (contentHeight * exposurePercentage / 100) && rect.bottom >= (contentHeight * exposurePercentage / 100)) {
                $el.addClass('active');
            }
            // 요소가 화면에서 완전히 사라졌을 때 처리합니다.
            if (loop && (rect.bottom <= 0 || rect.top >= window.innerHeight)) {
                $el.removeClass('active');
            }
        });
    }).scroll();
});