[plugIn] ScrollReveal 사용하기

 

ScrollReveal 바로가기

 

---

1. 적용해보기

 

상단의 Guide를 클릭해서 cdn을 html에 넣어준다.

 

<!-- CDN파일(head안에 꼭 포함해야 함) -->
<script src="https://unpkg.com/scrollreveal"></script>

<!-- min.js 파일 -->
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></scrip

 

 

기본 옵션

ScrollReveal().reveal(target, options);

ScrollReveal().reveal('.headline');
ScrollReveal().reveal('.tagline', { delay: 500 });
ScrollReveal().reveal('.punchline', { delay: 2000 });

 

HTML 예제

<h1 class="headline">
    Widget Inc.
</h1>
<p class="tagline">
    The perfect widgets.
    <span class="punchline">Forever.</span>
</p>

jsbin 예제 보기

 

---

2. class 확장해 깜빡임 방지

<script>를 </body>태그 바로 앞에 배치해서 스크립트가 완료되기 전에 document가 랜더링 할 수 있도록 한다.

그러나 이 경우 scrollReveal을 잠시 볼 수 있다.

클래스 확장을 통해 깜빡임을 방지해주는 것이 좋다.

 

class 규칙 만들기.

 

html.sr .load-hidden {
    visibility: hidden;
}

여기서는 .sr이라는 class를 만들었다. (이것은 scrillRevael 전용 CSS 규칙 세트라고 한다)

 

ScrillReveal 스타일 확장방법 보러가기

 

 

---

또 다른 aos 보기

AOS - Animate on scroll library