스크롤을 내리면 부드럽게 콘텐츠가 나타나는 애니메이션

스크롤에 맞춰서 콘텐츠들이 슥, 삭 하고 나타나는 페이지는

똑같은 디자인에 정적인 페이지보다 더 전문적이고 고급적인 느낌을 주기에

여기저기 적당히 잘 써먹기 좋다 :)

생각보다 방법도 매우매우 간단함

 

 

 

<div class="wrap">
    아래로 스크롤해보세요
    <section class="section type1">
        <div class="title">타이틀</div>
        <div class="content">내용</div>
    </section>
    <section class="section type2">
        <div class="title">타이틀</div>
        <div class="content">내용</div>
    </section>
    <section class="section type3">
        <div class="content">
            <div class="box left">
                <span class="inner">내용</span>
                <span class="inner">내용</span>
            </div>
            <div class="box right">
                <span class="inner type1">내용</span>
            </div>
        </div>
    </section>
</div>

다양한 케이스들을 보여주기위한 레이아웃을 준비

 

 

const saTriggerMargin = 150;
const saElementList = document.querySelectorAll('.motion');

const saFunc = function() {
    $.each(saElementList, function(index, element) {
        if (!element.classList.contains('show')) {
            if (window.innerHeight > element.getBoundingClientRect().top + saTriggerMargin) {
                element.classList.add('show');
            }
        }
    });
}

window.addEventListener('load', saFunc);
window.addEventListener('scroll', saFunc);

스크롤에 맞춰 애니메이션이 나타날수있게 스크립트를 넣어주고

 

.motion {
	opacity: 0;
	transition: all .5s ease;
}

.motion.motion-right {
	transform: translate(-100px, 0);
}

.motion.motion-up {
	transform: translate(0, 100px);
}

.motion.motion-down {
	transform: translate(0, -100px);
}

.motion.motion-left {
	transform: translate(100px, 0);
}

.motion.show {
	opacity: 1;
	transform: none;
}

css에 스크롤에 맞춰 실행시킬 애니메이션을 넣어준다

 

이제 이렇게 애니메이션을 설정해뒀으니

<div class="wrap">
    아래로 스크롤해보세요
    <section class="section type1">
        <div class="title motion motion-left">타이틀</div>
        <div class="content motion motion-up">내용</div>
    </section>
    <section class="section type2">
        <div class="title motion motion-right">타이틀</div>
        <div class="content motion motion-down">내용</div>
    </section>
    <section class="section type3">
        <div class="content">
            <div class="box left">
                <span class="inner motion motion-left">내용</span>
                <span class="inner motion motion-left">내용</span>
            </div>
            <div class="box right">
                <span class="inner type1 motion motion-right">내용</span>
            </div>
        </div>
    </section>
</div>

이렇게 효과를 주고싶은 영역에 맞게 클래스 추가해주면 끝!!

 

 

 

 

See the Pen Untitled by Suu978 (@suu978) on CodePen.

코드들을 조금씩 고쳐가며 세세하게 커스텀도 가능하니

너무 정신없이 남발하진말고 적당히 잘 사용해주자

 

끝