aos 애니메이션이 안됩니다 도와주세요ㅠㅠ
본문
<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 영카트 기본과 따로 추가하는 거 까지 해서 여러개가 존재하네요. 해당을 확인 후 처리하고 다시 확인을 해보셔야 할거 같습니다.
감사합니다 initㄴ=를 안써서 그랬습니다..