Живой ночной пейзаж на сайте, скрипт
Живой ночной пейзаж на сайте: месяц в углу, звёзды мерцают, прозрачные облачка плывут по тёмному небу, а трава внизу качается от ветра. Ночной вариант — тихий, спокойный, для детских сайтов и блогов.
Ниже — живой пример, код и инструкция по установке.
Что делает скрипт
- Месяц в левом верхнем углу — медленно двигается по дуге
- Звёзды по всему небу — мерцают, появляются и исчезают
- Прозрачные облачка — плывут по ночному небу
- Трава внизу — качается от ветра, тёмно-зелёная
- Небо тёмно-синее с градиентом
- Работает на телефонах, планшетах, компьютерах
- Не мешает кликам по сайту
- Не требует плагинов и сторонних библиотек
Как установить
- Скопируйте код кнопкой выше
- Откройте файл footer.php вашей темы
- Вставьте код перед закрывающим тегом </body>
- Сохраните файл
- Очистите кеш сайта
Если не хотите лезть в код темы — вставьте через кнопку ▶ RUN прямо в запись.
Где можно использовать
- Детские сайты — уместно и мило
- Блоги — оживить страницу
- Сайты про природу — атмосферно
- Лендинги — привлечь внимание
- Портфолио — показать детали
- Корпоративные сайты — добавить уюта
Часто задаваемые вопросы
Пейзаж будет мешать читать текст?
Нет. Канвас прозрачный, находится под контентом. Трава — только внизу.
Можно ли поменять скорость?
Да. В коде есть переменные для скорости звёзд, облаков и травы. Меняйте под себя.
Будет ли тормозить сайт?
Нет. Используется requestAnimationFrame и canvas. Нагрузка минимальная.
Работает ли на мобильных?
Да. Пейзаж адаптируется под размер экрана.
Можно ли поставить на все страницы?
Да. Вставьте код в footer.php темы.
Как убрать пейзаж?
Удалите код из записи или из footer.php.
Что можно докрутить
- Падающие звёзды — иногда пролетают
- Светлячки — летают над травой
- Луна — полная вместо месяца
- Туман — стелется внизу
- Кометы — редкие гости
Другие скрипты для сайта
- 🌅 Дневной пейзаж — солнце и трава
- 🐐 Красная Коза на сайт
- ⏰ Таймер до Нового года
- 👧 Снегурочка на сайт
- ❄️ Снег на сайт
- 🎄 Гирлянда на сайт
- 🎅 Дед Мороз по экрану
- 🌧️ Дождь на сайт
- ⭐ Звёзды на фон
Итог
Ночной пейзаж — месяц, звёзды, облака и трава — живой фон для сайта. Всё нарисовано кодом, работает в любом браузере, адаптируется под любой экран.
Установите — и пусть сайт оживёт ночью.
/*
* 🌙 Ночной пейзаж — месяц, звёзды, облака, трава
* Автор: Ведерников Сергей
* ИИ: Дэп — https://1promtai.ru/
*/
(function() {
'use strict';
if (window.__nightLandscapeRunning) return;
window.__nightLandscapeRunning = 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();
var stars = [];
for (var i = 0; i < 120; i++) {
stars.push({
x: Math.random(),
y: Math.random() * 0.7,
r: Math.random() * 1.8 + 0.4,
phase: Math.random() * Math.PI * 2,
speed: Math.random() * 0.8 + 0.3,
baseAlpha: Math.random() * 0.5 + 0.5
});
}
var shootingStars = [];
function spawnShootingStar() {
if (Math.random() < 0.005) {
shootingStars.push({
x: Math.random() * W,
y: Math.random() * H * 0.4,
len: Math.random() * 60 + 40,
speed: Math.random() * 8 + 6,
angle: Math.PI / 4 + (Math.random() - 0.5) * 0.3,
alpha: 1
});
}
}
var clouds = [];
for (var j = 0; j < 5; j++) {
clouds.push({
x: Math.random(),
y: Math.random() * 0.35 + 0.05,
w: Math.random() * 70 + 60,
h: Math.random() * 18 + 14,
speed: Math.random() * 0.004 + 0.002,
alpha: Math.random() * 0.15 + 0.08
});
}
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 ? '#1e7a3a' : '#155c2a'
});
}
}
makeGrass();
function drawSky() {
var skyGrad = ctx.createLinearGradient(0, 0, 0, H);
skyGrad.addColorStop(0, 'rgba(10,15,45,0.75)');
skyGrad.addColorStop(0.5, 'rgba(20,25,60,0.6)');
skyGrad.addColorStop(1, 'rgba(35,40,75,0.45)');
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 = s.baseAlpha * twinkle;
ctx.fillStyle = '#ffffff';
ctx.shadowBlur = 6;
ctx.shadowColor = 'rgba(200,220,255,0.8)';
ctx.beginPath();
ctx.arc(sx, sy, s.r, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
});
}
function drawShootingStars() {
spawnShootingStar();
for (var i = shootingStars.length - 1; i >= 0; i--) {
var s = shootingStars[i];
var dx = Math.cos(s.angle) * s.len;
var dy = Math.sin(s.angle) * s.len;
ctx.save();
ctx.globalAlpha = s.alpha;
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgba(200,220,255,0.9)';
ctx.beginPath();
ctx.moveTo(s.x, s.y);
ctx.lineTo(s.x - dx, s.y - dy);
ctx.stroke();
ctx.restore();
s.x += Math.cos(s.angle) * s.speed;
s.y += Math.sin(s.angle) * s.speed;
s.alpha -= 0.01;
if (s.alpha <= 0 || s.x > W + 100 || s.y > H) {
shootingStars.splice(i, 1);
}
}
}
function drawMoon() {
var t = performance.now() * 0.00005;
var moonX = 90 + Math.cos(t) * 20;
var moonY = 90 + Math.sin(t) * 15;
var glow = ctx.createRadialGradient(moonX, moonY, 10, moonX, moonY, 50);
glow.addColorStop(0, 'rgba(220,230,255,0.25)');
glow.addColorStop(1, 'rgba(220,230,255,0)');
ctx.fillStyle = glow;
ctx.beginPath();
ctx.arc(moonX, moonY, 50, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(moonX, moonY, 18, 0, Math.PI * 2);
ctx.fillStyle = '#e0e8ff';
ctx.fill();
ctx.beginPath();
ctx.arc(moonX + 8, moonY - 3, 16, 0, Math.PI * 2);
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
}
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 = '#8899bb';
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();
drawShootingStars();
drawClouds();
drawMoon();
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();
}
})();