animate.css와 wow.js를 같이 사용하면, 스크롤바가 내려감에 따라 홈페이지를 구성하는 각각의 요소들이 애니메이션 효과를 받으면서 나타나는 효과를 줄 수 있습니다.


당연히 animate.css는 css3 요소로 되어 있으므로(css로 애니메이션 효과를 준다는 것 자체가 css3 아니면 구현할 수가 없습니다.), 구버전 익스플로러에서는 동작하지 않습니다.


저도 처음에는 이 효과를 몰랐는데, 외국 유명 유료 html 테마들에서 이 효과를 많이 보여주길래, 소스코드를 분석해서 찾아낸 것입니다.


외국 사이트 참고 : http://demos.webicode.com/html/zap/animation-version/main_coporate_1.html


이 효과를 실무에서 어떻게 구현할 지 확인하기 위해, 간단한 소스코드를 삽입하여 구현해 봤습니다.


http://zoahaza.dothome.co.kr/blogupload/p151027_animatecss.html


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Javascript Test - animate.css and wow.js</title>

<link rel="stylesheet" href="resources/reset.css">

<link rel="stylesheet" href="resources/swiper/dist/css/swiper.min.css">

<link rel="stylesheet" href="resources/animate.css">

<style>

.wrap{width:1200px;margin:0 auto;}

p{width:600px;height:600px;}

ul{overflow:hidden;}

ul li{float:left;}

.wow:first-child {

     visibility: hidden;

   }

</style>

<script src="resources/jquery-1.11.3.min.js" type="text/javascript"></script>

<script src="p150523_bimilbottari_timemovingtest.js" type="text/javascript"></script>

<script src="resources/swiper/dist/js/swiper.jquery.min.js" type="text/javascript"></script>

<script src="resources/wow/dist/wow.min.js"></script>

<script>

wow = new WOW(

        {

       animateClass: 'animated',

       offset:       100

        }

    );

    wow.init();

</script>

</head>

<body>

<div class="wrap">

<p><img src="http://placehold.it/600x600"></p>

<p><img src="http://placehold.it/600x600"></p>

<p><img src="http://placehold.it/600x600"></p>

<ul>

<li><img class="wow slideInLeft" src="http://placehold.it/350x350"></li>

<li><img class="wow slideInUp" src="http://placehold.it/350x350"></li>

<li><img class="wow slideInRight" src="http://placehold.it/350x350"></li>

</ul> 

<ul>

<li><img class="wow slideInLeft" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

<li><img class="wow slideInUp" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

<li><img class="wow slideInRight" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

</ul> 

<ul>

<li><img class="wow slideInLeft" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

<li><img class="wow slideInUp" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

<li><img class="wow slideInRight" src="http://placehold.it/350x350" data-wow-duration="2s" data-wow-delay="1s"></li>

</ul> 

</div>

</body>

</html>


다른 부분은 animate.css와 wow.js 공식 문서에서도 잘 나와있으니 금방 구현하실 수 있습니다만, 여기서 가장 유의할 부분은 p 태그에 width와 height를 설정한 부분입니다.


이렇게 때때로 스크롤바를 내리기 전에 나타나는 요소에 width와 height를 주지 않으면, wow 플러그인이 요소의 높이를 제대로 계산하지 못해 효과가 구동되지 않는 경우가 있습니다. 왜냐하면 위의 예제의 경우 따로 width와 height를 주지 않으면 무작위로 이미지가 로딩되는데, 로딩되면서 아래쪽 이미지가 먼저 로딩되서 애니메이션 효과를 스크롤을 내리기도 전에 미리 보여주게 되기 때문입니다.


플러그인의 특성상 실무에서도 플러그인과 함께 이미지를 쓸 일이 꽤 많을 것으로 예상되기 때문에, 주의해야할 부분으로 보입니다.


제가 애니메이션 효과를 제대로 살펴보지 않고 대강 dummy image로 예제를 꾸며본 것이라 예제 html은 뽀대가 좀 안납니다. 하지만 실제 홈페이지 제대로 꾸며서 제대로만 적용한다면 상당히 강력한 시각적인 효과를 보여줄 수 있을 것입니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바