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