waypoint.js와 animate.css 질문있습니다
본문
아래와 같이 코딩을 하였는데.
1. PC 정상작동 http://abc.com
2. PC에서 Mobile 정상작동 http://abc.com?device=mobile
3. 하지만 실질적으로 mobile로 접속하면 animate.css가 작동을 하지 않습니다.
모바일에는
<meta name="viewport" content="width=700,user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js" ></script>
를 넣어둔상태입니다
조언 및 관련링크 알려주시면 감사하겠습니다.
<div class="FiveFound" id="FiveFound">
<div class="sec">
<div class="FiveFoundTit">
<p>asdasd</p>
</div>
<div class="FiveFoundBox">
<p>asdasd</p>
</div>
</div>
</div>
new Waypoint({
element: $('.FiveFound'),
handler: function(direction) {
if (direction === 'down') {
$('.FiveFoundTit').addClass('animate__animated animate__backInLeft');
$('.FiveFoundBox').addClass('animate__animated animate__lightSpeedInRight');
} else {
$('.FiveFoundTit').removeClass('animate__animated animate__backInLeft');
$('.FiveFoundBox').removeClass('animate__animated animate__lightSpeedInRight');
}
},
offset: '100%'//맨밑에 도달 0% 맨위 도달 100% 발생
});
답변 1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
모바일에서 이게 호출이 않된다라는건가요? 모바일 쪽에 직접 메타 를 적용해보세요
답변 감사합니다.
제가 질문이 다소 오해 할 수 있게 올렸네요
Mobile에서는 import시킨 animate.css가 문제여서
class에 반응하는 animate__animated animate__backInLeft와 같은 옵션들이
작동을 안했던 것 같습니다
따로 서버에 올려
@media (prefers-reduced-motion:reduce),print {
.animate__animated {
-webkit-animation-duration:1ms!important;
animation-duration:1ms!important;
-webkit-transition-duration: 1ms!important;
transition-duration: 1ms!important;
-webkit-animation-iteration-count: 1!important;
animation-iteration-count: 1!important
}
.animate__animated[class*=Out] {
opacity: 0
}
}
부분 삭제하여 해결 완료하였습니다.
^^
