Background Animé Jardin Papillons CSS JS

Background Anime Jardin Papillons Css Animation Javascript Html Css Js Nature Animation Effets Visuels Snippet Fleurs Oiseaux
Fond animé de jardin ensoleillé avec papillons, oiseaux et fleurs en CSS et JavaScript. Animation naturelle et colorée pour sites créatifs et événementiels.
<!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 05070003 | AngularForAll</title>
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(180deg, #a2d6f9 0%, #c9e9ff 40%, #b0d78a 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Segoe UI', 'Quicksand', system-ui, sans-serif;
      padding: 20px;
      margin: 0;
      overflow-x: hidden;
    }

    .garden-container {
      position: relative;
      width: 100%;
      max-width: 1000px;
      height: 620px;
      background: linear-gradient(180deg, #c3e3b0 0%, #9ac97e 30%, #5e7a3e 100%);
      border-radius: 80px 80px 40px 40px;
      box-shadow: 0 25px 40px rgba(0, 30, 10, 0.5), inset 0 3px 25px rgba(255, 255, 220, 0.6);
      overflow: hidden;
      border-bottom: 12px solid #4d6130;
    }

    /* Ciel de jour lumineux */
    .sky {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 32%;
      background: linear-gradient(180deg, #7ec8f8 0%, #b7e1fa 40%, #d4ecfa 70%, #e2f3d4 100%);
      border-radius: 80px 80px 0 0;
      z-index: 0;
    }

    /* Soleil animé avec rayons */
    .sun {
      position: absolute;
      top: 18px;
      right: 55px;
      width: 90px;
      height: 90px;
      background: radial-gradient(circle at 35% 35%, #fff9c4, #ffb703);
      border-radius: 50%;
      box-shadow: 0 0 60px #ffb703, 0 0 100px #ffaa00, 0 0 20px #ffdd55;
      z-index: 2;
      animation: sunGlow 3s infinite alternate ease-in-out;
    }

    @keyframes sunGlow {
      0% { box-shadow: 0 0 50px #ffb703, 0 0 90px #ffaa00, 0 0 20px #ffdd55; }
      100% { box-shadow: 0 0 70px #ffb703, 0 0 120px #ffaa00, 0 0 35px #ffdd55; }
    }

    .sun-rays {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 110px;
      height: 110px;
      background: transparent;
      border-radius: 50%;
      z-index: 1;
      animation: rotateRays 20s linear infinite;
    }

    .sun-rays::before,
    .sun-rays::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, transparent 30%, rgba(255,240,140,0.25) 48%, transparent 52%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .sun-rays::after {
      width: 90%;
      height: 90%;
      background: radial-gradient(circle, transparent 35%, rgba(255,220,100,0.3) 49%, transparent 51%);
    }

    @keyframes rotateRays {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Nuages améliorés mode jour */
    .cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 60% 40% 70% 30% / 60% 45% 55% 40%;
      box-shadow: 12px 12px 25px rgba(255, 255, 250, 0.7), inset 0 -5px 15px rgba(200, 220, 240, 0.7);
      backdrop-filter: blur(2px);
      z-index: 1;
    }

    .cloud1 {
      width: 160px;
      height: 70px;
      top: 25px;
      left: 5%;
      background: #fffffffa;
    }

    .cloud2 {
      width: 190px;
      height: 75px;
      top: 50px;
      right: 10%;
      background: #f6fcff;
    }

    .cloud3 {
      width: 140px;
      height: 60px;
      top: 8px;
      left: 50%;
      background: #fffffffb;
    }

    .cloud4 {
      width: 120px;
      height: 55px;
      top: 70px;
      left: 30%;
      background: #fafeff;
    }

    /* Oiseaux volants (CSS + JS) */
    .bird {
      position: absolute;
      z-index: 15;
      font-size: 24px;
      filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2));
      transition: transform 0.1s linear;
      user-select: none;
      pointer-events: none;
    }

    /* Zone du sol */
    .ground {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 68%;
      background: radial-gradient(ellipse at 50% 20%, #89b55a, #527a34);
      border-radius: 0 0 40px 40px;
      z-index: 1;
    }

    .grass-patch {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(transparent, transparent 10px, #6b8c3c 10px, #6b8c3c 12px);
      opacity: 0.25;
      border-radius: 0 0 40px 40px;
    }

    /* Fleurs */
    .flower {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 5;
      transition: transform 0.2s ease;
    }

    .flower:hover {
      transform: scale(1.05);
      filter: drop-shadow(0 8px 8px rgba(0,0,0,0.2));
    }

    .stem {
      width: 6px;
      height: 75px;
      background: linear-gradient(180deg, #4c7a2c, #2d5016);
      border-radius: 3px;
      position: relative;
    }

    .leaf {
      position: absolute;
      width: 22px;
      height: 11px;
      background: #3d6b24;
      border-radius: 50% 10% 50% 10%;
      transform: rotate(-30deg);
      bottom: 28px;
      left: -14px;
    }

    .leaf.right {
      left: auto;
      right: -14px;
      transform: rotate(30deg) scaleX(-1);
      background: #38611e;
    }

    .bloom {
      position: relative;
      width: 55px;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -10px;
    }

    .petal {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 60% 20% 50% 20%;
      background: radial-gradient(circle at 30% 30%, #ffb7c5, #e75480);
      transform-origin: center;
      opacity: 0.9;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .center {
      width: 18px;
      height: 18px;
      background: radial-gradient(circle, #fbe555, #f49b2c);
      border-radius: 50%;
      position: absolute;
      z-index: 2;
      box-shadow: inset 0 0 5px #b45f1a;
    }

    .flower.type2 .petal { background: radial-gradient(circle at 30% 30%, #fcf4a3, #f9b83a); }
    .flower.type3 .petal { background: radial-gradient(circle at 30% 30%, #dbb6ff, #a04fcc); }
    .flower.type4 .petal { background: radial-gradient(circle at 30% 30%, #ffba6b, #e36b2c); }
    .flower.type5 .petal { background: radial-gradient(circle at 30% 30%, #faa0bf, #cf3a6e); }

    /* Papillons */
    .butterfly {
      position: absolute;
      z-index: 20;
      font-size: 28px;
      filter: drop-shadow(0 4px 5px rgba(0,0,0,0.3));
      transition: transform 0.3s ease, left 0.2s linear, top 0.2s linear;
      pointer-events: none;
      animation: floatWiggle 3s infinite alternate ease-in-out;
    }

    @keyframes floatWiggle {
      0% { transform: translateY(0px) rotate(-2deg); }
      100% { transform: translateY(-12px) rotate(4deg); }
    }

    .fence {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      background: repeating-linear-gradient(90deg, #b08968 0px, #b08968 18px, #8b5a2b 18px, #8b5a2b 22px);
      z-index: 8;
      border-radius: 0 0 40px 40px;
      opacity: 0.8;
    }

    @media (max-width: 700px) {
      .garden-container {
        height: 480px;
      }
      .butterfly {
        font-size: 22px;
      }
      .bird {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <div class="garden-container">
    <!-- Ciel jour -->
    <div class="sky"></div>
    
    <!-- Soleil et rayons -->
    <div class="sun"></div>
    <div class="sun-rays"></div>

    <!-- Nuages blancs -->
    <div class="cloud cloud1"></div>
    <div class="cloud cloud2"></div>
    <div class="cloud cloud3"></div>
    <div class="cloud cloud4"></div>

    <!-- Sol -->
    <div class="ground">
      <div class="grass-patch"></div>
    </div>

    <!-- Conteneur pour fleurs -->
    <div id="flowerField" style="position: absolute; bottom: 20px; left: 0; width: 100%; height: 80%; z-index: 5;"></div>

    <!-- Barrière -->
    <div class="fence"></div>

    <!-- Les oiseaux et papillons seront ajoutés dynamiquement -->
  </div>

  <script>
    (function() {
      const garden = document.querySelector('.garden-container');
      const flowerField = document.getElementById('flowerField');

      // ---- FLEURS ----
      const flowerTypes = ['', 'type2', 'type3', 'type4', 'type5'];
      const flowerPositions = [
        { left: 7, bottom: 14 }, { left: 19, bottom: 9 }, { left: 30, bottom: 16 },
        { left: 40, bottom: 7 }, { left: 50, bottom: 12 }, { left: 60, bottom: 15 },
        { left: 70, bottom: 6 }, { left: 80, bottom: 11 }, { left: 90, bottom: 9 },
        { left: 14, bottom: 19 }, { left: 34, bottom: 18 }, { left: 54, bottom: 21 },
        { left: 74, bottom: 14 }, { left: 94, bottom: 12 }, { left: 24, bottom: 23 },
        { left: 64, bottom: 22 }, { left: 84, bottom: 17 }
      ];

      function createFlower(leftPercent, bottomPercent, typeClass = '') {
        const flowerDiv = document.createElement('div');
        flowerDiv.className = `flower ${typeClass}`;
        flowerDiv.style.left = leftPercent + '%';
        flowerDiv.style.bottom = bottomPercent + '%';

        const stem = document.createElement('div');
        stem.className = 'stem';
        const leafLeft = document.createElement('div');
        leafLeft.className = 'leaf';
        const leafRight = document.createElement('div');
        leafRight.className = 'leaf right';
        stem.appendChild(leafLeft);
        stem.appendChild(leafRight);

        const bloom = document.createElement('div');
        bloom.className = 'bloom';
        const petalCount = 6;
        for (let i = 0; i < petalCount; i++) {
          const petal = document.createElement('div');
          petal.className = 'petal';
          const angle = (i * 60) * Math.PI / 180;
          const radius = 17;
          const x = Math.cos(angle) * radius;
          const y = Math.sin(angle) * radius;
          petal.style.transform = `translate(${x}px, ${y}px) rotate(${i * 60 + 15}deg)`;
          bloom.appendChild(petal);
        }
        const center = document.createElement('div');
        center.className = 'center';
        bloom.appendChild(center);

        flowerDiv.appendChild(stem);
        flowerDiv.appendChild(bloom);
        return flowerDiv;
      }

      flowerPositions.forEach((pos) => {
        const randomType = flowerTypes[Math.floor(Math.random() * flowerTypes.length)];
        flowerField.appendChild(createFlower(pos.left, pos.bottom, randomType));
      });

      // ---- PAPILLONS (inchangés mais avec animation) ----
      const butterfliesData = [
        { emoji: '🦋', left: 15, top: 30 },
        { emoji: '🦋', left: 42, top: 20 },
        { emoji: '🦋', left: 68, top: 25 },
        { emoji: '🦋', left: 80, top: 34 },
        { emoji: '🦋', left: 25, top: 36 },
        { emoji: '🦋', left: 55, top: 29 }
      ];

      const butterfliesElements = [];
      butterfliesData.forEach((bData, idx) => {
        const butterflySpan = document.createElement('span');
        butterflySpan.className = 'butterfly';
        butterflySpan.textContent = bData.emoji;
        butterflySpan.style.left = bData.left + '%';
        butterflySpan.style.top = bData.top + '%';
        butterflySpan.style.animationDelay = (idx * 0.15) + 's';
        butterflySpan.style.animationDuration = (2.8 + Math.random() * 2.5) + 's';
        garden.appendChild(butterflySpan);
        butterfliesElements.push({
          el: butterflySpan,
          left: bData.left,
          top: bData.top,
          speedX: 0.04 + Math.random() * 0.08,
          speedY: 0.03 + Math.random() * 0.07,
          directionX: Math.random() > 0.5 ? 1 : -1,
          directionY: Math.random() > 0.5 ? 1 : -1,
          minLeft: 2, maxLeft: 94, minTop: 10, maxTop: 48
        });
      });

      function animateButterflies() {
        butterfliesElements.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.minLeft || newLeft >= b.maxLeft) b.directionX *= -1;
          if (newTop <= b.minTop || newTop >= b.maxTop) b.directionY *= -1;
          newLeft = Math.min(b.maxLeft, Math.max(b.minLeft, newLeft));
          newTop = Math.min(b.maxTop, Math.max(b.minTop, newTop));
          b.el.style.left = newLeft + '%';
          b.el.style.top = newTop + '%';
        });
        requestAnimationFrame(animateButterflies);
      }
      animateButterflies();

      // ---- OISEAUX VOLANTS (ajoutés ici) ----
      const birdsData = [
        { emoji: '🐦', left: 8, top: 12 },
        { emoji: '🐦', left: 25, top: 6 },
        { emoji: '🐦', left: 55, top: 10 },
        { emoji: '🐦', left: 75, top: 16 },
        { emoji: '🐦', left: 88, top: 8 }
      ];

      const birdsElements = [];
      birdsData.forEach((birdInfo, index) => {
        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 = (22 + Math.floor(Math.random() * 14)) + 'px';
        garden.appendChild(birdSpan);
        birdsElements.push({
          el: birdSpan,
          left: birdInfo.left,
          top: birdInfo.top,
          speedX: 0.08 + Math.random() * 0.15,
          speedY: 0.02 + Math.random() * 0.06,
          directionX: 1,
          directionY: Math.random() > 0.5 ? 0.3 : -0.3,
          minLeft: 2, maxLeft: 96, minTop: 4, maxTop: 22
        });
      });

      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 + '%';
          
          // Légère rotation selon la direction pour effet de vol
          const rotation = b.directionX > 0 ? 5 : -5;
          b.el.style.transform = `rotate(${rotation}deg)`;
        });
        requestAnimationFrame(animateBirds);
      }
      animateBirds();

      // Interaction fleurs
      flowerField.addEventListener('click', (e) => {
        const flower = e.target.closest('.flower');
        if (flower) {
          flower.style.transform = 'scale(1.1) rotate(2deg)';
          setTimeout(() => { flower.style.transform = ''; }, 250);
        }
      });

      console.log('☀️🌤️ Jardin de jour : soleil, nuages, oiseaux et papillons !');
    })();
  </script>
</body>
</html>
Télécharger le fichier source
- Background Animé Jardin Papillons CSS JS

Explorer par mot clé

Partager

Voir aussi

Explorer par mot clé
