waypoint.js와 animate.css 질문있습니다

waypoint.js와 animate.css 질문있습니다

QA

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
    }
}
부분 삭제하여 해결 완료하였습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,284
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT