Главная » Файлы » Скрипты для 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
Категория: Скрипты by Apocalypse | Добавил: Apocalypse | Теги: Apocalypse, by, на, Новогодняя, JQuery, анимированной, гирляндой, ёлка, CSS3
Просмотров: 810 | Загрузок: 177 | Рейтинг: 1.0/2
Всего комментариев: 0
Имя *:
Email: