Дизайн та розробка сайту

Скрипт гирлянды

Скрипт гирлянды

Доброго времени суток. 🙂

В продолжение прошлой темы, зимне-новогоднего настроения на сайте, предлагаю Вам еще один небольшой скрипт, который разместит в самом верху страницы, мерцающую гирлянду, которая приукрасит Ваш сайт. Если Вам интересная такая задумка, пример смотрите ниже:

Скрипт гирлянды





Для работы такой гирлянды, Вам понадобится сделать 4 шага. Для начала нужно в шапку или подвал, добавить скрипт гирлянды, который будет совершать анимацию.

<script type="text/javascript">  
function garland() {  
nums = document.getElementById('nums_1').innerHTML  
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}  
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}  
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}  
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}  
}  
setInterval(function(){garland()}, 300)  
</script>

Настройки в нем минимальны. Для изменения скорости анимации измените число - 300, для увеличения или замедления. По желанию можно поменять местами цифры 1 2 3 4 в строках, тогда изменится ход анимации, по крайней мере у меня он менялся, когда я пробовал такое провернуть 🙂

Вторым шагом, нужно скачать изображение. На странице примера, нажмите правой кнопкой мыши на гирлянду и сохраните изображение - garland.png.

Третьим шагом, нужно добавить блок, который будет будущей гирляндой.

<div id="garland" class="garland_4"><div id="nums_1">1</div></div> 

Теперь перейдем к заключительному, четвертому шагу. Чтобы все заработало как надо, напоследок нужно добавить CSS стили. Откройте файл стилей и добавьте следующий код:

#garland{position:absolute;top:0;left:0;background-image:url('garland.png');height:36px;width:100%;overflow:hidden;z-index:99}  
#nums_1{padding:100px}  
.garland_1{background-position: 0 0}  
.garland_2{background-position: 0 -36px}  
.garland_3{background-position: 0 -72px}  
.garland_4{background-position: 0 -108px}

В первой же строке, укажите правильный путь к картинке, если картинка, не лежит в той же папке что и стили. Если все правильно и Вы не допустили ошибки, гирлянда замерцает в шапке сайта.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top