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