Background Anime
Nuages
Css Animation
Javascript
Html Css Js
Ciel
Atmospheric
Landing Page
Animation
Effets Visuels
Design Premium
Snippet
Fond d'écran animé avec nuages réalistes en CSS et JavaScript. Effets atmosphériques premium, transitions fluides et style design moderne pour landing pages.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Background Animate HTML CSS JS 2026 050700 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
overflow: hidden;
}
.scene {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(
180deg,
#1e3c72 0%,
#2a5298 15%,
#4a7db5 35%,
#6ea5cc 55%,
#98c5dd 75%,
#b8d8eb 100%
);
}
/* Dégradé ciel réaliste avec plusieurs couches */
.sky-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(255,220,180,0.2) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(180,200,255,0.1) 0%, transparent 40%);
z-index: 0;
}
/* Soleil */
.sun {
position: absolute;
top: 8%;
right: 15%;
width: 120px;
height: 120px;
background: radial-gradient(circle at 40% 40%,
rgba(255,255,255,1) 0%,
rgba(255,250,235,1) 15%,
rgba(255,235,190,0.9) 40%,
rgba(255,200,100,0.4) 70%,
transparent 100%);
border-radius: 50%;
z-index: 1;
box-shadow:
0 0 80px rgba(255,220,150,0.6),
0 0 160px rgba(255,200,100,0.4),
0 0 240px rgba(255,180,80,0.2);
}
/* Nuages */
.clouds-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.cloud {
position: absolute;
background: white;
border-radius: 50%;
filter: blur(8px);
opacity: 0.85;
box-shadow:
inset 0 -4px 8px rgba(0,0,0,0.05),
inset 0 4px 8px rgba(255,255,255,0.5);
}
.cloud-group {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
/* Oiseaux */
.bird {
position: absolute;
z-index: 3;
color: #1a1a2e;
font-size: 14px;
line-height: 1;
letter-spacing: 2px;
opacity: 0.7;
filter: blur(0.3px);
transition: transform 0.1s ease;
pointer-events: none;
user-select: none;
}
/* Brume basse */
.haze {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: linear-gradient(to top,
rgba(200,210,225,0.5) 0%,
rgba(200,210,225,0.2) 40%,
transparent 100%);
z-index: 4;
pointer-events: none;
}
/* Vignette */
.vignette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.15) 100%);
z-index: 5;
pointer-events: none;
}
@media (max-width: 768px) {
.sun {
width: 80px;
height: 80px;
top: 5%;
right: 10%;
}
.bird {
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="scene">
<div class="sky-gradient"></div>
<div class="sun"></div>
<div class="clouds-layer" id="cloudsLayer"></div>
<div id="birdsLayer"></div>
<div class="haze"></div>
<div class="vignette"></div>
</div>
<script>
(function() {
const cloudsLayer = document.getElementById('cloudsLayer');
const birdsLayer = document.getElementById('birdsLayer');
const scene = document.querySelector('.scene');
// === NUAGES RÉALISTES ===
function createCloud(config) {
const group = document.createElement('div');
group.className = 'cloud-group';
group.style.left = config.x + '%';
group.style.top = config.y + '%';
group.style.transform = `scale(${config.scale})`;
group.style.width = '200px';
group.style.height = '100px';
group.style.position = 'absolute';
const parts = [
{ w: 80, h: 40, x: 20, y: 30 },
{ w: 100, h: 50, x: 50, y: 15 },
{ w: 90, h: 45, x: 85, y: 28 },
{ w: 70, h: 35, x: 10, y: 22 },
{ w: 85, h: 42, x: 110, y: 20 },
{ w: 75, h: 38, x: 60, y: 40 },
];
parts.forEach(part => {
const blob = document.createElement('div');
blob.className = 'cloud';
blob.style.width = part.w + 'px';
blob.style.height = part.h + 'px';
blob.style.position = 'absolute';
blob.style.left = part.x + 'px';
blob.style.top = part.y + 'px';
group.appendChild(blob);
});
// Animation
const speed = config.speed || 0.3;
const delay = config.delay || 0;
group.style.animation = `drift${Math.floor(speed*10)} ${20 + speed * 30}s linear ${delay}s infinite`;
return group;
}
// Keyframes dynamiques
const styleEl = document.createElement('style');
let keyframesCSS = '';
for (let i = 1; i <= 5; i++) {
const distance = 20 + i * 15;
keyframesCSS += `
@keyframes drift${i} {
0% { transform: translateX(0px) scale(var(--s,1)); }
100% { transform: translateX(${distance}px) scale(var(--s,1)); }
}
`;
}
styleEl.textContent = keyframesCSS;
document.head.appendChild(styleEl);
const cloudConfigs = [
{ x: -5, y: 12, scale: 1.0, speed: 0.4, delay: 0 },
{ x: 25, y: 5, scale: 0.75, speed: 0.3, delay: -8 },
{ x: 50, y: 15, scale: 0.9, speed: 0.35, delay: -15 },
{ x: 75, y: 8, scale: 0.7, speed: 0.32, delay: -5 },
{ x: 90, y: 18, scale: 0.65, speed: 0.38, delay: -12 },
{ x: 10, y: 28, scale: 0.55, speed: 0.28, delay: -3 },
{ x: 35, y: 22, scale: 0.8, speed: 0.33, delay: -10 },
{ x: 60, y: 30, scale: 0.6, speed: 0.3, delay: -18 },
{ x: 80, y: 25, scale: 0.5, speed: 0.35, delay: -7 },
];
cloudConfigs.forEach(config => {
const cloud = createCloud(config);
cloud.style.setProperty('--s', config.scale);
cloudsLayer.appendChild(cloud);
});
// === OISEAUX ===
const birdSymbols = ['︿', '⌒', '︿︿', '⌒⌒'];
const birds = [];
function createBird(x, y, speed, direction) {
const bird = document.createElement('div');
bird.className = 'bird';
bird.textContent = birdSymbols[Math.floor(Math.random() * birdSymbols.length)];
bird.style.position = 'absolute';
bird.style.left = x + '%';
bird.style.top = y + '%';
bird.style.transform = direction > 0 ? 'scaleX(1)' : 'scaleX(-1)';
birdsLayer.appendChild(bird);
return {
el: bird,
x,
y,
speed: speed || (0.02 + Math.random() * 0.05),
direction: direction || (Math.random() > 0.5 ? 1 : -1),
amplitude: 0.3 + Math.random() * 0.8,
frequency: 0.02 + Math.random() * 0.03,
phase: Math.random() * Math.PI * 2,
};
}
// Créer 15 oiseaux
for (let i = 0; i < 15; i++) {
const x = Math.random() * 90;
const y = 5 + Math.random() * 30;
const speed = 0.02 + Math.random() * 0.06;
const direction = Math.random() > 0.5 ? 1 : -1;
birds.push(createBird(x, y, speed, direction));
}
// Animation des oiseaux
function animateBirds(timestamp) {
birds.forEach(bird => {
bird.x += bird.speed * bird.direction;
// Rebond
if (bird.x > 98) {
bird.x = 98;
bird.direction = -1;
bird.el.style.transform = 'scaleX(-1)';
} else if (bird.x < 1) {
bird.x = 1;
bird.direction = 1;
bird.el.style.transform = 'scaleX(1)';
}
// Mouvement ondulatoire vertical
const yOffset = Math.sin(timestamp * bird.frequency + bird.phase) * bird.amplitude;
bird.el.style.left = bird.x + '%';
bird.el.style.top = (bird.y + yOffset) + '%';
});
requestAnimationFrame(animateBirds);
}
requestAnimationFrame(animateBirds);
// === EFFET PARALLAX SOURIS ===
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 10;
const y = (e.clientY / window.innerHeight - 0.5) * 10;
document.querySelectorAll('.cloud-group').forEach((cloud, i) => {
const factor = (i % 3 + 1) * 0.5;
cloud.style.transform += ` translate(${x * factor}px, ${y * factor}px)`;
});
const sun = document.querySelector('.sun');
if (sun) {
sun.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
}
});
console.log('☁️ Ciel réaliste professionnel · Nuages & Oiseaux');
})();
</script>
</body>
</html>Télécharger le fichier source