22/06/12/일 애플 웹사이트 인터랙션 클론

220612 Today I learned!

• 애플 웹사이트 인터랙션 클론 강의 듣기

---

1. Fact

(1) 애플 웹사이트 인터랙션 클론

• 섹션3: 고해상도 비디오 인터렉션
  • 비디오로 처리하기
    • scroll할 경우, videoElem.curretTime을 통해 현재 재생시간을 조절하여 애니메이션 효과를 낸다.
  • 이미지로 처리하기
    • 이미지 객체를 생성하여 이미지들을 배열에 저장한다.
    • scroll할 경우, imgElem.src를 통해 현재 스크롤에 맞는 이미지를 보여준다. (배열에 있는 인덱스 활용)
  • Canvas로 처리하기
    • 이미지 객체를 생성하여 이미지들을 배열에 저장한다.
    • 캔버스를 브라우저 창에 맞춘다. (Height를 꽉채워서 보여준다.)
    • load되었을 때, 캔버스에 첫번째 이미지를 그린다.
    • scroll할 경우, canvasElem.getContext('2d').drawImage를 통해 캔버스에 이미지를 그린다. (배열에 있는 인덱스를 활용)
• 섹션4: 동적 위치와 크기 계산을 이용한 스크롤 인터랙션 구현
  • 실제 브라우저 비율과 캔버스의 비율이 달라서 캔버스 사이즈를 억지로 fit시킨다.
  • 좌우 흰색 영역의 위치, 크기를 잡는다.
    • 캔버스 사이즈가 조정되어 있기 때문에, 새로운 캔버스 사이즈를 구한다.
• 정리본

---

2. Feeling

오차 없는 스크롤 액션을 만들려면, 많은 것을 고려하고 계산을 해야 한다는 것을 새삼 느꼈다. 😅

스크롤 계산 어렵다.. 어려워.. 정리를 하기 위해 오랜만에 아이패드를 꺼냈다.

---

3. Finding

**자바스크립트: image객체 **

공식문서

new Image();
new Image(width);
new Image(width, height);

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage); // <img width="100" height="200" src="picture.jpg">

이미지태그를 JS로 생성하기 위해 Image()객체를 사용할 수 있다.

Canvas API 기초

공식문서 / 공식 튜토리얼

<canvas>는 HTML 요소 중 하나로, 스크립트를 사용하여 그림을 그리는 데에 사용된다.

<canvas id="tutorial" width="150" height="150"></canvas>

• width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀이다.
• 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스트(rendering contexts)를 노출하여, 풀력할 컨텐츠를 생성하고 다루게 된다.

const canvas = document.getElementById('tutorial');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

• getContext(type): 렌더링될 그리기 대상을 가져온다.
• element.fillStyle: 형 내부에 사용할 색상, 그라디언트 또는 패턴을 지정합니다. 기본 스타일은 (검정색)이다.
• fillRect(x, y, width, height): 시작점이 (x, y)이고 크기가 및 로 지정되는 width채워진 사각형을 그린다.

---

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
JavsScript DeepDive	notStarted🌙
와자뵤! 다시 만들기	notStarted🌙