Гирлянда для сайта
11966
8.8 из 10
Проголосовало: 13
Проголосовало: 13
Если Вы читаете это, значит, пора наряжать сайт к новому году. Для этого подойдет анимированная гирлянда для сайта. Не хочу предлагать вам GIF анимации, т.к. это подразумевает потеря четкости и сглаженности краев. Нет, это плохая идея. Я просто решил использовать одну картинку гирлянды в формате PNG, но на странице она будет показываться частями. С помощью скрипта мы заставим менять эти части через определенный интервал. Выглядит все это как простая, неплавная анимация. Лично мне бы и в голову не пришло, что это не GIF анимация. Все дело в сглаженности краев, скрипт используется по этой причине.
Code
<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('http://webo4ka.ru/Ucoz7/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>
<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>
#garland {position:absolute;top:0;left:0;background-image:url('http://webo4ka.ru/Ucoz7/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>
<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>
В этом блоке кода одновременно представлены и CSS, и HTML и JavaScript. Советуем использовать CSS гирлянды в отдельном файле или в том же месте, где у вас собраны остальные стили.
Наверное, скрипт можно сократить или даже сделать анимацию по-другому. Я старался не усложнять, делал, как знаю, так, чтобы работало во всех браузерах, чтобы абсолютно все пользователи ваших сайтов почувствовали праздник, чтобы все видели гирлянду.
Автор публикации: Загрузка
Загрузка
- Всего комментариев: 23
0
|
Спасибо очень прикольная все норм работает))
|
+1
|
а за что отвечает index:99
|
0
|
Слои
|
|
0
|
спустить и размер по меньше сделать все получилось вот только там одна загвоздка как мне обрезать вот эту часть ?
часть отмечена КРАСНЫМ |
|
0
|
Вот стиль замени старый, он по центру делает ее
Code #garland {margin: 0 auto;position:relative;top:47;left:0;background-image:url('http://webo4ka.ru/Ucoz7/christmas-lights.png');height:36px;width:900px;overflow:hidden;z-index:99} |
|
0
|
Все ок все поставил все работает спасибо еще раз Вадь проект Webo4ka лучший проект)
|
|
0
|
все получилось спасибо Blazer , вот только теперь еще если можешь подскажи как её обрезать и сделать по центру ?
|
|
0
|
Как понять "поиграй" ? подобрать ?
|
|
0
|
Вот что получается если в верхнюю часть ставлю....
|
|
0
|
И все же как его установить помогите чайнику )
|
0
|
а как ты сам то устанавливаешь, расскажи, а мы скажем где ошибка...)
|
|
0
|
я код вставил в верхнюю часть сайта все ок но у меня там меню и гирлянда не дает нажимать на вкладки в меню как ее можно опустить по ниже ? вот мой сайтhttp://bez-gmo.ucoz.ru/# глянь вов! хочу чтоб гирлянда была во втором блоке где новости как сделать подскажи)
|
|
0
|
нет, html документ после <body>
|
|
0
|
Вот смотри что получается если ставлю после <body>
если есть вариант подскажи как сделать там где я обвел синим |
|
+1
|
и что нетак?
|
|
0
|
Гирлянда меню вкладки закрывает и по меню не возможно нажимать....
|
-1
|
Не понял как устанавливать
|
|
+2
|
если не знаешь даже как это установить, то подумай, а зачем оно тебе это надо?
|
|
-1
|
Нужно же вставлять в CSS ?
|
|
0
|
В Верхнюю часть сайта
|
0
|
супер)))
|
-1
|
Спасибо, великолепный скрипт. БРАВО!
|
-1
|
[удалено]
|
- Оставить комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
| |  |  | |  |  |
 | |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2026 г.
- Design by Вовчик Администратор:)