Background Anime
Nuages Realistes
Css Animation
Javascript
Html Css Js
Ciel Jour
Hero Section
Animation
Landing Page
Effets Visuels
Snippet
Degrades
Fond animé de ciel réaliste avec nuages flottants en CSS et JavaScript. Style moderne avec dégradés atmosphériques pour headers et hero sections web.
<!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 Bg Jour Animate HTML CSS JS 2026 05070000 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0f1a;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
padding: 20px;
margin: 0;
overflow: hidden;
}
/* Conteneur principal avec effet de profondeur */
.sky-scene {
position: relative;
width: 100%;
max-width: 1100px;
height: 650px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 120px rgba(100, 150, 255, 0.2);
background: linear-gradient(180deg, #1a2a4a 0%, #2d4a6f 25%, #4a7090 50%, #6b95b8 75%, #9ab8d4 100%);
}
/* Couche de ciel dynamique avec dégradé moderne */
.sky-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(185deg,
#1e3454 0%,
#2c4668 20%,
#456b8c 45%,
#6f96b5 70%,
#9dbcd4 100%);
z-index: 0;
transition: background 0.5s ease;
}
/* Effet de brume atmosphérique */
.atmosphere {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, rgba(200, 215, 235, 0.35), transparent);
z-index: 1;
pointer-events: none;
}
/* Particules de ciel (poussière/brume) */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
animation: floatUp 8s infinite ease-in;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}
@keyframes floatUp {
0% {
transform: translateY(100vh) scale(0.3);
opacity: 0;
}
20% {
opacity: 0.7;
}
80% {
opacity: 0.5;
}
100% {
transform: translateY(-10vh) scale(1.2);
opacity: 0;
}
}
/* Soleil/Lumière directionnelle */
.sun-glow {
position: absolute;
top: 40px;
right: 80px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(255, 240, 200, 0.9) 0%, rgba(255, 210, 120, 0.5) 40%, transparent 70%);
border-radius: 50%;
z-index: 3;
filter: blur(15px);
animation: sunBreath 6s infinite alternate ease-in-out;
pointer-events: none;
}
@keyframes sunBreath {
0% {
transform: scale(1);
opacity: 0.85;
}
100% {
transform: scale(1.08);
opacity: 1;
}
}
.sun-core {
position: absolute;
top: 75px;
right: 115px;
width: 50px;
height: 50px;
background: radial-gradient(circle, #fffde7, #ffd54f);
border-radius: 50%;
z-index: 4;
box-shadow: 0 0 50px #ffb703, 0 0 100px #ffaa00;
}
/* Conteneur de nuages avec animation */
.clouds-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none;
}
/* Nuage réaliste avec ombres */
.cloud {
position: absolute;
background: white;
border-radius: 50%;
box-shadow:
15px 10px 30px rgba(0, 0, 0, 0.15),
inset -8px -8px 20px rgba(180, 200, 230, 0.4),
inset 5px 5px 15px rgba(255, 255, 255, 0.9);
opacity: 0.92;
filter: blur(0.8px);
}
.cloud-group {
position: absolute;
transition: transform 0.3s ease;
}
/* Oiseaux réalistes */
.bird {
position: absolute;
z-index: 8;
font-size: 18px;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
user-select: none;
pointer-events: none;
transition: transform 0.05s linear;
}
/* Effet de ligne d'horizon */
.horizon {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,240,0.4), transparent);
z-index: 6;
filter: blur(1px);
}
@media (max-width: 768px) {
.sky-scene {
height: 450px;
border-radius: 24px;
}
.sun-core {
top: 50px;
right: 60px;
width: 35px;
height: 35px;
}
}
</style>
</head>
<body>
<div class="sky-scene">
<div class="sky-layer"></div>
<div class="atmosphere"></div>
<!-- Particules atmosphériques -->
<div class="particles" id="particlesContainer"></div>
<!-- Soleil -->
<div class="sun-glow"></div>
<div class="sun-core"></div>
<!-- Nuages animés -->
<div class="clouds-container" id="cloudsContainer"></div>
<!-- Horizon -->
<div class="horizon"></div>
<!-- Oiseaux ajoutés dynamiquement -->
</div>
<script>
(function() {
const skyScene = document.querySelector('.sky-scene');
const particlesContainer = document.getElementById('particlesContainer');
const cloudsContainer = document.getElementById('cloudsContainer');
// === PARTICULES ATMOSPHÉRIQUES ===
function createParticles() {
for (let i = 0; i < 35; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = 2 + Math.random() * 7;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 8 + 's';
particle.style.animationDuration = 6 + Math.random() * 10 + 's';
particle.style.opacity = 0.2 + Math.random() * 0.3;
particlesContainer.appendChild(particle);
}
}
createParticles();
// === NUAGES RÉALISTES (groupes de sphères) ===
function createCloudGroup(baseLeft, baseTop, scale = 1) {
const group = document.createElement('div');
group.className = 'cloud-group';
group.style.left = baseLeft + '%';
group.style.top = baseTop + '%';
group.style.transform = `scale(${scale})`;
// Configuration des sphères du nuage
const spheres = [
{ width: 90, height: 55, top: 0, left: 20 },
{ width: 120, height: 70, top: -15, left: 40 },
{ width: 100, height: 60, top: 5, left: 75 },
{ width: 80, height: 50, top: -5, left: 100 },
{ width: 110, height: 65, top: -20, left: 70 },
{ width: 70, height: 45, top: 10, left: -5 },
];
spheres.forEach(s => {
const cloudPart = document.createElement('div');
cloudPart.className = 'cloud';
cloudPart.style.width = s.width + 'px';
cloudPart.style.height = s.height + 'px';
cloudPart.style.top = s.top + 'px';
cloudPart.style.left = s.left + 'px';
cloudPart.style.position = 'relative';
group.appendChild(cloudPart);
});
// Animation lente de dérive
const duration = 35 + Math.random() * 40;
const delay = Math.random() * 20;
group.style.animation = `cloudDrift ${duration}s ${delay}s infinite alternate ease-in-out`;
return group;
}
// Keyframes pour le déplacement des nuages
const styleSheet = document.createElement('style');
styleSheet.textContent = `
@keyframes cloudDrift {
0% { transform: translateX(0px) scale(var(--scale, 1)); }
100% { transform: translateX(40px) scale(var(--scale, 1)); }
}
`;
document.head.appendChild(styleSheet);
// Placement des nuages
const cloudConfigs = [
{ left: 5, top: 15, scale: 1.0 },
{ left: 30, top: 8, scale: 0.8 },
{ left: 55, top: 18, scale: 1.1 },
{ left: 75, top: 10, scale: 0.9 },
{ left: 88, top: 22, scale: 0.75 },
{ left: 12, top: 32, scale: 0.7 },
{ left: 40, top: 28, scale: 0.95 },
{ left: 65, top: 35, scale: 0.65 },
];
cloudConfigs.forEach(config => {
const cloudGroup = createCloudGroup(config.left, config.top, config.scale);
cloudGroup.style.setProperty('--scale', config.scale);
cloudsContainer.appendChild(cloudGroup);
});
// === OISEAUX RÉALISTES (silhouettes) ===
const birdsData = [
{ emoji: '🐦', left: 8, top: 12, size: 16 },
{ emoji: '🐦', left: 22, top: 5, size: 19 },
{ emoji: '🐦', left: 42, top: 10, size: 15 },
{ emoji: '🐦', left: 61, top: 14, size: 20 },
{ emoji: '🐦', left: 79, top: 7, size: 17 },
{ emoji: '🐦', left: 34, top: 18, size: 18 },
{ emoji: '🐦', left: 53, top: 4, size: 16 },
{ emoji: '🐦', left: 70, top: 17, size: 19 },
];
const birdsElements = [];
birdsData.forEach((birdInfo) => {
const birdSpan = document.createElement('span');
birdSpan.className = 'bird';
birdSpan.textContent = birdInfo.emoji;
birdSpan.style.left = birdInfo.left + '%';
birdSpan.style.top = birdInfo.top + '%';
birdSpan.style.fontSize = birdInfo.size + 'px';
skyScene.appendChild(birdSpan);
birdsElements.push({
el: birdSpan,
left: birdInfo.left,
top: birdInfo.top,
speedX: 0.04 + Math.random() * 0.1,
speedY: 0.01 + Math.random() * 0.03,
directionX: Math.random() > 0.5 ? 1 : -1,
directionY: Math.random() > 0.5 ? 0.2 : -0.2,
minLeft: 1,
maxLeft: 98,
minTop: 2,
maxTop: 24,
});
});
// Animation des oiseaux avec mouvement fluide
function animateBirds() {
birdsElements.forEach(b => {
let currentLeft = parseFloat(b.el.style.left) || b.left;
let currentTop = parseFloat(b.el.style.top) || b.top;
let newLeft = currentLeft + b.speedX * b.directionX;
let newTop = currentTop + b.speedY * b.directionY;
if (newLeft >= b.maxLeft) {
newLeft = b.maxLeft;
b.directionX = -1;
} else if (newLeft <= b.minLeft) {
newLeft = b.minLeft;
b.directionX = 1;
}
if (newTop >= b.maxTop || newTop <= b.minTop) {
b.directionY *= -1;
newTop = Math.min(b.maxTop, Math.max(b.minTop, newTop));
}
b.el.style.left = newLeft + '%';
b.el.style.top = newTop + '%';
const rotation = b.directionX > 0 ? 8 : -8;
b.el.style.transform = `rotate(${rotation}deg)`;
});
requestAnimationFrame(animateBirds);
}
animateBirds();
console.log('🌤️ Ciel réaliste moderne · Nuages volumétriques · Oiseaux animés');
})();
</script>
</body>
</html>Télécharger le fichier source