JavaScript でアニメーションの雪の結晶とサンタを使った魔法のクリスマスシーンを作成する方法-CSSチュートリアル-php.cn

JavaScript でアニメーションの雪の結晶とサンタを使った魔法のクリスマスシーンを作成する方法

Patricia Arquette

リリース： 2024-12-04 00:47:13

オリジナル

663 人が閲覧しました

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 構造から始めます。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <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 < count; i++) {
        snowflakes.push(new Snowflake());
    }
}

function Snowflake() {
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.radius = Math.random() * 4 + 1;
    this.speedX = Math.random() * 1 - 0.5;
    this.speedY = Math.random() * 3 + 1;
    this.opacity = Math.random() * 0.5 + 0.3;
    this.swing = Math.random() * 2;
    this.swingSpeed = Math.random() * 0.05 + 0.02;
    this.angle = Math.random() * Math.PI * 2;
}

Snowflake.prototype.update = function () {
    this.angle += this.swingSpeed;
    this.x += Math.cos(this.angle) * this.swing + this.speedX;
    this.y += this.speedY;

    if (this.y > height) {
        this.y = 0;
        this.x = Math.random() * width;
    }

    if (this.x > width) {
        this.x = 0;
    }
    if (this.x < 0) {
        this.x = width;
    }
};

Snowflake.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

    let gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 2);
    gradient.addColorStop(0, 'rgba(255, 255, 255,' + this.opacity + ')');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    ctx.fillStyle = gradient;
    ctx.fill();
};

function updateSanta() {
    santa.time += 0.05;
    santa.x -= 3;
    santa.y = height * 0.1 + Math.sin(santa.time) * 50;

    if (santa.x + santa.width < 0) {
        santa.x = width;
    }
}

function drawSanta() {
    ctx.drawImage(santa.image, santa.x, santa.y, santa.width, santa.height);
}

function animate() {
    ctx.clearRect(0, 0, width, height);

    snowflakes.forEach((flake) => {
        flake.update();
        flake.draw();
    });

    updateSanta();
    drawSanta();

    requestAnimationFrame(animate);
}

init();

ログイン後にコピー