aos 애니메이션이 안됩니다 도와주세요ㅠㅠ

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
aos 애니메이션이 안됩니다 도와주세요ㅠㅠ

QA

aos 애니메이션이 안됩니다 도와주세요ㅠㅠ

본문

head.sub에 코드 추가하였습니다


<script src="<?php echo G5_JS_URL ?>/aos.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery-1.12.4.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery-migrate-1.4.1.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/common.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/wrest.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/placeholders.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/script.js?ver=<?php echo G5_JS_VER; ?>"></script>
<link rel="stylesheet" href="<?php echo G5_JS_URL ?>/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo G5_CSS_URL ?>/aos.css?ver=<?=G5_CSS_VER?>">
<link rel="stylesheet" href="<?php echo G5_CSS_URL ?>/style.css?ver=<?=G5_CSS_VER?>">

 

aos.js, aos.css 링크로 넣어도 안되고 파일을 넣어도 안됩니다

안된다는게 애니메이션 data-aos="fade-down" data-aos-duration="1400" 이렇게 써져있는 곳은

다 날라갑니다 ㅠㅠ

충돌이 되는가 해서 하나씩 지워보고했는데도 그대로 다 날라가져 있고

aos.css를 지워야 내용이 나타납니다ㅠㅠ

왜일까요ㅠㅠ도와주세요 선생님들

이 질문에 댓글 쓰기 :

답변 4

코드를 보니 jQuery와 관련된 스크립트들이 두 번 로드되고 있는것 같습니다.

충돌 원인이 될 수도 있을 것 같습니다.

 

스크립트와 스타일시트의 로드 순서도 중요합니다. 예를 들어, jQuery를 포함한 다른 스크립트들보다 먼저 로드되어야 합니다.

 

다음을 참고하셔서 수정을 해보시는건 어떨까 합니다.


<script src="<?php echo G5_JS_URL ?>/jquery-1.12.4.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery-migrate-1.4.1.min.js"></script>
<!-- jQuery 이후에 추가된 스크립트들 -->
<script src="<?php echo G5_JS_URL ?>/aos.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/common.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/wrest.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/placeholders.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/script.js?ver=<?php echo G5_JS_VER; ?>"></script>
<!-- jQuery 이후에 추가된 스타일시트들 -->
<link rel="stylesheet" href="<?php echo G5_JS_URL ?>/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo G5_CSS_URL ?>/aos.css?ver=<?=G5_CSS_VER?>">
<link rel="stylesheet" href="<?php echo G5_CSS_URL ?>/style.css?ver=<?=G5_CSS_VER?>">

개발자모드 F12 키시고... 에러 확인하세요~

날라간다는 그 부분 개발자모드로 찍어보시고 해당 엘리먼트 css 적용부분 확인하세요.

특정 css 적용으로 날라간다 표현하시니 해당 부분 찍어보시면 답이 나올겁니다.

개발자 모드라는 것이 그냥 나타나는 에러만을 보기위해 만들어 놓은 것은 아니잖아요 :)

에러가 없으면 이상있는 부분은 찍어서 확인해야죠.

일단 aos 보니 aos가 제이쿼리 아래에 있어야 할거 같은데 위 소스는 위에 있고 jquery 영카트 기본과 따로 추가하는 거 까지 해서 여러개가 존재하네요. 해당을 확인 후 처리하고 다시 확인을 해보셔야 할거 같습니다.

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

회원로그인

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