jQuery.Snowfall - реалистичный снег с эффектом скопления снежинок

72046812


Скачать [RAR] [4 КБ]

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

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

1#: После /head на нужных страницах вставьте:

Осталось лишь залить JS файл из прикреплённого архива в папку js

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

guest
17 Комментарий
Старые
Новые
Межтекстовые Отзывы
Посмотреть все комментарии
Александр
Гость
Александр
3 лет назад

Классный скрипт, автору отдельное спасибо!
А можно как-то реализовать, чтобы нажав на кнопку \"click to clear\" с последующим обновлением страницы, снег не падал? Или как добавить кнопочку \"on snow\" или \"off snow\" для включения и отключения пользователем снегопада?

0
Александр
Гость
Александр
3 лет назад
Ответить на  Apocalypse

Было бы неплохо, и скажите пожалуйста, путь картинки снежинки это \"/images/flake.png\"?
В архиве просто не было картинки, только скрипт.

0
truenerins
Редактор
truenerins
3 лет назад
Ответить на  Александр

Да, но картинка используется только в режиме (image) в остальных используется чистый css код.

0
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse

Доброго времени суток!
Сделал 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, то снег вообще отказывается идти.
Прошу помощи в решении данной проблемы.

0
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse

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

0
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse

Попробовал подставить ваш последний вариант, заметил странности: В вашем демонстративном варианте всё работает чётко, у меня же кнопка открывая варианты дальше не реагирует на клик, снег начинает идти сразу, если подсветить без снега и увести курсор кликнув на сайт снег прекращается, до следующего обновления страницы. Может я что-то где-то неправильно прописал, пытаюсь разобраться.
В данном вами варианте http://codepen.io/Imapo/pen/zNGPqb заметил, что после снега с сугробами если выбрать, \"без снега\" или \"обычный снег\", сугробы остаются лежать.

Я хочу вам показать то, что пытаюсь сделать, только не знаю как подключить скрипт, чтобы как у вас на codepen.io всё работало.

Вот мой вариант может, что подскажите: https://codepen.io/Enclave115/pen/jyPzPZ
первая кнопка: включает отключает снег, плюс работают настройки снега для первой кнопки.
вторая включает снег с накоплением сугробов, только уже без настроек, видимо по умолчанию. А если выключить снег первой кнопкой то сугроб продолжает копиться, что есть не логично)

0
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse

Вы правы, попробовал с новым скриптом, попробовал 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-ю кнопку.

Если это слишком хлопотно, то может не стоит вас \"мучать\", а то как то совестно))

0
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse
Alexander
Участник
Alexander
3 лет назад
Ответить на  Apocalypse

На данный момент у меня так: http://codepen.io/Enclave115/pen/jyPzPZ там 3 кнопки в html коде, они самые?

0
17
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x