[JavaScript] IntersectionObserver 편리한 스크롤 이벤트 scroll event

500x 500px 의 4개 div 

마지막 div에 fade in scroll event 주기 

 

 

let winH = window.innerHeight;

- 윈도우의 높이 (보여지고 있는 창의 height = ex 500px;) 

 

let scrollY = window.scrollY; 

- 스크롤의 값 (스크롤이 움지이지않은 상태는 0 ) 

 

let posFromTop = item4.getBoundingClientRect().top; 

(상대좌표 값 - 스크롤을 내릴 수록 줄어듬!) 

- 현재 위치(최상단)에서 적용할div 최상단 까지의 거리 

- 현재 창의 최 상단으로부터 내가 스크롤 이벤트 주려는 div의 최상단 = 1500

 

let absolutePos = scrollY + posFromRop; 

- item 4의 절대 좌표 값  / 스크롤을 해도 변하지않는 절대 값 

 

 

scrollY + posFromTop = absolutePos 

 

 

 

---

 

 

 

IntersectionObserver을 활용한 scroll event fade in 

 

    const OH_io2 = new IntersectionObserver(entries=>{
        entries.forEach(entry=>{
            if(entry.intersectionRatio>0){
                entry.target.classList.add('OH_fadein2')
            }
            else{
                entry.target.classList.remove('OH_fadein2');
            }
        })
    })

    let pic_div2 = document.querySelectorAll('.pic_div2');

    pic_div2.forEach(ele=>{
        OH_io2.observe(ele);
    })

 

이번 프로젝트를 하며 처음 접해본 IntersectionObserver ! 매우 편리하다 

 

    let pic_div2 = document.querySelectorAll('.pic_div2');

    pic_div2.forEach(ele=>{
        OH_io2.observe(ele);
    })

먼저 효과를 줄 Element를 정하고 -> pic_div2  (클라스로 줘서 SelectorAll 을 이용 -> 배열로 담음) 

배열의 요소를 forEach문으로 하나씩 거내 observer 관찰을 시작 ! 관찰할 때 사용하는 OH_io2 는 바로 저 위의 new IntersectionObserver를 담은 변수이다. 

 

그리고 Ratio를 정해서 class ('O_fadein2') 클라스를 add 그렇지 않으면 remove 하는 식으로 만들었다. 

 

 

 

IntersectionObserver 예시 

<div id="main_OH_wrap">
    <div id="main_OH_background_black">
        <div id="main_OH">
            <div id="OH_telling">
                <h2>이제 와이드 카메라와 울트라 와이드 카메라 모두<br /> 야간 모드를 지원합니다. 덕분에 그 어느 때보다 <br /> 놀라운 저조도 사진을 얻을 수 있습니다. 새로워진 와이드
                    카메라는 전보다 27%더
                    많은 빛을 포착합니다. 이제 낮이든 밤이든, 예전에는 불가능했던 수준의 디테일과 색을 담을 수 있다는 얘기죠.</h2>
            </div>
        </div>
        <div id="main_OH_prettyUnni" class="pic_div">
            <img src="/mainOH/DM_20210618111105_001.jpg" width='1440px' height='1083px'>
        </div>
        <div id="main_dinner">
            <div id="main_OH_dinner">
                <h1>저녁이 있는 사진.</h1>
            </div>
            <div id="main_pink_pic" class="pic_div2">
                <img src="/mainOH/DM_20210618111105_002.jpg" >
                <div id="pink_pic_telling">
                    <p class="main_OH_grey">
                        <span class="main_OH_bold main_OH_grey">아름다운 야간 모드</span> 주변에 빛이 적은 것이 감지되었을 때 자동으로 실행되는 야간 모드.
                        선명도를 유지하는 동시에, 생생하고 아름다운 색상을 담아주죠. 별다른 조작 없이
                        평소처럼
                        찍기만
                        하면 된답니다.
                    </p>
                </div>
                <div id="main_grey_pic" class="main_OH_inline pic_div2">
                    <img src="/mainOH/DM_20210618111105_003.jpg">
                    <div id="grey_pic_telling">
                        <p class="main_OH_grey">달빛이 극적으로 비추는 사진처럼 이전에는 온전히 담아내기 힘들었던 장면도 이제 그 어느 때보다 선명하게 찍을 수 있습니다.</p>
                    </div>
                </div>
            </div>

            <div id="main_OH_prettyUnni2" class="pic_div">
                <img src="/mainOH/DM_20210618113754_001.jpg" >
                <div id="prettyUnni2_telling">
                    <p class="main_OH_grey">디테일의 힘, Deep Fusion 중조도와 저조도 사이에서 다수의 노출량을 분석한 후 사진의 디테일을 극대화해주는 Deep Fusion
                        기능. 위 사진 속 나무, 천 그리고
                        크리스털의
                        생생한 질감을 느껴보세요. 또한, 울트라 와이드 촬영은 사진에 위풍당당한 느낌까지 더해주죠.</p>
                </div>
            </div>
        </div>
    </div>
    <div id="main_OH_background_white">
        <div id="magic" class="magic">
            <h1>마법처럼 <br />저절로.</h1>
        </div>
        <div id="main_magic">
            <div id="main_Aman" class="">
                <img src="/mainOH/DM_20210618111105_004.jpg">
                <div>
                    <p class="main_OH_grey">스마트 HDR 3 화면 요소들의 균형을 맞춰주는 스마트 HDR 3. 덕분에 햇빛이 강한 정오에도 이처럼 하늘의 풍부한 그라데이션이
                        고스란히 담겨있는 동시에, 인물과 나무의
                        디테일이
                        살아
                        있는 멋진 사진을 완성할 수 있습니다.</p>
                </div>
            </div>
            <div id="main_OH_foodFlower">
                <div id="main_OH_flower" class="">
                    <img src="/mainOH/DM_20210618111105_006.jpg">
                    <p class="main_OH_grey">밝은 조명에서도 질감, 피부 톤, 채도 그리고 개별 디테일을 놀라운 품질로 담아내는 스마트 HD 3을 통해 더욱 실감나는 사진을 찍을 수
                        있습니다.</p>
                </div>
                <div id="main_OH_food" class="">
                    <img src="/mainOH/DM_20210618111105_005.jpg">
                    <p class="main_OH_grey">스마트 HDR 3는 머신 러닝 기술을 통해 얼굴뿐만 아니라 장면도 인식합니다. 그런 다음 선명도, 색감, 화이트 밸런스를 적절하게
                        조절해주죠.</p>
                </div>
            </div>
        </div>
        <div id="main_OH_skategirl" class="">
            <div>
                <img src="/mainOH/DM_20210618111105_007.jpg">
            </div>
        </div>
        <div id="main_OH_blousegirl" class="pic_div2">
            <div id="main_OH_blouse">
                <img src="/mainOH/DM_20210618111105_008.jpg">
            </div>
        </div>
        <div id="main_OH_picmode">
            <div id="unrejectable">
                <h1>거부할 수 없는 <br /> 인물 사진 모드의 우월함.</h1>
            </div>
            <div id="main_OH_guys">
                <div id="main_guys">
                    <div id="main_OH_coolman" class="pic_div2">
                        <img src="/mainOH/DM_20210618111105_009.jpg">
                        <div>
                            <p class="main_OH_grey">눈을 사로잡는 인물 사진 모드 피사체가 더욱 돋보일 수 있도록, <br />배경을 보다 예술적으로 불러 처리해주는 인물
                                사진 모드가 더욱<br />
                                좋아졌습니다. 정말 근사하지 않나요?</p>
                        </div>
                    </div>
                    <div id="main_OH_coolgirl" class="pic_div2">
                        <img src="/mainOH/DM_20210618111105_010.jpg">
                        <div>
                            <p class="main_OH_grey">
                                사진에 새로운 차원의 아름다움을 더하는 법. '아이키 조명 모노', '자연 조명', '스튜디오 조명'을 비롯한 6가지 조명 효과 중에서
                                하나를 선택해 사진에 적용해보세요.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">


    const OH_io = new IntersectionObserver(entries=>{
        entries.forEach(entry=>{
            console.log(entry.intersectionRatio)
            if(entry.intersectionRatio>0){
                console.log(entry.intersectionRatio)
                entry.target.classList.add('OH_fadein')
                entry.target.classList.add('OH_inlarge')
            }else if(entry.intersectionRatio>0.02){
                console.log(entry.intersectionRatio)
            }
            else{
                entry.target.classList.remove('OH_fadein');
                entry.target.classList.remove('OH_inlarge')
            }
        })
    },{ threshold: [0,0.1,0.2,0.3] })

    let pic_div = document.querySelectorAll('.pic_div');

    pic_div.forEach(ele=>{
        OH_io.observe(ele);
    })

    
    const OH_io2 = new IntersectionObserver(entries=>{
        entries.forEach(entry=>{
            if(entry.intersectionRatio>0){
                entry.target.classList.add('OH_fadein2')
            }
            else{
                entry.target.classList.remove('OH_fadein2');
            }
        })
    })

    let pic_div2 = document.querySelectorAll('.pic_div2');

    pic_div2.forEach(ele=>{
        OH_io2.observe(ele);
    })




    const OH_io3 = new IntersectionObserver(entries=>{
        entries.forEach(entry=>{
            console.log(entry.rootBounds)
            if(entry.intersectionRatio>0){
               
                entry.target.classList.add('magic1')
                // entry.target.style.height+=
            }else if(entry.intersectionRatio>130){
                entry.target.classList.add('magic2')
            }else if(entry.intersectionRatio>200){
                entry.target.classList.add('magic3')
            }
            else{
                entry.target.classList.remove('magic1');
                entry.target.classList.remove('magic2');
                entry.target.classList.remove('magic3');
            }
        })
    })

    const magic = document.querySelectorAll('.magic');

    magic.forEach(ele=>{
        OH_io3.observe(ele);
    })




    // window.scroll(()=>{
    //     console.log(document.documentElement.scrollTop)
    // })
    
    // function check(){
    //     console.log('winH=',winH, 'scrollY=',scrollY, 'posFromTop=',posFromTop)
    // }


    // var animateHTML = function () {
    //     var elems,
    //         windowHeight

    //     var init = function () {
    //         elems = document.getElementsByClassName("hidden");
    //         windowHeight = window.innerHeight;
    //         _addEventHandlers();
    //     }

    //     var _addEventHandlers = function () {
    //         window.addEventListener("scroll", _checkPosition);
    //         window.addEventListener("resize", init)
    //     }
    //     var _checkPosition = function () {
    //         for (var i = 0; i < elems.length; i++) {
    //             var posFromTop = elems[i].getBoundingClientRect().top;
    //             if (posFromTop - windowHeight <= 0) {
    //                 elems[i].className = elems[i].className.replace("hidden", "fade-in");
    //             }
    //         }
    //     }
    //     console.log('winH=',winH, 'scrollY=',scrollY, 'posFromTop=',posFromTop)
    //     return {
    //         init: init
    //     }
    // }

    // animateHTML().init();



</script>

 

css

.OH_inlarge{
    transform: scale(0.9);
    transition: ease-in-out 1.5s;
}



.OH_fadein{
    animation: OH_fadein 3s;
}

@keyframes OH_fadein{
    from{opacity:0} to {opacity:1}
}

.OH_fadeout{
    animation: OH_fadeout 3s;
}

@keyframes OH_fadeout{
    from{opacity:1} to {opacity:0}
}

.OH_fadein2{
    animation: OH_fadein2 1.5s;
}

@keyframes OH_fadein2{
    from{opacity:0.3} to {opacity:1}
}

.OH_fadeout2{
    animation: OH_fadeout2 1.5s;
}

@keyframes OH_fadeout2{
    from{opacity:1} to {opacity:0.3}
}