솔솔

[JavaScript]Image Sequence로 play하기 본문

나의보물들/JavaScript

[JavaScript]Image Sequence로 play하기

솔솔하네 2022. 1. 25. 23:31
반응형

💡 JavaScript를 이용해서 Image Sequence Play 만들어봤습니다.

애플홈페이지 들어가면 화면스크롤 할 때 노트북이 열렸다 닫혔다 하는거보고 우와신기하다라고 생각 한 적이 있는데

마침 신기방기한 유튜브의 알고리즘으로 ... 아래 동영상에서의 슨생님께서 가르쳐주시더라구요!

관심있으신 분들은 같이 영상보고 공부해보아요!

저는 이영상보면서 공부했어요!

참고한 슨생님의 강의 : https://www.youtube.com/watch?v=nPrvM4ArmIU&t=4547s  

 

※html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <h1>Image Sequence Play</h1>
    <div id="img-sequence">
        <canvas width="500" height="500" id="screen"></canvas>
    </div>

    <div class="blank"></div>

    <!-- <script src="script/play.js"></script> -->
    <script src="script/scroll.js"></script>
</body>
</html>

 - HTML Canvas 기본사용법 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage

 

캔버스(Canvas) 기본 사용법 - Web API | MDN

<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리

developer.mozilla.org

※ play.js

let canvas = document.getElementById('screen');
let context = canvas.getContext('2d');
let imgNum = 0;
let img = new Image();

// 이미지를 증가시키는 함수
function player (num) {
    console.log("number :" + num);
    img.src = "crow/crow" + num + ".png"; 
}

function playSequence() {
    let timer = setInterval(function(){
        console.log("Time Intervel" + imgNum);
        if(imgNum > 86) {
            imgNum = 0;
        }
        player(imgNum);
        imgNum++;
        // 1000밀리세컨 = 1초
        // 1초에 30번 반복되게 하기
    }, 33);
}

playSequence();

// img 변수에 경로가 로드 됬을때 실행
img.addEventListener('load', function(e) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); //clearRect(좌표의 위치 x, y, w, h)
    context.drawImage(img, 0, 0);
})

※ scroll.js

let canvas = document.getElementById('screen');
let context = canvas.getContext('2d');
let imgNum = 0;
let img = new Image();
let scrollYPos = 0;

img.src = "crow/crow0.png";

window.addEventListener('scroll', function(e){
    //round 0.5반올림함 그래서 정수로 만들어줌
    scrollYPos = Math.round(window.scrollY/18);
    console.log(scrollYPos);

    player(scrollYPos);

    if (scrollYPos > 86) {
        scrollYPos = 86
    }
});


function player (num) {
    console.log("number :" + num);
    img.src = "crow/crow" + num + ".png"; 
}

// 이미지를 만들고 지워줌
img.addEventListener('load', function(e) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); //clearRect(좌표의 위치 x, y, w, h)
    context.drawImage(img, 0, 0);
})

※ main.css

.blank {
    height: 1500px;
    border: 3px dashed red;
    margin-top: 600px;

}

#img-sequence {
    position: fixed;
    top: 100px;
}

만들게 되면 까마귀가 play.js로는 자동플레이 되고 scroll.js에서는 제가 스크롤 할 때마다 움직이는데 너무 신기하고

재미있네요. 다음에 플젝때나 포토폴리오만들 때 활용해도 재밌을거같네요!

'나의보물들 > JavaScript' 카테고리의 다른 글

서버와 통신 중 프로그래스바 표시  (0) 2022.09.16
[JavaScript + CSS] 타입이file인 input 디자인 변경  (0) 2022.03.16
[JavaScript] +JSP 세션시간 안내, 세션 만료 안내 및 로그아웃  (0) 2022.03.05
[JavaScript] input 타입 date에 max설정하기  (0) 2022.03.02
[JavaScript] select 유효성 검사  (0) 2022.02.25
'나의보물들/JavaScript' Related Articles more