Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Web-социальные кнопки с п... (0)
Станция-призрак Янов. Гор... (0)
S.T.A.L.K.E.R.: Я - Призр... (0)
Блудный сын [SoC/ТЧ] (0)
Блок новых фильмов для uC... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1311)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
zvezdanutij (22.05.2019)
sksergei2379 (02.05.2019)
olegan1000 (01.05.2019)
andreianfilofev (10.04.2019)
DRO]-[ (09.04.2019)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Гирлянда для сайта
Гирлянда для сайта
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1311
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Четверг, 08.12.2016, 21:06/ Сообщение №: 1

Если Вы читаете это, значит, пора наряжать сайт к новому году. Для этого подойдет анимированная гирлянда для сайта. Не хочу предлагать вам GIF анимации, т.к. это подразумевает потеря четкости и сглаженности краев.

Нет, это плохая идея. Я просто решил использовать одну картинку гирлянды в формате PNG, но на странице она будет показываться частями. С помощью скрипта мы заставим менять эти части через определенный интервал. Выглядит все это как простая, неплавная анимация. Лично мне бы и в голову не пришло, что это не GIF анимация. Все дело в сглаженности краев, скрипт используется по этой причине.

Код гирлянды
Код
<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>
В этом блоке кода одновременно представлены и CSS, и HTML и JavaScript. Советуем использовать CSS гирлянды в отдельном файле или в том же месте, где у вас собраны остальные стили.

Наверное, скрипт можно сократить или даже сделать анимацию по-другому. Я старался не усложнять, делал, как знаю, так, чтобы работало во всех браузерах, чтобы абсолютно все пользователи ваших сайтов почувствовали праздник, чтобы все видели гирлянду.



Источник: ModStalker



Тихо на улице, пусто в квартире..Спасибо реактору №4

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Гирлянда для сайта
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-24.05.2019