28일차 - js 애니메이션 (웹기능시험용)

자바스크립트 애니메이션 (ft.웹기능사시험 대비용)

시작하기 전에 JQ 멀쩡한지 점검

---

1. 외부 연동

• 제이쿼리 cdn
• js
• css

---

2. 3초 후 왼쪽으로 움직이는 빨간네모

2-1. HTML

스와이퍼처럼 3겹으로 감싼다

2-2. CSS

2-2-1) .banner (할머니)

• 너비 : 1200px;
• 마진 : 0 auto (가운데정렬)
• overflow : hidden; //넘치면 막는다!

2-2-2) .aniBox (엄마)

• display : flex
• width : 10000px // 너비 없으면 1200px 됨. 딱 맞으면 flex 못하니까 아예 넓게

2-2-3) .aniitem (자식 = 빨간 박스)

• 너비 : 1200px // 실제 아이템 너비 1200px
• 높이 : 300px // 실제 아이템 높이 300px
• 배경색 : red

여기까지 결과물

2-2-4) .aniitem(자식)에 글자색 + 폰트사이즈 + 가운데정렬 추가

.aniitem{ display: flex; 

          flex-direction: column; // 가운데 정렬
          align-items: center; 	  // 가운데 정렬
          justify-content: center;// 가운데 정렬
}

2-3. 제이쿼리

2-3-1) "화면이 열리자마자 aniBox가 animate한다"

• { 'marginLeft' : -1200 } CSS 스타일, margin-left:-1200px 주라!
• 'marginLeft' 대신........ {'left':-1200} 하려면?
  엄마 .aniBox에 position: relative(움직임을 부여하는) 필요!

아이템을 left: -1200px로 이동시키는 것이 아닌, 걍 마진값 주는 건 상관없음.

<script>
$(document).ready(function(){
			// 화면이 열리자마자 aniBox가 animate 한다
			 // CSS 스타일! margin-left:-1200px 주라!		
	$('.aniBox').animate({ 'marginLeft' : -1200 }, 400, function(){
					 // 만약 ({'left':-1200} 하려면?
	})
})
</script>

2-3-2) "스피드 400 + 애니메이션 실행식( ){ }"

① 이 객체(.aniBox) 맨 뒤에, div('.aniitem').첫번째 자식eq(0)을 appendTo밀어넣는다
→ eq( ) : 선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다

② { 'marginLeft' : -1200 } 로 이동시킨 객체(.aniBox)를 원래 자리로 되돌려놓는다
(css 마진-left 값에 '0' 덮어씌우기)

즉, "화면이 열리자마자 .aniBox가 'marginLeft' : -1200' 위치로 animate,
4초간 아래 실행식을 실행한다"

• .aniBox 맨 뒤에, 첫번째 자식 div(.aniitem)을 밀어넣는다
• { 'marginLeft' : -1200 } 로 이동시킨 .aniBox를 원래 자리로 되돌려놓는다

+) .aniBox 맨 뒤에, 첫번째 자식 div를 안 보내면?

---

2-3-3) setInterval 안에 집어넣기, "3초마다 반복"

<script>

    setInterval(function(){

        $('.aniBox').animate({ 'marginLeft' : -1200 }, 400, function(){
            $(this).find('div').eq(0).appendTo( $(this) );
            $(this).css( 'margin-left', 0);
        })

    },3000)

</script>

---

3. 3초 후 위로 올라가는 빨간네모

• 제이쿼리 { marginTop : -1200 }
• HTML .aniBox{ 삭 제 }