Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

автор Eeleidan Ср 9 Ноя - 10:51

Первое сообщение в теме :

В данной теме собираем готовые коды для украшений.
С вопросами "Как поставить", "Куда поставить", "Почему у меня не поставилось" и пр.
— пожалуйста, обращайтесь в соседнюю тему http://help.forum2x2.ru/t21957-topic

Предлагаю вниманию админов, готовящихся к зиме и Новому году несколько простых рабочих скриптов падающего снега. Чтобы установить снег, достаточно добавить один из предложенных скриптов в виджет или в описание сайта (ПА > Общие > Форум - Конфигурация).

Внимание, напоминаю: виджет должен быть добавлен во включенную колонку на главной странице! У кого с этим проблемы, читайте инструкцию: http://help.forum2x2.ru/t13044-topic

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Вариант I
Мелкий белый (не раздажающий пользователей!) снег, реалистично сдувамый ветерком:

Код:: <script type=text/javascript src=http://www.patmax.eu/J1/111109072032.js></script>

Вариант II
Такой же снег, но светло-синего цвета, для лучшей видимости на светлых форумах:

Код:: <script type=text/javascript src=http://www.patmax.eu/J1/111109073023.js></script>

Отображается в IE9 - Хроме - Мазилле - Опере.

автор Saneya Ср 19 Дек - 21:20

Благодарю за такие замечательны скрипты!!!

:thumleft:

автор Домовой Вс 23 Дек - 11:39

Вот ещё одна гирлянда из мигающих лампочек с регулировкой частоты мигания.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://i.servimg.com/u/f13/14/80/95/87/christ10.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style> <div id="garland" class="garland_4"><div id="nums_1">1</div></div>

<script type="text/javascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
}

setInterval(function(){garland()}, 400)
</script>

в самом низу скрипта значение
400
указывает на частоту мигания.
Чем меньше значение тем чаще мигают лампочки.
ДЕМО

автор Gastat Вс 24 Ноя - 9:57

Спасибо большое за скрипты! Очень помогло! Отлично просто!

автор VeraLV Вт 10 Дек - 14:13

Для установки в виджет форума.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор VeraLV Вт 10 Дек - 17:04

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Код:: <img src="http://i57.servimg.com/u/f57/16/59/70/46/90104810.gif" alt="" title="" />

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Код:: <img src="http://i57.servimg.com/u/f57/16/59/70/46/80299110.gif" alt="" title="" />

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Код:: <img src="http://i57.servimg.com/u/f57/16/59/70/46/fenste10.gif" alt="" title="" />

автор VeraLV Вт 10 Дек - 17:26

Картинка для портала

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор VeraLV Вт 10 Дек - 18:10

Вот такой снег

Код:: <script src="http://likiliks.ru/le-site/ok4.js" type="text/javascript"></script>

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор Домовой Пн 23 Дек - 16:11

Прикольный снеговик

Ставить в приветствие, в шаблон или в виджет на главной. Кому куда нравится.

Код:: <div style="position: fixed;bottom:0px; left:0px; z-index: 9999;"><script type="text/javascript" src="http://webo4ka.ru/Ucoz5/flash_detect_min_cnegovi_na_cait.js"></script><script type="text/javascript">if (FlashDetect.installed) {document.write('<scr' + 'ipt src="http://webo4ka.ru/Ucoz5/swiffy-flash_cnegovi_na_cait_webo4ka.js"></scr' + 'ipt>');}</script> </div>

ДЕМО

автор Я-ЕсмЪ Сб 28 Дек - 9:08

Вот вам ещё падающие снежинки, которые не влияют на загрузку страницы форума...
снежинки разного размера и плотности - красивые!
нашел на другом сайте и подкорректировал скрипт...

Симпатичные крупноватые снежинки разного размера и формы, что делает их более естественными. Вебмастера любят украшать свои сайты, но нужно помнить, что эти скрипты замедляют загрузку сайта, что увеличивает время открытия страницы. Надо это помнить и лучше все таки воздержаться от их использования, но, если вы хотите на новый год украсить свой сайт, то решение за Вами.

Код:: <script type="text/javascript" src="http://mogu.tv/files/site0/upload/snow.js"></script>

у меня работают сразу три скрипта, причем, один реагирует на перемещение мышки, а другой нет:

Код:: <script type="text/javascript" src="http://www.patmax.eu/J1/111109073023.js"></script> <script type="text/javascript" src="http://www.patmax.eu/J1/111109072032.js"></script> <script type="text/javascript" src="http://mogu.tv/files/site0/upload/snow.js"></script>

первый и второй можно переставлять местами и тогда цвет снежинок меняется!

Размещены все скрипты в => ПА / Оформление / Общая информация / "Приветствие на главной странице"

Когда новогодние праздники пройдут, можно не удалять скрипт, а просто закомментить код:

Код::

автор Домовой Чт 27 Ноя - 17:59

Новогодняя музыкальная открытка
Подходит для всех версий форума

В правом нижнем углу выглядывает Дед Мороз.
При наведении на него курсора рядом появляется олень кликнув на которого откроется окно с музыкальной открыткой.

Скриншоты:

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

ДЕМО

Установка
Создайте у себя на форуме HTML страницу (в продвинутом режиме HTML)
Название * : Музыкальная открытка (или своё название)
Использовать верх и низ вашего форума: НЕТ
Использовать эту страницу в качестве Главной: НЕТ

В поле Полный код страницы вставьте

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="http://dizayn.mybb.ru/files/000a/45/08/43781.css"/>
</head>
<script type="text/javascript" src="http://yourjavascript.com/458129911271/scriptjava.js"></script>
<script type="text/javascript">
$$r(function() {
$$i({
create:'script',
attribute: {
'type':'text/javascript',
'src':'http://yourjavascript.com/407212811123/musik.js'
},
insert:$$().body,
onready:function() {//выполняю только после загрузки скрипта
//запукаю из загруженного скрипта
modules.sound.start({'music': 'http://megascripts.ru/demo/ded-moroz/jingle-bells.mp3'});
$$('sound_s_el_m').$$('width','1px').$$('height','1px').$$('overflow','hidden');//эти параметры трогать не нужно
}
});
});
</script>
<body>
<div id="newyear">
<div class="newyear-sneg-layer1"></div>
<div class="newyear-sneg-layer2"></div>
<div class="newyear-pozdrava">
<!— Фон открытки -->
<style type="text/css">
#newyear{
background:url(http://ссылка на вашу картинку открытку) no-repeat top center;height:540px;
}
</style>
</div>
</div>

</body>
</html>

height:540px - высота тартинки
Сохраните.

Далее ПА - Оформление - Шаблоны - Общие настройки
Откройте шаблон overall_footer_end (Конец нижней части страницы)
В самый низ перед </body> вставьте

<a href="#" target="_blank" onClick="popupWin = window.open('http://ссылка на html страницу с открыткой',
'new_year', 'width=828, height=542, top='+((screen.height-620)/2)+',left='+((screen.width-828)/2)+',
resizable=yes, scrollbars=no, status=yes');popupWin.focus(); return false;"><div id="ded-moroz"></div></a>

width=828 - ширина окна в пикселях. Должна соответствовать ширине вашей картинки
height=542 - высота окна в пикселях. Должна быть больше высоты вашей картинки на 2px.

Сохраните и опубликуйте шаблон.

Далее в ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS вставьте код

Код:: /*музыкальная поздравлялка*/ #ded-moroz { position:fixed; background:url(http://i59.servimg.com/u/f59/14/80/95/87/ded-mo10.png) 100% 100% no-repeat; bottom:0; height:200px; width:99px; right:0; } #ded-moroz:hover { position:fixed; background:url(http://i59.servimg.com/u/f59/14/80/95/87/ded-mo11.png)100% 100% no-repeat; bottom:0; height:250px; width:220px; right:0; }

Нажмите ОК.

P.S. Код настроен на картинку размером 828px в ширину и 540px в высоту.
Рисуйте свою открытку или заказывайте специалистам.
Вставляйте ссылку на картинку и наслаждайтесь)))

Для тестирования можно воспользоваться этой картинкой

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор **Dana Domirani** Пн 1 Дек - 13:18

Напоминаю: в данной теме собираем готовые коды для украшений.

С вопросами "Как поставить", "Куда поставить", "Почему у меня не поставилось", "Как изменить" и пр. — пожалуйста, обращайтесь в соседнюю тему http://help.forum2x2.ru/t21957-topic

автор ritusik Ср 3 Дек - 21:58

не туда написала,упс scratch

автор Джек Пт 5 Дек - 21:22

Всем ребятам, разработчикам и просто выкладывающим прекрасные новогодние скрипты большое спасибо!
С Уважением Джек

автор super-kyka17@yandex.ua Чт 11 Дек - 11:55

Домовой пишет:Новогодняя гирлянда из шаров и веток. Со звуком!

Очень красивая!!! Спасибо вам большое

автор Домовой Сб 13 Дек - 11:22

Динамичная новогодняя гирлянда из шаров со звуком только при наведении на шары.
Звук на кнопках клавиатуры в этом варианте отключен.

Ставить в виджет на главной странице или в шаблон overall_header перед </head>

Код:: <link rel="stylesheet" href="http://www.patmax.eu/CSS1/121209164028.css"/> <script type="text/javascript" src="http://alieparusa.mybb.ru/files/0008/3e/ff/95088.js"></script> <script type="text/javascript" src="http://dizayn.mybb.ru/files/000a/45/08/88240.js"></script> <script type="text/javascript" src="http://dizayn.mybb.ru/files/000a/45/08/66132.js"></script>

Дополнение
В CSS

.b-page_newyear .b-head-decor{
position:fixed !important; /*фиксированное расположение*/
position:absolute !important; /*прокручивание с форумом*/
top:30px !important; /*отступ от верха*/
}

лишнее из кода удалите.
Подробней об установке смотрите в данной теме ВЫШЕ

автор Джек Вт 16 Дек - 15:54

Домовой пишет:рикольный снеговик

Мистеру Домовому решпект и уважуха! снеговик бомбезный )

автор stasbyk Вт 16 Дек - 22:38

Домовой, спасибо, друг! good

От снеговика девчонки мои в восторге)

автор VeraLV Вт 16 Дек - 22:40

У меня тормозит форум из-за джава скриптов, поэтому не ставлю снеговика. :( В прошлый раз, форум из строя вышел, торможение личных сообщений и зависание форума, пока не убрала снеговика.

автор нсиренко Ср 17 Дек - 2:51

Спасибо за украшения...

автор Домовой Ср 17 Дек - 18:07

Вот красивая гирлянда.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Ставить в шаблон overall_header перед </head>

Код:: <div style="position:absolute;left:0;top:0;height:45px;background:url(http://i39.servimg.com/u/f39/14/80/95/87/3621cb10.gif) repeat-x;width:100%;"></div>

автор Домовой Чт 18 Дек - 17:14

Очередной отсчёт до нового года

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Код::  <div style="position:absolute;left:0;top:0;"> <object type="application/x-shockwave-flash" width="200" height="170" data="http://arhangel-ok.ru/New_Year/_clock_yolka_.swf" allowFullScreen="true"><param name="movie" value="http://arhangel-ok.ru/New_Year/_clock_yolka_.swf"/><param name="wmode" value="transparent"/><param name=allowFullScreen value="true"/></object> </div>

автор VeraLV Чт 18 Дек - 17:56

нашла вот такие веточки
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
width="200" height="200"

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
width="200" height="154"

автор VeraLV Чт 18 Дек - 17:57

К белке идет вот такой код, но я не знаю насколько он совместим с этой системой.

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Код:: <div align="center"><img alt="новогодние украшения web.a.net"src="http://webanet.ucoz.ru/ng2013/ng16.gif" width="133" height="98"></div>

Гирлянда со звездочками и снеговиками

Код:: <div style="height: 100px; background: url(http://webanet.ucoz.ru/ng2013/2013-b.gif) repeat-x 100%;"></div>

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор VeraLV Чт 18 Дек - 18:04

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Вот такой код можно, поставить слева: Например, поставить в общие настройки-конфигурация-описание сайта.

Код:: <div style=position:absolute; right:70%; top:-90px;><img src=http://j-p-g.net/if/2014/12/18/0902525001418917103.png border=0 /></div>

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор VeraLV Чт 18 Дек - 18:05

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

автор Домовой Вт 23 Дек - 17:13

Задний фон форума со снегом и плавно меняющимся цветом.

Скриншот:

[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

В CSS

Код:: body { background-attachment: fixed; /*фиксированное положение фона*/ background-color:#000; /*основной цвет фона*/ background-image:url('http://i39.servimg.com/u/f39/14/80/95/87/110.png'), url('http://i39.servimg.com/u/f39/14/80/95/87/210.png'), url('http://i39.servimg.com/u/f39/14/80/95/87/310.png'); /*картинки снега*/ -webkit-animation:snow 30s linear infinite; -moz-animation:snow 30s linear infinite; -ms-animation:snow 30s linear infinite; animation:snow 30s linear infinite; } /*Keyframes*/ @keyframes snow { 0%{background-position:0px 0px, 0px 0px, 0px 0px;} 25%{background-color:#800000;} 50%{background-color:#008B00;} 75%{background-color:#00008B;} 100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/ } @-moz-keyframes snow { 0%{background-position:0px 0px, 0px 0px, 0px 0px;} 25%{background-color:#800000;} 50%{background-color:#008B00;} 75%{background-color:#00008B;} 100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/ } @-webkit-keyframes snow { 0%{background-position:0px 0px, 0px 0px, 0px 0px;} 25%{background-color:#800000;} 50%{background-color:#008B00;} 75%{background-color:#00008B;} 100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/ } @-ms-keyframes snow { 0%{background-position:0px 0px, 0px 0px, 0px 0px;} 25%{background-color:#800000;} 50%{background-color:#008B00;} 75%{background-color:#00008B;} 100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/ }

Основной цвет и завершающий должны быть одинаковыми.
Код цвета в строчках

Код:: 25%{background-color:#800000;} 50%{background-color:#008B00;} 75%{background-color:#00008B;}

можно менять на свой вкус как и основной цвет фона.

ДЕМО

Временно посмотреть в живую можно ЗДЕСЬ

Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!

Re: Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!