Хаки и Скрипты Next Generation CMS : Интерфейс, CSS, JS : Анимированная гирлянда для сайта

irbees2008 Опубликовано - 31 - декабря Интерфейс

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Не буду предлагать вам GIF , т.к. это потеря четкости и сглаженности. просто решил использовать одну картинку гирлянды в формате PNG, но на странице она будет показываться частями. С помощью скрипта мы заставим менять эти части через определенный интервал. Выглядит все это как простая анимация.
Сам код и стили

Код:

<style type="text/css">
#garland {
position:absolute;
top:0;
left:0;
background-image:url('ваш сайт/christmas-lights.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} 
</style>

<div id="garland" class="garland_4">
<div id="nums_1">1</div>
</div>
<div style="position:absolute;top:-1000px"></div>

<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()}, 600) 
</script>

Вот сама картинка

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

Можешь почитать и вот эту статейку "Вставка видео с Ютуба"

Это тоже интересно

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