Шикарный плавно падающий снежок на HTML5 Canvas — Уникальные скрипты и готовые решения для сайта

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

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставьте:

#snow_light {
height: 100%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}

#snow_light {

height: 100%;

left: 0;

pointer-events: none;

position: fixed;

top: 0;

width: 100%;

z-index: -1;

}

2#: Следующий код поместите на нужных страницах сразу после открывающего тега <body>:

<script type="text/javascript" src="/js/snow_light.js"></script>

1	<script type="text/javascript" src="/js/snow_light.js"></script>

Осталось лишь залить JS файл из прикреплённого архива в папку js

Возможно, Вам будет интересно:

Плавно падающие снежинки на HTML5 Canvas

Плавно падающие разноцветные листья на SVG и HTML5 Canvas

Чёрный пепел, падающий с раскалённых облаков на Tree…

Шикарный объёмный снег на HTML5 Canvas

Старый добрый снежок из 2007 года на jQuery

Плавно падающие фоновые осенние листья на Javascript

Шикарный плавно падающий снежок на HTML5 Canvas: 3 комментария

А можно сделать, что бы этот снег через 200px от верха экрана исчезал?

Ответить

Apocalypse:

4 декабря 2018 в 12:41

В css замени

#snow_light { height: 100%;

1
2

#snow_light {
height: 100%;

на

#snow_light { height: 200px;

1
2

#snow_light {
height: 200px;

0

Ответить
1. stalker1313:
  
  4 декабря 2018 в 20:08
  
  Я так делал, но тогда и снежинки сплющиваются
  
  0
  
  Ответить

Добавить комментарий Отменить ответ

stalker1313:

1 декабря 2018 в 19:13

А можно сделать, что бы этот снег через 200px от верха экрана исчезал?

1

Ответить
1. Apocalypse:
  
  4 декабря 2018 в 12:41
  
  В css замени
  
  #snow_light { height: 100%;
  
  1
  2
  
  #snow_light {
  height: 100%;
  
  на
  
  #snow_light { height: 200px;
  
  1
  2
  
  #snow_light {
  height: 200px;
  
  0
  
  Ответить
  1. stalker1313:
    
    4 декабря 2018 в 20:08
    
    Я так делал, но тогда и снежинки сплющиваются
    
    0
    
    Ответить

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.