[D+50] canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기

 

 

국비지원 D+50

-  canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기  -

 

---

 

canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기

canvas를 사용해서 스크롤에 따라서 이미지가 움직이는 효과를 적용해 보려고 한다.

일단 3가지 단계별로 순차적으로 진행해 보도록 하자.

0 > 이미지 파일 준비하기
1 > html에 canvas 태그 추가
2 > canvas 태그에 대한 CSS 설정
3 > canvas 컨트롤 기능들을 추가

 

0 > 이미지 파일 준비하기

나는 스크롤을 할때마다 사과가 돌아가는 것같은 효과를 보이기위해 동영상을 프레임별로 쪼개서 이미지로 저장해 image폴더안에 넣어주었다.

 

1 > html에 canvas 태그 추가

<canvas id="main-canvas" width="1920" height="1080"></canvas>

 

 

먼저 body안에 canvas태그를 넣어주었으며 id설정 및 크기를 설정해 주었다.

 

2 > canvas 태그에 대한 CSS 설정

#main-canvas {
	border: 1px solid black;
	position: fixed;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 4000px;
}

태그에대한 스타일을 적용해주었으며 이때 스크롤을 움직일때마다 애니메이션을 적용할 것이기 때문에 body의 높이를 임의로 지정해 주었다.

 

3 > canvas 컨트롤 기능들 추가

• STEP01 > 렌더링 컨텍스트 설정

단순히 canvas 엘리먼트를 가지고 온다고 해서 바로 사용할 수는 없다.

드로잉을 하기 위해서는 많은 설정들을 해주어야 하는데 (좌표, 색, 크기, 메모리설정 등등...) 이러한 설정들이 되어있지 않기 때문이다.

이러한 설정값들의 집합을 graphic context라고 하는데 gc는 일일히 설정해줄 수도 있지만 기본값들로 설정되어 있는 도구를 가져와서 간단하게 사용할 수도 있다.

const mainCanvas = document.querySelector('#main-canvas');

const gc = mainCanvas.getContext('2d');

 

getContext() 메서드를 사용해서 렌더링 컨텍스트와 그리기 함수들을 사용해 줄 수 있다.

참고로 내가 다룰 이미지는 2D 그래픽이므로 2D와 관련된 드로잉 컨텍스트를 설정해 주었다.

 

• STEP02 > canvas 이미지 배열 셋팅

현재 이미지는 image폴더 안에 있는 것일뿐 내가 따로 불러오거나 하지는 않은 상태이다.

화면에 이미지를 올리기 위해 각각의 이미지들에대한 엘리먼트를 만들고 경로를 설정해준 다음에 배열에 넣어주도록 한다.

let imgElement;
let canvasImages = [];	// 각각의 imgElement를 넣어줄 배열

for(let i = 0; i < 500; i++)
{
    imgElement = new Image();
    imgElement.src = `./image/apple_${i}.png`;
    
    // 배열안에 단순히 경로값을 넣는 것이 아니라 이미지를 디고팅해서 가지고있는 것
    canvasImages.push(imgElement);
}

 

 

나는 이미지를 500장을 준비하였기 때문에 각 이미지들에대한  image 객체를 생성하고 경로를 설정해 canvasImages배열안에 반복문을 사용해서 넣어주었다.

이때 기억해야할 것은 배열안에 단순히 경로값을 넣어준 것이 아니라 랜더링할 준비가 되어있는 img태그들을 넣었다고 생각해야한다.

 

• STEP03 > 스크롤위치값에 따른 CSS값 계산 함수 생성

비율에따른 CSS값 계산 함수는 이전 게시물에도 올려놨기에 설명은 생략하도록 한다.

 

let yOffset = 0;	

const mainCanvas = document.querySelector('#main-canvas');
         
const calcValue = function(values){
	let result = 0;
	let rate = 0;
	let height = document.body.scrollHeight - window.innerHeight;
            
	rate = yOffset / height;
            
	result = (rate * (values[1] - values[0])) + values[0];

	return result;
}

 

 

• STEP04 > 이벤트 적용

각 이벤트가 발생되었을때에 대한 기능이 실행될 수 있도록 설정해주며, 처음 로드되었을때에는 이미지의 첫화면이 셋팅되도록 해주었다.

 

이후 스크롤이 발생될때마다 scrollY값에 대한 CSS값을 계산해서 스크롤 위치에 따른 이미지를 그려낼 수 있도록 해주었다.

// load되었다는 것은 이전 엘리먼트들 포함 모든 엘리먼트들이 다 돌았다는 것이다.
imgElement.addEventListener('load', () => {

	// 화면에 그려라 (이미지객체, 위치)
	gc.drawImage(canvasImages[0], 0, 0);

});

window.addEventListener("scroll", () => {
	let imageIndex = 0;

	yOffset = window.scrollY;
        
	imageIndex = Math.floor(calcValue([0, 499]));

	gc.drawImage(canvasImages[imageIndex], 0, 0);
});

 

 

4 > 결과화면