Снежинки jSnow
Анимированный настраиваемый снег на форум/сайт без CSS и HTML
Все что Вам надо, это подключить плагин:
И инициализировать его (проще говоря, запустить) кодом:
При запуске мы можем добавить некоторые настройки, например:
Настройки
flakes: 30 - Количество одновременно показываемых снежных хлопьев.
flakeMaxSize:30 - Максимальный размер снежных хлопьев в случае использования HTML-код символа, а не изображения. Этот параметр будет проигнорирован, если у вас используются картинки в качестве снежинок.
flakeMinSize:20 - Минимальный размер снежных хлопьев в случае использования HTML-код символа, а не изображения. Этот параметр будет проигнорирован, если у вас используются картинки в качестве снежинок.
flakeCode:["•"] - HTML коды хлопьев или полный путь к изображениям (или относительный или полный путь), используемых в качестве хлопьев. По умолчанию в качестве хлопьев будет используется символ • ( • ). Из переданного массива хлопьев, скрипт случайным образом выбирает и показывает снежинки.
flakeColor:["#fff","#ccc","#bbb"] - Набор цветов хлопьев. Цвет хлопьев будет случайным образом выбран из передаваемого набора цветов (только для HTML кодов снежинок).
interval:60 - Длительность цикла. Значение по умолчанию 50 (миллисекунды), что означает, что цикл анимации будет выполняться каждые 50мс (20 раз в секунду, с 1 сек = 1000 миллисекунд).Примеры
Летают разноцветные "снежинки" ("*")Летают разноцветные хлопья и снежинки
Летают снежинки картинкой
Известные баги:
Скрипт может растянуть форум/сайт по длине до бесконечности.
Чтобы исправить, добавьте в свой стиль
Красивые падающие крупные снежинки с 3D эффектом
+ кнопка остановки снега
Скрипт
настройка кнопки паузы назодятся здесь:
/* Отключалка Снежка */
if(localStorage.СнежокOff)localStorage.СнежокOff = 2;
else FORUM.СнежокStart();
$('#post-form').prepend('<div class="snowflake'+(localStorage.СнежокOff?' Off':'') +'" title="Включить/Выключить" onclick="funkOnOff(this)">Отключить снег</div>');
function funkOnOff(th){
$(th).toggleClass('Off');
var f = $(th).attr('class').indexOf('Off')!=-1;
if(f){
clearInterval(FORUM.intervalID);
localStorage.СнежокOff = 1;
$('.winternetz').remove();
}
else {
if(localStorage.СнежокOff==2){
delete localStorage.СнежокOff;
FORUM.СнежокStart();
} else {
delete localStorage.СнежокOff;
FORUM.Снежок ();
}}
}если отключение не нужно, можно вырезать весь кусок
красное - селектор, в который вставится кнопка отключения
синее - блок отключения, в него можно встроить стиль через css или вставить картинку, например:
Настраиваемый снегопад
Анимированный настраиваемый снег с отключением на мобильных
Демо: https://loktar00.github.io/JQuery-Snowfall/
Github
Скрипт:
Настройки:
flakeCount = Количество снежинок на странице (одновременно)
flakeColor = Цвет снежинок
minSize = Минимальный размер снежинки
maxSize = Максимальный размер снежинки
maxSpeed = Максимальная скорость
minSpeed = Минимальная скорость
round = Округление снежинок (значение true или false)
shadow = Тень снежинок (значение true или false)Пример настроек снега:
Снег внутри определенного элемента
можно вместо $(document) прописать селектор элемента, к которому будет назначен снег, например:
SnowFall — Анимация падающего снега
Анимированный снег для сайта на JQuery TweenMax от GreenSock
HTML
Для снега вставляем контейнер:именно в нем будет идти снег, так что, при желании ограничить область снегопада добавляем стили через #snow-animation-container
Скрипт
Подключаем библиотеку TweenMaxа также вставляем скрипт:
Настройки и CSS
Интенсивностью снега можно управлять в скрипте:MAX_SNOW = 200 — максимальное количество снежинок
MAX_SNOW_SIZE = 7 — максимальный размер снежинки в пикселях
MAX_SNOW_SPEED = 1 — ускорение снежинкиКонтейнер со снежинками может вызывать на сайте горизонтальный скролл. В этом случае вставьте в стиль:
Для MYBB и других движков, где нет доступа в html-код
Если у вас нет возможности вставить хтмл-код снега в нужное место, воспользуйтесь кодом:Красное - селектор, в который вставится код.
В данном примере мы вставляем снежинки прямо в "тело", чтобы они покрывали весь сайт/форумДля тех, у кого проблемы с высотой контейнера снега
Если у вас будут проблемы с тем, что снег идет только в верхней части сайта, а при скроллинге вниз снег "обрывается", вам поможет это CSS-решение:Красное - селектор "туловища" сайта, который НЕ должен перекрывать снег.
Этот код "растянет" контейнер со снегом и зафиксирует его на весь экран + поставит его на фон сайта/форума, чтобы не было проблем с тем, чтобы снег "перекрывал" контент.
Мелкий падающий снег
Снег крупинками, меняющий направление от прикосновения
В html верх
Падающие голубые снежинки
Ещё снежок , теперь синий , под самый изысканный дизайн
В html верх
Скрипт падающих анимированных снежинок
В html верх
настройки снега находятся здесь:
var snowletter="*";
var sinkspeed=0.6;
var snowmaxsize=40;
var snowminsize=8;
var snowingzone=1;
Падающие снежинки картинкой
Настройки находятся тут:
var snowsrc="http://www.emeraldday.com/wp-content/uploads/2012/11/%D0%A1%D0%BD%D0%B5%D0%B6%D0%B8%D0%BD%D0%BA%D0%B8-16.gif" //путь к изображению снежинки
var no = 30; //кол-во снежинок
Скрипт крупных плавно падающих снежинок
Голубые снежинки меняющие наклон падения по движению курсора
Задний фон форума со снегом и плавно меняющимся цветом
Автор: Домовой
Основной цвет и завершающий должны быть одинаковыми.
Код цвета находится в строчках:25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}Цвета можно менять на свой вкус как и основной цвет фона.
Падающие снежники на CSS
Автор: Kit Jenson
Снежок мелковат, но реализован он через гифку, так что при желании можно поставить любую анимацию снега.
Отредактировано sadhaka (18.01.13 19:14)
