Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 31 - декабря Интерфейс
2877 - 0
  • Адаптировал: 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>

Вот сама картинка
christmas-lights.png (17.72 Kb)
или так Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Можешь почитать и вот эту статейку "Таблицы"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [11]
  • Гости: [11]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.154сек
  • Потребление памяти: 4.956 Mb 
  •   яндекс.ћетрика