인터렉티브 웹 - BBC 사이트 따라해보기3

드디어 마지막 강의.

이 짧은 강의 듣고 완성하는데 거진 한달 반이 걸렸네요.

게을러서 ㅠ

 

이전 글은 아래를 참고 해주세요.

 

인터렉티브 웹 - BBC 사이트 따라해보기2

 

---

 

주요 내용 : 애니메이션 효과

 

1. data-action

-> data-action으로 할당된 함수를 실행시키라는 의미

<div class="graphic-item" data-action="birdFlies">
	<img class="bird" src="images/bird.gif" alt="">
	<img class="scene-img" src="images/02.png" alt="">
</div>

무료 강의고 쉽게 접근 하기 위해 별다른 기술을 사용하지 않고 html에 바로 값을 할당해 준 것으로 생각 된다.

 

 

2. 새를 날게 하는 애니메이션 방식

const actions = {
	birdFlies() {
    	document.querySelector('[data-index="2"].bird').style.transform = `translateX(${window.innerWidth}px)`;
		/* '[data-index="2"].bird' : data-index가 2인 부모의 bird(자식)을 선택하기 위한 방법 */
		/* transform = `translateX(${window.innerWidth}px)` : 애니메이션을 지정 */
		/* X좌표를 윈도우의 너비만큼 움직여라! */
	}
}

function activate(action) {
    currentItem.classList.add('visible');
    if (action) {
        actions[action]();/* actions 객체안에 있는 함수를 호출 */
    }
}

 

3. transition 사용 - css

 

transition: 1.5s 0.5s linear;
/* 1번째 (1.5s) : 트랜지션 재생 시간 */
/* 2번째 (0.5s) : 트랜지션 지연 시간 */

 

4. transform 사용 - css

 

transform : translateX(-100%);
/* translateX : X좌표를 움직임 */
/* translateX(-100%) : translateX의 인자로 % 단위를 주면 
 * 해당 오브제의 크기를 기준으로 움직인다는 의미이다.
 * 고로 이 코드는 해당 오브제 크기만큼 왼쪽으로 움직이라는 것! */

 

5. overflow-x : hidden

 

넘치는 x좌표를 안보이게 하는 것

 

---

 

다음 글은 커스터 마이징!