Rumah >hujung hadapan web >tutorial css >Cara Mencipta Adegan Krismas Ajaib dengan Kepingan Salji Animasi dan Santa dalam JavaScript
Cara Mencipta Adegan Krismas Ajaib dengan Kepingan Salji Animasi dan Santa dalam JavaScript
- Patricia Arquetteasal
- 2024-12-04 00:47:13669semak imbas
Musim cuti sudah tiba, dan apakah cara yang lebih baik untuk menyebarkan keceriaan daripada mencipta adegan Krismas dinamik dalam JavaScript? Dalam tutorial ini, kami akan membimbing anda membina animasi bertemakan percutian yang menakjubkan yang menampilkan kepingan salji yang jatuh, bandar Krismas yang meriah dan Santa Claus yang terbang di giringnya.
? Demo Langsung https://codepen.io/HanGPIIIErr/pen/LEPVwjp
? Perkara yang Anda Akan Cipta
Kepingan salji animasi jatuh dengan anggun.
Pekan Krismas yang meriah dengan semangat percutian.
Santa Claus terbang melintasi langit malam dengan giringnya dengan pergerakan berayun yang realistik.
Projek ini menggunakan HTML, CSS dan JavaScript (Canvas API), menjadikannya sesuai untuk pembangun pemula dan berpengalaman.
- Menyediakan HTML Kami akan mulakan dengan struktur HTML yang mudah:
<!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;
}
- Menambah Keajaiban dengan JavaScript
Menggunakan API Kanvas, kami akan menghidupkan adegan kami dengan:
Menghidupkan kepingan salji dengan saiz, kelajuan dan pergerakan yang berbeza-beza.
Membuat Santa Claus terbang merentasi langit dengan trajektori berayun yang lancar.
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();
- Lihat Ia dalam Tindakan
Lihat versi langsung projek ini:
? https://codepen.io/HanGPIIIErr/pen/LEPVwjp
Kesimpulan
Projek perayaan ini mempamerkan kuasa API Kanvas untuk mencipta animasi interaktif. Sama ada anda meraikan cuti atau mempelajari teknik animasi, projek ini ialah cara yang menyeronokkan untuk berlatih dan meningkatkan kemahiran pengekodan anda.
Jangan ragu untuk memotong CodePen dan menyesuaikan pemandangan lebih jauh untuk menjadikannya milik anda. selamat hari raya! ?✨
Atas ialah kandungan terperinci Cara Mencipta Adegan Krismas Ajaib dengan Kepingan Salji Animasi dan Santa dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!