Добавляем новогодние снежинки на экран сайта

Скоро Новый Год и вы, как владелиц сайта, наверняка задумывались о том, что нужно немного украсить по-зимнему ваш ресурс. Сегодня я расскажу о том, как добавить новогодние снежинки, которые будут медленно падать по экрану и предавать новогоднее настроение.

Скрипт

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

Скрипт можно скачать прямо тут

knopka

 

 

 

Установка

Заходим на хостинг, в корневую папку вашего сайта. Там создаём папку с именем js, в которую копируем файл скрипта. Помните, что вы скачали архив со скриптом, который надо разархивировать.

copy

После того, как вы скопировали скрипт в папку, нужно прописать его в шапке вашего сайта между тегами

<head>...</head>

Если у вас сайт на WordPress, то скорее всего нужный файл вы найдёте в админке (Внешний вид —> Редактор) под именем Заголовок (header.php)

Screen Shot 2014-12-11 at 23.13.02

Screen Shot 2014-12-11 at 23.13.20

Если у вас интернет-магазин на Opencart, то нужный файл скорее всего вы найдёте на хостинге в диспетчере файлов по адресу

catalog/view/theme/название_вашего_шаблона/template/common/header.tpl

И так, вы открыли файл с верхней частью сайта, теперь найдите закрывающийся тег </head> и поставьте курсор прямо перед ним. После этого нажмите ENTER на клавиатуре, тем самым вы перенесёте закрывающийся тег </head> на новую строку, а на пустой строке вставьте наш скрипт снега при помощи строки ниже:

<script type="text/javascript" language="JavaScript" src="js/snow.js"></script>

В итоге у вас должно получить вот так:

Screen Shot 2014-12-11 at 23.22.26

Не забудьте сохранить файл после сделанных изменений. Переходите на свой сайт и наслаждайтесь полученным результатом, а именно — летающими снежинками по всему экрану монитора (смартфона).

Screen Shot 2014-12-11 at 23.30.59

 

Если вам необходимо изменить цвет снежинок, то откройте файл snow.js для редактирования (например в блокноте) и найдите сроку

var snowcolor=new Array("#FCFCFC","#E1E1E0","#EBEBEB","#E0E0E0","#FAFAFA")

Параметры

"#FCFCFC","#E1E1E0","#EBEBEB","#E0E0E0","#FAFAFA"

и есть цвета снежинок, заменив которые, вы получите необходимый вам цвет (можно подобрать на сайте онлайн палитры или тут попроще).

Если вы хотите заменить символ снежинок на «*» или, например, на цифру «4», то найдите строку

var snowletter="❄"

и замените значение в кавычках на то, которое вам необходимо.

 

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог. Всего хорошего и счастливого Нового Года.

end