Эффект взрыва гирлянды при наведение
 | |
| Если хотите что то по оригинальнее сделать в новогодние дни на сайте. То вот лампочки на гирлянде, будут взрываться когда наведете клик на них. Это безусловно прибавит интерес, чем просто будут мигать, а здесь вы сами будете их разбивать, в чем и заключается момент установки. А так реально красиво будет смотреться и создавать праздничную атмосферу. Так как они сделаны красиво и очень что заметил редко повторяются, а значит почти на весь сайт по верх стоять они будут и если пользователь нечаянно затронет, то для него явно сюрприз будет. Установка: Но для начало скачаем файл и разместим его в корень сайта. Потом пропишем сам код, этот устанавливаем, там где хотите видеть. После установки гирлянды, вам ее будет ее перекрывать админ (юзер) бар, так что придется от него отказаться на какое-то время ! Вы должны будете установить код на всех страницах, где должна отображаться гирлянда Код <div id="lights"></div> <?if($ADMIN_BAR$)?><?endif?> После праздников, вы с легкостью можете вернуть админ бар. Чтобы обратно включить вывод админбара идете в быструю замену шаблонов, в поле "Что заменить" ставите Код <?if($ADMIN_BAR$)?><?endif?> Поле "На что заменить" оставляете пустым Теперь идем в низ сайта и там ставим этот скрипт. Код <!-- Гирлянда --> <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> <!-- /Гирлянда --> Но еще идут стили в 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 чтоб загрузить то что скачали. Источник и демонстрация этого скрипта вы можете посмотреть здесь. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |