Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
Skyline (2679)
XemorDio (2473)
Strelok41 (2130)
basil [28.02.2017]
garri101 [27.02.2017]
gyurij [26.02.2017]
vlad [23.02.2017]
tolay [22.02.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Огоньки с эффектом взрыва при наведении
Огоньки с эффектом взрыва при наведении
XemorDio Дата: Суббота, 10.09.2016, 17:16 | Сообщение # 1
Группа: Админы
Сообщений: 2473
Награды: 11 Репутация: 281
Статус: Offline

Описание:
Нашел интересный ява-скриптовый спецэффект, которым под Новый Год можно украсить страницы сайта. Нет, это не доставшие всех снежинки, это ёлочная гирлянда, лампочки которой весело лопаются при наведении на них курсора мыши. Почти что пупырчатый полиэтилен :)
Посмотреть на результат работы скрипта можно на странице автора. Там же, если заглянуть в исходники, можно легко разобраться как подключить его к своей странице, но я покажу вам свою версию установки под ucoz.

Внимание!
После установки гирлянды, вам ее будет ее перекрывать админ (юзер) бар, так что придется от него отказаться на какое-то время ! Вы должны будете установить код на всех страницах, где должна отображаться гирлянда
Код
<div id="lights"></div>
<?if($ADMIN_BAR$)?><?endif?>

После праздников, вы с легкостью можете вернуть админ бар. Чтобы обратно включить вывод админбара идете в быструю замену шаблонов, в поле "Что заменить" ставите
Код
<?if($ADMIN_BAR$)?><?endif?>

Поле "На что заменить" оставляете пустым

Установка:
1. Устанавливаем скрипты в нижней части сайта:
Код
<!-- Гирлянда -->
           <script src="/christmaslights/js/soundmanager2-nodebug-jsmin.js"></script>
           <script src="http://stalker-zona.3dn.ru/ucoz/NewYear/Lights/animation-min.js"></script>
           <script src="/christmaslights/js/christmaslights.js"></script>
           <!-- /Гирлянда -->

2. Устанавливаем стили в таблице стилей css
Код
/*========== Гирлянда ==========*/
#lights{position:absolute;left:0;top:0;width:100%;height: 275px;overflow:hidden;}
body {padding-top:30px}           
.wrapper {position:relative;z-index:1}
.xlsf-light{position:absolute}
body.fast .xlsf-light{opacity:.9}
.xlsf-fragment{position:absolute;background:transparent url(/christmaslights/img/bulbs-50x50-fragments.png) no-repeat 0 0;width:50px;height:50px}
.xlsf-fragment-box{position:absolute;left:0;top:0;width:50px;height:50px;*width:100%;*height:100%;display:none}
.xlsf-cover{position:fixed;left:0;top:0;width:100%;height:100%;background:#fff;opacity:1;z-index:999;display:none}
/*========== /Гирлянда ==========*/

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

Скачать

Просьба JS скрипты залить себе на сайт.
Форум » Web-раздел » Скрипты uCoz » Огоньки с эффектом взрыва при наведении
Страница 1 из 11
Поиск:
11:52
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017