Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Анимированная гирлянда для сайта

2013-12-31 15:39:39 (читать в оригинале)

Не буду предлагать вам 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>

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

или так [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам christmas-lights.zip (17.86 Kb)[/is-logged]

Тэги: css,, интерфейс,