Главная » Файлы » Скрипты для uCoz » Скрипты by Apocalypse |
Новогодняя ёлка с анимированной гирляндой на jQuery и CSS3 by Apocalypse
[ Скачать с сервера (221.3 Kb) ] | 16.11.14, 21:36:39 |
Было скучно и это я сделал небольшой скриптик и css стилизацию, которые создают эффект перемигивания лампочек гирлянды на картинке новогодней ёлочки Для начала посмотрите ДЕМО Установка: В самый низ вашего css вставляйте: Код .apoelka2014 { width: 360px; height: 400px; position: absolute; z-index: 1; background: url(/img/apoelka2014.png) no-repeat; } .apolight { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 170, 170, 0.7); box-shadow: 0px 0px 10px #ffe8e8; margin-top: 52px; margin-left: 180px; position: absolute; opacity:0; z-index: 2; } .apolight2 { background: rgba(239, 255, 0, 0.7); box-shadow: 0px 0px 10px #FFFFFF; margin-top: 88px; margin-left: 204px; } .apolight3 { width: 25px; height: 25px; background: rgba(239, 255, 0, 0.7); box-shadow: 0px 0px 10px #FFFFFF; margin-top: 142px; margin-left: 160px; } .apolight4 { width: 25px; height: 25px; margin-top: 157px; margin-left: 128px; } .apolight5 { width: 25px; height: 25px; margin-top: 222px; margin-left: 193px; } .apolight6 { width: 25px; height: 25px; background: rgba(239, 255, 0, 0.7); box-shadow: 0px 0px 10px #FFFFFF; margin-top: 246px; margin-left: 223px; } .apolight7 { width: 20px; height: 20px; margin-top: 286px; margin-left: 50px; } .apolight8 { width: 21px; height: 21px; margin-top: 290px; margin-left: 129px; } .apolight9 { width: 21px; height: 21px; margin-top: 302px; margin-left: 273px; } .apolight10 { width: 25px; height: 25px; background: rgba(239, 255, 0, 0.7); box-shadow: 0px 0px 10px #FFFFFF; margin-top: 308px; margin-left: 88px; } Следующий код вставляйте в то место, где должна быть ёлочка: Код <div class="apoelka2014"> <div class="apolight apolight1"></div> <div class="apolight apolight2"></div> <div class="apolight apolight3"></div> <div class="apolight apolight4"></div> <div class="apolight apolight5"></div> <div class="apolight apolight6"></div> <div class="apolight apolight7"></div> <div class="apolight apolight8"></div> <div class="apolight apolight9"></div> <div class="apolight apolight10"></div> </div> <script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Разработка Apo-uCoz.com (c) 2014 $(document).ready(function () { $('div.apolight').each(function () { var th = $(this); setInterval(function () { th.stop().fadeTo(getRandomInt(100, 500), 1).fadeTo(getRandomInt(100, 500), 0); }, getRandomInt(1000, 5000)); }); }); </script> Картинку из прикреплённого архива залейте в папку img Вы можете как угодно модифицировать ёлочку при условии соблюдения авторства apo-ucoz Материал разработан и подготовлен Apocalypse | |
Просмотров: 1042 | Загрузок: 299 | |
Всего комментариев: 0 | |
| |