애플 에어팟 프로의 페이지를 스크롤하면 에어팟의 이미지가 회전하며 화면 밖으로 사라지는 애니메이션을 보았다.
"이 멋있는 효과를...어떻게 해야할까..."라는 생각을 했는데 유튜브에 비슷한 모션을 구현하는 영상을 보며 공부를 해보았다.'하교수의 이중생활, 이미지 시퀀스 제어하기'를 보며 공부!
01. SequenceAuto
스크롤에 움직이는 이미지 시퀀스 효과를 구현하기 전 코드 이해를 위해 먼저 '자동'으로 움직이는 애니메이션을 구현해 보았다.
◻️ RESULT
◻️ HTML
<div id="img_sequence">
<canvas width="500" height="500" id="screen"></canvas>
</div>
◻️ SCRIPT
var canvas = document.getElementById('screen');
var context = canvas.getContext('2d');
var imgNum = 0;
var img = new Image();
playSequence();
function playSequence() {
var timer = setInterval(function() {
if(imgNum > 86) {
imgNum = 0;//이미지가 번호가 086까지 있기 때문에
}
player(imgNum);
imgNum++;
}, 30);
}
//playSequence라는 함수에 1초가 증가될때 마다 파일명을 1씩 증가하는 파일명으로 설정!
function player(num) {
console.log("number:" + num);
img.src = "./images/sequence/crow" + num + ".png";
}
//여기까지는 캔버스에 이미지를 불러만 오고 캔버스에 그리지 않은것(윗부분)
//불러올때마다 이미지를 그리는 코드(아래부분)
img.addEventListener('load', function(e) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, 0, 0);
})✅ 코드 분석
var canvas = ~ ; var context = ~ ;
: 캔버스 태그를 사용하기 위핸 기본 선언var canvas = document.getElementById('screen');
: canvas라는 변수에 아이디(screen)로 엘리먼트 가지고 오기(대입한것)var context = canvas.getContext('2d');
: context라는 변수에 2d이미지를 캔버스에 그릴 준비를 하다.var img = new Image();
: html의 img태그와 같다고 생각하면 됨setInterval(function(){});
: 일정 간격 반복 될때 마다 실행 될 내용을 안에 작성player(imgNum);
: player라는 함수를 n초에 한번씩 실행(1000밀리세컨 = 1초)imgNum++;
: n초마다 imgNum의 숫자가 1씩 증가playSequence();
: playSequence라는 함수를 만든 후 꼭! 호출(실행)을 시켜줘야 함수가 실행됨img.addEventListener('load', function(e) {};
: img변수의 이벤트가 발생할지 안할지 듣고 있다가 'load'라는 이벤트가 발생하면 {}안의 동작을 해라context.clearRect();
: 사이즈만큼 전체 다 지워줌context.drawImage(img, 0, 0);
: 위에서 불러온 img를 x,y좌표에 불러옴
02. SequenceScroll
sequenceAuto에서 약간의 코드 수정을 통해 스크롤에 따라 움직이는 이미지 시퀀스 구현
◻️ RESULT
◻️ HTML
<div id="img_sequence">
<canvas width="500" height="500" id="screen"></canvas>
</div>
<div class="bg0"></div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg03"></div>
<div class="bg04"></div>◻️ CSS
.bg0 {height: 500px; background: #fff;}
.bg01 {height: 500px; background: #888;}
.bg02 {height: 500px; background: #666;}
.bg03 {height: 500px; background: #444;}
.bg04 {height: 500px; background: #222;}스크롤링을 보여주기 위해 div박스에 height와 background를 줌
◻️ SCRIPT
var canvas = document.getElementById('screen');
var context = canvas.getContext('2d');
var scrollYPos = 0;
var img = new Image();
img.src = "./images/sequence/crow0.png";
window.addEventListener('scroll', function(e){
scrollYPos = Math.round(window.scrollY/20);
console.log(scrollYPos);
if(scrollYPos > 86) {
scrollYPos = 86;
}
player(scrollYPos);
})
//위의 sequenceAuto 코드와 같음
function player(num) {
img.src = "./images/sequence/crow" + num + ".png";
}
img.addEventListener('load', function(e) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, 0, 0);
})✅ 코드 분석
var scrollYPos = 0;
: 스크롤 내렸을때 변하는 scrolly포지션 값의 비율을 조절하기 위해 변수 선언img.src = "./images/sequence/crow0.png";
: 스크롤이 있기 전 맨처음 화면에서 이미지를 나타내기 위해(경로 주의!)scrollYPos = Math.round(window.scrollY/20);
: scrollY값을 20분의 1로 줄인것Math.round()
: 가장 가까운 정수로 변환(소수점보다 정수가 good)scrollYPos = 86;
: 스크롤 해도 이미지 img.086에서 멈추게 하기 위해player(scrollYPos);
: scrollYPos가 밑에 player(num)의 num이 되어 이벤트가 진행됨
📚 Coding Notes