JavaScript로 애니메이션 눈송이와 산타로 마법 같은 크리스마스 장면을 만드는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

JavaScript로 애니메이션 눈송이와 산타로 마법 같은 크리스마스 장면을 만드는 방법

Patricia Arquette

Dec 04, 2024 am 12:47 AM

How to Create a Magical Christmas Scene with Animated Snowflakes and Santa in JavaScript

연휴 시즌이 다가왔습니다. JavaScript로 역동적인 크리스마스 장면을 만드는 것보다 더 좋은 방법이 있을까요? 이 튜토리얼에서는 떨어지는 눈송이, 축제 분위기의 크리스마스 마을, 썰매를 타고 날아다니는 산타클로스를 특징으로 하는 멋진 휴일 테마 애니메이션을 제작하는 과정을 안내해 드립니다.

? 라이브 데모 https://codepen.io/HanGPIIIErr/pen/LEPVwjp

? 당신이 만들 것

우아하게 떨어지는 애니메이션 눈송이.
명절 분위기가 물씬 풍기는 축제의 크리스마스 마을.
실감 나는 썰매를 타고 밤하늘을 날아다니는 산타클로스.
이 프로젝트는 HTML, CSS 및 JavaScript(Canvas API)를 사용하므로 초보자와 숙련된 개발자 모두에게 적합합니다.

HTML 설정 간단한 HTML 구조부터 시작하겠습니다.



    <meta charset="UTF-8">
    <title>Christmas Wonderland</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Add the CSS styles here */
    </style>


    <canvas>


<ol>
<li>Styling the Scene with CSS</li>
</ol>

<p>We use CSS to create the visual layers of the scene:</p>

<p>A gradient background to simulate the night sky.<br>
A city banner showcasing a cozy Christmas town.<br>
Layers for snow and Santa's animation.<br>
</p>

<pre class="brush:php;toolbar:false">body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #1e3b70, #29578a, #3a75b6, #a0d3e8);
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Canvas for the snow and Santa */
#skyCanvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Section for the Christmas town */
#christmasScene {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* City banner */
#cityBanner {
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/0p0Wzrk/DALL-E-2024-12-02-23-27.png') no-repeat center center;
    background-size: cover;
    background-position: bottom;
}

JavaScript로 마법을 더하다

Canvas API를 사용하여 다음과 같은 방법으로 장면에 생기를 불어넣습니다.

다양한 크기, 속도, 움직임으로 눈송이 애니메이션
부드러운 진동 궤적을 통해 산타클로스가 하늘을 날게 만듭니다.

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

let width, height;
let snowflakes = [];
let santa = {
    x: width,
    y: height * 0.1,
    width: 150,
    height: 80,
    image: new Image(),
    time: 0
};

// Load Santa's image
santa.image.src = 'https://i.ibb.co/rbHJDQB/DALL-E-2024-12-02-23-37-removebg-preview.png';

function init() {
    resize();
    createSnowflakes();
    animate();
}

function resize() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    santa.x = width;
    santa.y = height * 0.1;
}

window.addEventListener('resize', resize);

function createSnowflakes() {
    let count = width / 8;
    snowflakes = [];
    for (let i = 0; i  height) {
        this.y = 0;
        this.x = Math.random() * width;
    }

    if (this.x > width) {
        this.x = 0;
    }
    if (this.x  {
        flake.update();
        flake.draw();
    });

    updateSanta();
    drawSanta();

    requestAnimationFrame(animate);
}

init();