Снег на сайте – устанавливаем скрипт падающего снега

Снег на сайте – устанавливаем скрипт падающего снега

Приветствую всех своих читателей! Сегодня я расскажу Вам, как вставить снег на сайт. Удивите своих пользователей — устройте настоящую снежную бурю прямо на страницах Вашего ресурса! Данный скрипт особо популярен в преддверии Нового года. Устанавливать его, я бы советовал за 10-15 дней до наступления праздников, а после его можно и отключить.

Итак, приступим к установке падающего снега

Для начала скачайте два скрипта, которые собственно и будут делать нам снег на сайте, хотя вероятнее всего первый скрипт у Вас уже прописан (jquery.min.js и snowfall.min.jquery.js).

Создайте папку на хостинге и поместите туда эти скрипты, также не забываем их распаковать.

http://ваш-сайт.ru/папка-которую-создали/jquery.min.js
http://ваш-сайт.ru/папка-которую-создали/snowfall.min.jquery.js

Далее, откройте файл index.php Вашего шаблона и вставьте между тегами <head></head> следующий код:

 

Настройка скрипта падающего снега

jQuery(document).snowfall(); // старт
jQuery(document).snowfall({flakeCount:100, maxSpeed:10}); // опции
jQuery(document).snowfall('clear'); // стоп
flakeCount:100 // количество снежинок, много не ставьте, вызывает торможение
maxSpeed:10 // скорость падения снежинок
minSize:1 // минимальный размер снежинки
maxSize:4 // максимальный размер снежинки

Установка скрипта падающего снега

В самом низу своего документа установите эту строку

<script>
jQuery(document).ready(function(){
jQuery(document).snowfall({flakeCount:100,maxSpeed:10,minSize:1,maxSize:4});
});
</script>

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

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="snowfall.min.jquery.js"></script>
<style>
body{
background:#547f86;
font-family:"Roboto Mono";
}
h3{
color:#fff;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
font-weight:normal;
margin:10% auto 0 auto;
padding:12px;
border:2px solid #fff;
width:300px;
}
</style>
</head>
<body><h3>Эффект падения снега</h3></body>
<script>jQuery(document).ready(function(){
jQuery(document).snowfall({flakeCount:100,maxSpeed:10,minSize:1,maxSize:4});
});
</script>
</html>

Ну вот в принципе и все, теперь у Вас на сайте снегопад. Посмотреть на работающий пример можно здесь

Опубликовано: 00:03-04.04.2016

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *