[해피CGI][cgimall] 텍스트에 로딩시 블록되는 효과를 가진 에니메이션 Block Reveal Effects

텍스트 및 이미지등에서 로딩이 될 경우 블록되는 효과로 밑줄긋기 효과처럼 보이는 Block Reveal Effects 로

on-scroll 시에도 순차적으로 적용되는 예제등을 확인할 수 있습니다.

 

사이트가 최초 로딩되면 텍스트 및 이미지가 페이지상에 노출되기까지 어느정도 시간이 소요됩니다.
(아주 짧은 시간이지만 웹사이트 특성상 출력까지의 로딩되는 시간이 필요합니다.)

로딩되는 효과를 좀더 다이나믹하게 연출하여 지루하지 않는 UI 를 가실 수 있습니다.

 

다양한 예제가 소개되어있고

 

 

위 예제처럼 블럭요소가 지나가는 방향도 설정이 가능합니다.


https://github.com/codrops/BlockRevealers/

위 링크를 통해 다운로드가 가능하며, 소스상에서 보시면


js/anime.min.js
js/scrollMonitor.js
js/main.js

파일과 함께 예제 script 항목을 토대로 응용이 가능합니다.