Hier haben wir ein weihnachtliches JavaScript mit festlicher Farbpalette, Schneeflocken, funkelnden Weihnachtslichtern, einem Weihnachtsgruß in Schreibmaschinen Animation und leiser Glocken-Animation erstellt.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>🎄 Frohe Weihnachten 🎄</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Segoe UI", sans-serif;
color: #fff;
background: radial-gradient(circle at top, #10325c, #0a1d35 70%);
overflow: hidden;
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.lights {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.light {
width: 20px;
height: 30px;
border-radius: 50% 50% 40% 40%;
box-shadow: 0 0 20px rgba(255,255,255,0.8);
animation: blink 1.5s infinite alternate;
}
@keyframes blink {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0.3; transform: translateY(4px); }
}
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: rgba(255,255,255,0.1);
padding: 2rem 3rem;
border-radius: 15px;
backdrop-filter: blur(6px);
box-shadow: 0 0 30px rgba(255,255,255,0.2);
z-index: 5;
}
h1 {
font-size: 2.5rem;
color: #ffd700;
text-shadow: 0 0 20px #ff4d4d, 0 0 10px #ffd700;
margin-bottom: 10px;
}
p {
font-size: 1.1rem;
color: #f2f2f2;
margin-top: 0.5rem;
}
.bells {
font-size: 2rem;
animation: swing 1.5s infinite ease-in-out alternate;
display: inline-block;
}
@keyframes swing {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
#toggleSnow {
margin-top: 1.5rem;
background: #ff4d4d;
color: white;
padding: 0.7rem 1.2rem;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 0 10px rgba(255,77,77,0.6);
transition: background 0.3s ease;
}
#toggleSnow:hover {
background: #ff7373;
}
</style>
</head>
<body>
<div class="lights" id="lights"></div>
<canvas id="snow"></canvas>
<div class="card">
<div class="bells">🔔</div>
<h1 id="greeting"></h1>
<p>Möge euer Code fehlerfrei und euer Herz leicht sein!</p>
<button id="toggleSnow">❄️ Schnee anhalten ❄️</button>
</div>
<script>
// Lichterkette
const lights = document.getElementById('lights');
const colors = ['#ff4d4d', '#ffd700', '#4dff4d', '#4da6ff', '#ff66cc'];
for (let i = 0; i < 15; i++) {
const light = document.createElement('div');
light.className = 'light';
light.style.background = colors[i % colors.length];
light.style.animationDelay = `${Math.random() * 1.5}s`;
lights.appendChild(light);
}
// Schnee
const canvas = document.getElementById('snow');
const ctx = canvas.getContext('2d');
let width, height, snowflakes = [];
let snowing = true;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
snowflakes = Array.from({ length: Math.floor(width / 3) }, () => ({
x: Math.random() * width,
y: Math.random() * height,
r: Math.random() * 3 + 1,
d: Math.random() * 1 + 0.5
}));
}
window.addEventListener('resize', resize);
resize();
function drawSnow() {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "rgba(255,255,255,0.8)";
ctx.beginPath();
for (const f of snowflakes) {
ctx.moveTo(f.x, f.y);
ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
}
ctx.fill();
updateSnow();
}
function updateSnow() {
for (const f of snowflakes) {
f.y += f.d;
if (f.y > height) {
f.y = 0;
f.x = Math.random() * width;
}
}
}
function animateSnow() {
if (snowing) drawSnow();
requestAnimationFrame(animateSnow);
}
animateSnow();
document.getElementById('toggleSnow').addEventListener('click', function() {
snowing = !snowing;
this.textContent = snowing ? '❄️ Schnee anhalten ❄️' : '❄️ Schnee starten ❄️';
});
// Schreibmaschinen-Effekt
const greeting = document.getElementById('greeting');
const text = "🎅 Frohe Weihnachten 🎅";
let i = 0;
function type() {
greeting.textContent = text.slice(0, i++);
if (i <= text.length) setTimeout(type, 120);
}
type();
</script>
</body>
</html>
