jQuery.Snowfall - реалистичный снег с эффектом скопления снежинок
Очень интересный снег для вашего сайта. Отличительная особенность - снежинкам можно задать параметр скапливания и тогда, через некоторое время на блоках вашего сайта появятся небольшие сугробы
Для начала посмотрите ДЕМО
Моё тестирование в фидле: КЛИК
Установка:
Перед закрывающим тегом </head> на нужных страницах вставьте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="/js/snowfall.jquery.js"></script> <script> $(document).ready(function () { $(document).snowfall({ flakeCount: 25, // Количество снежинок flakeColor: '#ffffff', // Цвет снежинок flakeIndex: 999999, // z-index снежинок minSize: 1, // Минимальный размер снежинки maxSize: 2, // Максимальный размер снежинки minSpeed: 1, // Минимальная скорость снежинки maxSpeed: 5, // Максимальная скорость снежинки round: false, // Закруглённые снежинки (true/false) shadow: false, // С тенью (true/false) collection: false, // Накапливаются ли снизу, образуя сугробы (true/false) collectionHeight: 500, // Количество накапливаемого снега deviceorientation: true // Подстраиваться ли под устройство }); }); </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
Классный скрипт, автору отдельное спасибо!
А можно как-то реализовать, чтобы нажав на кнопку \"click to clear\" с последующим обновлением страницы, снег не падал? Или как добавить кнопочку \"on snow\" или \"off snow\" для включения и отключения пользователем снегопада?
Могу сделать такое, если нужно
Было бы неплохо, и скажите пожалуйста, путь картинки снежинки это \"/images/flake.png\"?
В архиве просто не было картинки, только скрипт.
Да, но картинка используется только в режиме (image) в остальных используется чистый css код.
http://codepen.io/Imapo/pen/WRbppN - вот решение
Доброго времени суток!
Сделал 2 кнопки: снег и снегопад с параметрами: <pre>input type=\"image\" src=\"http://...\" \"name=\"button\" id=\"aposnow\" value=\"snow\" class=\"snow\"</pre> Вторая кнопка с аналогичными параметрами кроме: <pre>id=\"collection\" value=\"Snow Collection\" class=\"snowfall\"</pre>
В Header(е) на главной странице прописан скрипт:<pre><script src=\'http://sunduchokpirata2.ru/js/snowfall.jquery.min.js\'></script>
<script type=\"text/javascript\">
$(function() {
var aps = $(\'#aposnow\');
if (!localStorage.getItem(\'nosnow\')) {
setsnow();
aps.val(\'Выключить снег\');
} else {
aps.val(\'Включить снег\');
}
aps.click(function() {
if (localStorage.getItem(\'nosnow\')) {
setsnow();
localStorage.removeItem(\'nosnow\');
aps.val(\'Выключить снег\');
} else {
localStorage.setItem(\'nosnow\', 1);
aps.val(\'Включить снег\');
$(\'div.snowfall-flakes\').remove();
};
});
});
function setsnow() {
$(document).snowfall({
flakeCount: 70, // Количество снежинок
flakeColor: \'#ffffff\', // Цвет снежинок
flakeIndex: 999999, // z-index снежинок
minSize: 2, // Минимальный размер снежинки
maxSize: 5, // Максимальный размер снежинки
minSpeed: 1, // Минимальная скорость снежинки
maxSpeed: 3, // Максимальная скорость снежинки
round: true, // Закруглённые снежинки (true/false)
shadow: false, // С тенью (true/false)
collection: false, // Накапливаются ли снизу, образуя сугробы (true/false)
collectionHeight: 100, // Количество накапливаемого снега
deviceorientation: true // Подстраиваться ли под устройство
});
}
</script></pre>
Первая кнопка работает как часы) А вторая отказывается копить сугробы!
Если в настройках прописать collection: true, то снег вообще отказывается идти.
Прошу помощи в решении данной проблемы.
Завтра сделаю другой вариант
Спасибо! Просто хочу 2 кнопки с настройками, одна просто снег, а вторая снегопад с накоплением сугробов, ну и чтоб при повторном нажатии на кнопку выключалось если не нужен снег.
Сделал вот такой вариант: http://codepen.io/Imapo/pen/zNGPqb
Попробовал подставить ваш последний вариант, заметил странности: В вашем демонстративном варианте всё работает чётко, у меня же кнопка открывая варианты дальше не реагирует на клик, снег начинает идти сразу, если подсветить без снега и увести курсор кликнув на сайт снег прекращается, до следующего обновления страницы. Может я что-то где-то неправильно прописал, пытаюсь разобраться.
В данном вами варианте http://codepen.io/Imapo/pen/zNGPqb заметил, что после снега с сугробами если выбрать, \"без снега\" или \"обычный снег\", сугробы остаются лежать.
Я хочу вам показать то, что пытаюсь сделать, только не знаю как подключить скрипт, чтобы как у вас на codepen.io всё работало.
Вот мой вариант может, что подскажите: https://codepen.io/Enclave115/pen/jyPzPZ
первая кнопка: включает отключает снег, плюс работают настройки снега для первой кнопки.
вторая включает снег с накоплением сугробов, только уже без настроек, видимо по умолчанию. А если выключить снег первой кнопкой то сугроб продолжает копиться, что есть не логично)
http://codepen.io/Imapo/pen/PWPYJo
Вообще предлагаю сделать три кнопки (Третья - выключить снег), так как не каждый догадается, что первая кнопка ещё и отключать снег умеет
Вы правы, попробовал с новым скриптом, попробовал 3-ю кнопку поставить, только запутался какие параметры в кнопки прописать, отказывается выключать снег.
<div class=\"activesnow\"><input type=\"image\" src=\"http://sunduchokpirata.ru/img/winter/snow3.png\" name=\"button\" id=\"activesnow\" value=\"\" class=\"\" title=\"\"></div>
Если рассуждать логично: Пользователь зашёл - снег идёт, страницу обновляет или ползает по сайту снег идёт.
Нажимает на кнопку снегопад, снега больше и скапливается на \"дивных\" блоках, страницу обновляет снегопад продолжается. 3-я кнопка должна выключить снег вообще и очистить от уже скопившихся сугробов, при обновлении страницы снег не идёт, пока заного не нажмём 1-ю или 2-ю кнопку.
Если это слишком хлопотно, то может не стоит вас \"мучать\", а то как то совестно))
Просто дай ссылку на две картинки: неактивная кнопка "выключить снег" и активная кнопка "выключить снег"
Оно? 1-я кнопка (http://sunduchokpirata.ru/img/winter/snow2.png)
2-я кнопка (http://sunduchokpirata.ru/img/winter/snow33.png)
Нет, нужна третья кнопка-картинка, которая покажет пользователю, что можно вообще выключить снег
На данный момент у меня так: http://codepen.io/Enclave115/pen/jyPzPZ там 3 кнопки в html коде, они самые?
Не знаю, нужно щас это или уже нет, но вот финальный вариант с тремя кнопками: http://codepen.io/Imapo/pen/PWPYJo
Почему то когда включаю накапливание снега, оно не работает, все остальное работает норм
Для блоков, на которых нужны сугробы, нужно добавить класс collectonme
У меня на сайте "свой" снег, я его иногда изменяю, он интерактивный, реагирует на клик мыши.
Тоже неплохо 🙂
А вот ещё снег - http://vvl99.narod.ru
Чередуется по дням старый и новый снег, в новом есть ветер.