Живой пейзаж на сайте: солнце в углу, прозрачные облачка, звёзды и трава, которая качается от ветра. Дневной вариант — светлый, тёплый, для детских сайтов и блогов.

Ниже — живой пример, код и инструкция по установке.

Что делает скрипт

• Солнце в правом верхнем углу — медленно двигается по дуге
• Прозрачные облачка — плывут по небу
• Трава внизу — качается от ветра
• Немного звёзд — мерцают в небе
• Небо меняет цвет — от голубого к тёплому
• Работает на телефонах, планшетах, компьютерах
• Не мешает кликам по сайту
• Не требует плагинов и сторонних библиотек

Как установить

1. Скопируйте код кнопкой выше
2. Откройте файл footer.php вашей темы
3. Вставьте код перед закрывающим тегом </body>
4. Сохраните файл
5. Очистите кеш сайта

Если не хотите лезть в код темы — вставьте через кнопку ▶ RUN прямо в запись.

Где можно использовать

• Детские сайты — уместно и мило
• Блоги — оживить страницу
• Сайты про природу — атмосферно
• Лендинги — привлечь внимание
• Портфолио — показать детали
• Корпоративные сайты — добавить уюта

Часто задаваемые вопросы

Пейзаж будет мешать читать текст?
Нет. Канвас прозрачный, находится под контентом. Трава — только внизу.

Можно ли поменять скорость цикла?
Да. В коде есть переменная CYCLE — сейчас 120 секунд. Меняйте под себя.

Будет ли тормозить сайт?
Нет. Используется requestAnimationFrame и canvas. Нагрузка минимальная.

Работает ли на мобильных?
Да. Пейзаж адаптируется под размер экрана.

Можно ли поставить на все страницы?
Да. Вставьте код в footer.php темы.

Как убрать пейзаж?
Удалите код из записи или из footer.php.

Что можно докрутить

• Бабочки — летают над травой
• Цветы — в траве, покачиваются
• Птицы — летают днём
• Радуга — после дождя
• Дождь — иногда идёт

Другие скрипты для сайта

• 🌙 Ночной пейзаж — солнце и трава
• 🐐 Красная Коза на сайт
• ⏰ Таймер до Нового года
• 👧 Снегурочка на сайт
• ❄️ Снег на сайт
• 🎄 Гирлянда на сайт
• 🎅 Дед Мороз по экрану
• 🌧️ Дождь на сайт
• ⭐ Звёзды на фон

Итог

Дневной пейзаж — солнце, облака, трава — живой фон для сайта. Всё нарисовано кодом, работает в любом браузере, адаптируется под любой экран.

Установите — и пусть сайт оживёт.

/*
 * 🌅 Дневной пейзаж — солнце, облака, трава
 * Автор: Ведерников Сергей
 * ИИ:    Дэп — https://1promtai.ru/
 */
(function() {
  'use strict';
  if (window.__dayLandscapeRunning) return;
  window.__dayLandscapeRunning = true;

  function init() {
    var canvas = document.createElement('canvas');
    var W = window.innerWidth;
    var H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
    canvas.style.cssText = [
      'position:fixed',
      'top:0',
      'left:0',
      'width:100%',
      'height:100%',
      'pointer-events:none',
      'z-index:1'
    ].join(';');
    canvas.setAttribute('aria-hidden', 'true');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    var start = performance.now();

    // Цикл — 120 секунд (2 минуты)
    var CYCLE = 120;

    // Звёзды (немного)
    var stars = [];
    for (var i = 0; i < 30; i++) {
      stars.push({
        x: Math.random(),
        y: Math.random() * 0.4,
        r: Math.random() * 1.5 + 0.5,
        phase: Math.random() * Math.PI * 2,
        speed: Math.random() * 0.5 + 0.3
      });
    }

    // Облака
    var clouds = [];
    for (var j = 0; j < 6; j++) {
      clouds.push({
        x: Math.random(),
        y: Math.random() * 0.3 + 0.05,
        w: Math.random() * 60 + 50,
        h: Math.random() * 15 + 12,
        speed: Math.random() * 0.005 + 0.003,
        alpha: Math.random() * 0.2 + 0.15
      });
    }

    // Трава
    var grassBlades = [];
    function makeGrass() {
      grassBlades = [];
      var count = Math.floor(W / 4);
      for (var k = 0; k < count; k++) {
        grassBlades.push({
          x: Math.random() * W,
          h: Math.random() * 18 + 12,
          w: Math.random() * 1.5 + 1,
          phase: Math.random() * Math.PI * 2,
          speed: Math.random() * 1.5 + 1,
          color: Math.random() > 0.5 ? '#4ade80' : '#22c55e'
        });
      }
    }
    makeGrass();

    function drawSky() {
      // Дневное небо — голубое, тёплое
      var skyGrad = ctx.createLinearGradient(0, 0, 0, H);
      skyGrad.addColorStop(0, 'rgba(135,206,235,0.5)');
      skyGrad.addColorStop(0.5, 'rgba(175,225,245,0.3)');
      skyGrad.addColorStop(1, 'rgba(255,240,200,0.15)');
      ctx.fillStyle = skyGrad;
      ctx.fillRect(0, 0, W, H);
    }

    function drawStars() {
      stars.forEach(function(s) {
        var sx = s.x * W;
        var sy = s.y * H;
        var twinkle = 0.5 + 0.5 * Math.sin(performance.now() * 0.001 * s.speed + s.phase);

        ctx.save();
        ctx.globalAlpha = 0.4 * twinkle;
        ctx.fillStyle = '#ffffff';
        ctx.shadowBlur = 4;
        ctx.shadowColor = 'rgba(255,255,255,0.6)';
        ctx.beginPath();
        ctx.arc(sx, sy, s.r, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      });
    }

    function drawSun() {
      // Солнце в правом верхнем углу — медленно двигается
      var t = performance.now() * 0.00005;
      var sunX = W - 90 + Math.cos(t) * 20;
      var sunY = 90 + Math.sin(t) * 15;

      // Лучи
      ctx.save();
      ctx.translate(sunX, sunY);
      for (var i = 0; i < 8; i++) {
        ctx.save();
        ctx.rotate((Math.PI / 4) * i + performance.now() * 0.0003);
        ctx.beginPath();
        ctx.moveTo(0, -18);
        ctx.lineTo(0, -26);
        ctx.strokeStyle = 'rgba(255,210,60,0.6)';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
      }
      ctx.restore();

      // Ядро
      ctx.beginPath();
      ctx.arc(sunX, sunY, 16, 0, Math.PI * 2);
      var sunGrad = ctx.createRadialGradient(sunX - 4, sunY - 4, 2, sunX, sunY, 16);
      sunGrad.addColorStop(0, '#fff3b0');
      sunGrad.addColorStop(1, '#ffb300');
      ctx.fillStyle = sunGrad;
      ctx.fill();
    }

    function drawClouds() {
      clouds.forEach(function(c) {
        c.x += c.speed * 0.01;
        if (c.x > 1.2) c.x = -0.2;

        var cx = c.x * W;
        var cy = c.y * H;

        ctx.save();
        ctx.globalAlpha = c.alpha;
        ctx.fillStyle = '#ffffff';

        ctx.beginPath();
        ctx.arc(cx - c.w * 0.3, cy, c.h * 0.6, 0, Math.PI * 2);
        ctx.arc(cx, cy - c.h * 0.3, c.h * 0.8, 0, Math.PI * 2);
        ctx.arc(cx + c.w * 0.3, cy, c.h * 0.6, 0, Math.PI * 2);
        ctx.fill();

        ctx.restore();
      });
    }

    function drawGrass() {
      var windPhase = performance.now() * 0.001;

      grassBlades.forEach(function(g) {
        var sway = Math.sin(windPhase * g.speed + g.phase) * 3;
        var baseX = g.x;
        var baseY = H;

        ctx.save();
        ctx.strokeStyle = g.color;
        ctx.lineWidth = g.w;
        ctx.lineCap = 'round';

        ctx.beginPath();
        ctx.moveTo(baseX, baseY);
        ctx.quadraticCurveTo(
          baseX + sway * 0.5, baseY - g.h * 0.5,
          baseX + sway, baseY - g.h
        );
        ctx.stroke();

        ctx.restore();
      });
    }

    function animate(now) {
      ctx.clearRect(0, 0, W, H);

      drawSky();
      drawStars();
      drawClouds();
      drawSun();
      drawGrass();

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    // Ресайз
    window.addEventListener('resize', function() {
      W = window.innerWidth;
      H = window.innerHeight;
      canvas.width = W;
      canvas.height = H;
      makeGrass();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();