제이쿼리 코드를 > 자바스크립트로 작성시
안녕하세요 선생님 바쁘실텐데 죄송합니다.
저는 자바스크립트 공부를 위하여
선생님이 제이쿼리로 적어주신 코드들을
자바스크립트로 변환하며 공부 하고 있습니다.
하지만 아래와 같이 변수 fgCon에 classList.add('active');
를 하였지만 아무런 애니메이션 효과도 나타나지 않고
콘솔 검사시 html 내부에는 이미 active 클래스가 삽입 되어있습니다.
어떠한 문제때문에 그런걸까요??
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge">
<title>스터디</title>
<link rel="stylesheet" type="text/css" href="../../library/css/common.css">
<script type="text/javascript" src="../../library/js/jquery.1.12.4.js"></script>
</head>
<style type="text/css">
.tit_area {padding:100px 0 0 0;}
.tit_area .f_content {position: relative; width:70%; margin:0 auto;}
.tit_area .f_content .tit {position:relative; z-index:20; left:50px; font-size:80px; line-height:1.2; opacity:1;}
.tit_area .f_content .txt {position:relative; z-index:20; left:80px; font-size:50px; opacity:1;}
.tit_area .f_content .img {position: relative; transform:translateY(50px); transition:4s .2s cubic-bezier(0.3, 1.01, 0.51, 1.04);}
.tit_area .f_content.active .img {transform:translateY(-10px);}
.tit_area .f_content .img:after {position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; content:""; background-color: #fff; transition:2s .3s cubic-bezier(0.3, 1.01, 0.51, 1.04);}
.tit_area .f_content.active .img:after {width: 0;}
.tit_area .f_content .img img {width:100%;}
</style>
<body>
<div class="wrap">
<section class="tit_area">
<article class="f_content">
<h2 class="tit">
GGANG CODING
</h2>
<p class="txt">애니메이션 가속도 처리방법</p>
<figure class="img">
<img src="../images/4.jpg">
</figure>
</article>
</section>
</div>
<script type="text/javascript">
var fgCon = document.querySelector('.f_content');
function addClass(){
fgCon.classList.add('active');
};
function init(){//초기화
addClass();
};
init();
</script>
</body>
</html>
답변 1
0
안녕하세요 박무웅님 :)
문서의 모든 요소가 로드된후에 애니메이션이 실행되도록 고쳐보세요
onload = function(){
init();
}
온로드를 사용하면 모든요소 즉 이미지까지 로드된 후에 애니메이션 실행됩니다.
모든 요소가 로드되지 않았을때 애니메이션이 실행되서 애니메이션이 실행되지 않는것 처럼 보이건데요
온로드를 사용해 모든 요소가 로드된 후에 애니메이션이 실행되도록 하거나
setTimeout함수를 사용해 약간의 딜레이를 주어도 처리 가능합니다.
그럼 또다른 궁금증이 생길때 문의주세요 :)
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
197
1
반응형에 대해 질문이 있습니다 !
0
366
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
379
1
함수가 정의되기 전에 함수 호출
0
343
1
섹션12 보너스 챕터에 관한 질문입니다!
0
468
1
5-3-1 강좌 섹션 질문 합니다.
0
312
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
463
3
화면 높이 관련 질문 있습니다.
1
433
1
선생님
0
370
1
5-2 vanilla.html 질문합니다.
0
422
1
5-3-2 질문입니다.
1
293
1
5-2 추가 질문이요
0
345
2
5-2 ! 질문이요.
0
266
1
안녕하세요!
0
272
1
질문드립니다.
1
366
2
질문드립니다.
0
1664
3
색션6강 카운트관련 문의드립니다!
0
238
1
섹션5 관련 질문드립니다.
0
261
1
setProperty 를 재활용 하고싶습니다.
0
210
1
IntersectionObserver
0
255
1
offsetheight와 scrollheight
0
398
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
428
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
315
1
<script>에 $(function(){})으로 감싸준 이유
0
207
1