Для работы такой гирлянды, Вам понадобится сделать 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}
В первой же строке, укажите правильный путь к картинке, если картинка, не лежит в той же папке что и стили. Если все правильно и Вы не допустили ошибки, гирлянда замерцает в шапке сайта.
На этом все, спасибо за внимание. 🙂
