waypoint.js와 animate.css 질문있습니다 채택완료
현재 아래와 같이 코딩을 하였는데. 1. PC 정상작동 http://abc.com 2. PC에서 Mobile 정상작동 http://abc.com?device=mobile 3. 하지만 실질적으로 mobile로 접속하면 animate.css가 작동을 하지 않습니다. 모바일에는 https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> 를 넣어둔상태입니다 조언 및 관련링크 알려주시면 감사하겠습니다.
<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');</p>
<p> }
},
offset: '100%'//맨밑에 도달 0% 맨위 도달 100% 발생
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
모바일에서 이게 호출이 않된다라는건가요? 모바일 쪽에 직접 메타 를 적용해보세요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
바트컨트롤
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
제가 질문이 다소 오해 할 수 있게 올렸네요
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
}
}
부분 삭제하여 해결 완료하였습니다.