X
Заказать услугу

Скрипт гирлянды

Плагины и Шаблоны для Wordpress
  • 2019-03-25
  • 6349 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

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

Скрипт гирлянды



Пример

Для работы такой гирлянды, Вам понадобится сделать 4 шага. Для начала нужно в шапку или подвал, добавить скрипт гирлянды, который будет совершать анимацию.

<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()}, 300)  
</script>

Настройки в нем минимальны. Для изменения скорости анимации измените число - 300, для увеличения или замедления. По желанию можно поменять местами цифры 1 2 3 4 в строках, тогда изменится ход анимации, по крайней мере у меня он менялся, когда я пробовал такое провернуть 🙂

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

Третьим шагом, нужно добавить блок, который будет будущей гирляндой.

<div id="garland" class="garland_4"><div id="nums_1">1</div></div> 

Теперь перейдем к заключительному, четвертому шагу. Чтобы все заработало как надо, напоследок нужно добавить CSS стили. Откройте файл стилей и добавьте следующий код:

#garland{position:absolute;top:0;left:0;background-image:url('garland.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}

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 8, в среднем: 4.5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.