1PROMTAI.RU

Мои промты для генерации изображений и музыки и т.д

Реклама

Реклама

Календарь

Июнь 2024
Пн Вт Ср Чт Пт Сб Вс
 12
3456789
10111213141516
17181920212223
24252627282930

Ява скрипт падающий снег, JS

Падающий снег по экрану. Вернее снежинки разного размера, скрипт показал или совместно создали совместно с ИИ. Очень красиво, можно украсить страницу под Новый год или на всю зиму.

<script src="https://1promtai.ru/wp-content/themes/1PROMTRU/script/sneg.js"></script>

Вот код скрипта:

// Функция для создания снежинки
function createSnowflake() {
  const snowFlake = document.createElement('div');
  snowFlake.innerHTML = '❄';
  snowFlake.style.cssText = 'color: white; font-size: ' + Math.random() * 24 + 'px; animation: fall ' + (Math.random() * 3 + 2) + 's linear infinite';
  document.body.appendChild(snowFlake);

  // Стилизация и позиционирование снежинки
  snowFlake.classList.add('snowflake');
  snowFlake.style.left = Math.random() * window.innerWidth + 'px';

  // Анимация падения
  snowFlake.style.animationName = 'fall';
  snowFlake.style.animationDuration = Math.random() * 3 + 5 + 's';
  snowFlake.style.animationTimingFunction = 'linear';
  snowFlake.style.animationIterationCount = 'infinite';

  // Удаление снежинки после падения
  setTimeout(() =&gt; {
    snowFlake.remove();
  }, 5000);
}

// Добавление анимации падения
const style = document.createElement('style');
style.innerHTML = `
  @keyframes fall {
    to {
      transform: translateY(100vh);
    }
  }
`;
document.head.appendChild(style);

// Создание снежинок каждые 100 миллисекунд
setInterval(createSnowflake, 100);

Стили

.snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    user-select: none;
    pointer-events: none;
  }

Реклама

Новые комментарии

Реклама