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

Описание материала:

Нашел интересный ява-скриптовый спецэффект, которым под Новый Год можно украсить страницы сайта. Нет, это не доставшие всех снежинки, это ёлочная гирлянда, лампочки которой весело лопаются при наведении на них курсора мыши. Почти что пупырчатый полиэтилен :)
Посмотреть на результат работы скрипта можно на странице автора. Там же, если заглянуть в исходники, можно легко разобраться как подключить его к своей странице, но я покажу вам свою версию установки под 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 в свой файловый менеджер. На этом установка завершена. Спасибо за внимание, Всех с наступающим новым годом :)

ДЕМОНСТРАЦИЯ


Скачать ( Размер архива 154.2 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: Ромчик | Категория: Скрипты для uCoz | Просмотров: 563 | Загрузок: 26


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar