모바일에서 animate 적용 안되게 할려면
본문
페이지에 애니 효과를 넣기 위해서 animate.css를 아래처럼 되어 있다면
모바일에서는 이 css가 적용되지 않게 할려면 어찌 해야 하나요?
페이지서 적용은 아래처럼 하고 있습니다.
<div class="container wow fadeInUp">
</div>
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
답변 1
가장 쉬운방법은 애니메이션 CSS 를 파일로 만들어서
PC 에서는 불러오고 모바일에서는 안불러오면 작동안할꺼같은데요 ?
if ( !G5_IS_MOBILE ) { echo '<link rel="stylesheet" href="animation.css">'.PHP_EOL; }
이러면 PC 에서는 불러오지만 모바일에서는 해당 css 자체를 안불러오니 작동도 안할꺼같네여.
wow.js 쓰시면
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function(box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window,
resetAnimation: true, // reset animation on end (default is true)
}
);
wow.init();
wow 깃헙 들어가시면 옵션 있어요.
여기에 모바일 부분에 false 처리하면 모바일에서는 작동 안해요.
우선 답변 감사합니다.
wow.js 에서
mobile:false로 수정을 했는데 여전히 모바일에서 반응을 하네요