Для добавления сообщения войдите или зарегистрируйтесь.
Как часто вы посещаете наш сайт?
Всего ответов: 71

                [ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Гирлянда для сайта ucoz v.1
Глава Зоны
Mapuo
Posts: 94
Денег: 12  ±
Генералиссимус
Сообщение # 1
Дата: 16 Ноя 2013 в 20:53
Если Вы читаете это, значит, пора наряжать сайт к новому году. Для этого подойдет анимированная гирлянда для сайта. Не хочу предлагать вам GIF анимации, т.к. это подразумевает потеря четкости и сглаженности краев. Нет, это плохая идея. Я просто решил использовать одну картинку гирлянды в формате PNG, но на странице она будет показываться частями. С помощью скрипта мы заставим менять эти части через определенный интервал. Выглядит все это как простая, неплавная анимация. Лично мне бы и в голову не пришло, что это не GIF анимация. Все дело в сглаженности краев, скрипт используется по этой причине.



Код гирлянды:
(вставлять перед тегом </head>)


Код
<style type="text/css">    
#garland {position:absolute;top:0;left:0;background-image:url('http://yraaa.ru/test/135/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"><a href="http://yraaa.ru/publ/7" title="шаблоны для ucoz">ucoz шаблоны</a></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>
 

Прикрепления: 6559138.png (110.6 Kb)

Теперь сила решает, кому выжить.

  • Страница 1 из 1
  • 1
Поиск:

Реклама





Изображение - savepic.net — сервис хранения изображений

Новости про Survarium, STALKER: Зов Припяти, Сталкер: Тень Чернобыля

zS-portal | Версия для мобильных | Хостинг от uCoz | Для просмотра сайта используйте Google Chrome.