Огоньки с эффектом взрыва при наведении
827материалов
228тем на форуме
3003комментария
6154пользователя

Огоньки с эффектом взрыва при наведении


Описание:
Нашел интересный ява-скриптовый спецэффект, которым под Новый Год можно украсить страницы сайта. Нет, это не доставшие всех снежинки, это ёлочная гирлянда, лампочки которой весело лопаются при наведении на них курсора мыши. Почти что пупырчатый полиэтилен :)
Посмотреть на результат работы скрипта можно на странице автора. Там же, если заглянуть в исходники, можно легко разобраться как подключить его к своей странице, но я покажу вам свою версию установки под 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://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/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 в свой файловый менеджер. На этом установка завершена. Спасибо за внимание, Всех с наступающим новым годом :)

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 27.12.2015 в 11:00
Материал просмотрен: 1271 раз
Категория материала: Новогодние скрипты
К материалу оставлены: 23 комментария

Пожаловаться
Сказать спасибо
Источник

23 комментария


darkelow
3c956ff @darkelow 18.12.2015 11:041
+5
Офигительно, а как обратно огни можно восстановить? like
ДонКот
только обновив страницу
darkelow
3c956ff @darkelow 18.12.2015 11:423
+4
Я уже понял. Еще раз спасибо за скрипт) Очень понравился
Sarafan
Sergey @Sarafan 18.12.2015 11:504
-3
А как демо посмотреть? У меня только какой-то один текст http://f1.s.qip.ru/19yBhtbJD.png
ДонКот
чистим кеш значит
Sarafan
Sergey @Sarafan 18.12.2015 11:596
+1
Спасибо, помогло
munipul
Корж Максим @munipul 18.12.2015 13:227
+3
Классная штука спасибо тебе laughing
Rita
Рита @Rita 18.12.2015 14:488
0
Отлично, а размер побольше можно сделать?
ДонКот
Да простят меня админы, если я нарушаю правила портала. Вот тут все размеры лампочек, качайте
Rita
Рита @Rita 18.12.2015 15:1911
+1
Спасибо, а как теперь картинку то изменить?
ДонКот
эм, я не буду вам советовать ковыряться в самом скрипте. Можно поступить следующим образом, из файлового менеджера удалите старую картинку и залейте нужную вам размера
Rita
Рита @Rita 18.12.2015 15:5013
+1
В папке картинки с разными именами и размерами, получается, если я хочу размер 96x96, то в коде надо
Код
.xlsf-fragment{position:absolute;background:transparent url(/christmaslights/img/bulbs-50x50-fragments.png) no-repeat 0 0;width:50px;height:50px}

поменять ссылка на картинку и изменить размеры? Так?
ДонКот
нет, в css лежит картинка самого взрыва лампочки. просто из папки img удалите картинку с именем bulbs-50x50-top.png и залейте например bulbs-96x96-top.png , скрипт сам подхватит ее
Rita
Рита @Rita 18.12.2015 15:5415
+2
Хорошо. Спасибо за помошь
ralland136
Максим @ralland136 18.12.2015 14:529
+2
Да и вправду классно, у меня такой же вопрос, как сделать по больше?
1 2 3 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта