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

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

irbees2008 irbees2008 Опубликовано - 31 - декабря Интерфейс
4831 - 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)
или так Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Можешь почитать и вот эту статейку "Файл robots.txt для NG CMS"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 4781 день
  • Новостей: 612
  • Комменты: 257
  • Зарегистрированно : 734
  • Онлайн всего: [13]
  • Гости: [13]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.895сек
  • Потребление памяти: 5.222 Mb 
  •   Яндекс.Метрика