ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Внимание! Объявлены спойлеры о новом проекте "Ролевой информатор" читать часть 1 и часть 2.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Анимированный падающий снег на сайт/форум

Сообщений 1 страница 10 из 41

1

Снежинки 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; //кол-во снежинок

Отредактировано sadhaka (18.01.13 19:14)

+2

2

sadhaka
поставила вверх

<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/16008.js">
<script type="text/javascript">
$(function() {
$().jSnow({flakes:15, flakeMaxSize:30, flakeMinSize:20, flakeCode:["*"], flakeColor:["#f00","#00f","#fff"],interval:60});
});
</script>

не работает,что не так?
http://legeonbleach.rolka.su/

+1

3

Нелл написал(а):

<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/16008.js">

эту часть вижу

а эту нет

Нелл написал(а):

<script type="text/javascript">
$(function() {
$().jSnow({flakes:15, flakeMaxSize:30, flakeMinSize:20, flakeCode:["*"], flakeColor:["#f00","#00f","#fff"],interval:60});
});
</script>

+1

4

sadhaka
стоит там же о.о

+1

5

Нелл
понятно, это я опечаталась, исправьте на так:

<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/16008.js"></script>
<script type="text/javascript">
$(function() {
$().jSnow({flakes:15, flakeMaxSize:30, flakeMinSize:20, flakeCode:["*"], flakeColor:["#f00","#00f","#fff"],interval:60});
});
</script>

+2

6

sadhaka
Да,теперь все нормально)

+1

7

<script type="text/javascript">
$(function() {
$().jSnow({flakes:15, flakeMaxSize:30, flakeMinSize:20, flakeCode:["http://s3.uploads.ru/t/HgV5Z.png", "http://s2.uploads.ru/t/NeZ7F.png", "http://s3.uploads.ru/t/x9BGv.png"], flakeColor:["#f00","#00f","#fff"],interval:60});
});
</script>

И этот не работает.

+1

8

А бесконечная прокрутка страницы вниз - это нормально?
http://fancyworld.mybb.ru/

+1

9

И вообще форум ползает как хочет, если крутить его зажав колесико.

+1

10

Emili de Sombre
Хм, правду, есть такое поведение в мозилле

Добавьте в свой стиль

html, body {
    position: relative;
}

Лилитана
все прекрасно работает http://skyeycat.rusff.ru/

+1