JS - создаем эффект мигания. Мигающие баннеры в HTML

Раздел: JavaScript, HTML/CSS
JS - создаем эффект мигания. Мигающие баннеры в HTML


В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для этого нам понадобится базовый jQuery и любой DIV-элемент, на который необходимо повесить эффект мигания.

javascript



Создаем файл с любым названием в формате *.js и подключаем на страницу следующей строкой. Также не забудьте подключить jQuery над этой строкой, если она у вас до этого не была подключена.

 <script src="script.js"></script>


В файл помещаем следующий код

$(document).ready(function() {

      //миллисекунды зацикливания вызова функции ниже
	setInterval (blinke_funk, 150);

	function blinke_funk() { 
		var blinke_speed = 150; //миллисекунды анимации

		$("#div_block1").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block2").fadeIn(blinke_speed).fadeOut(blinke_speed);
	}

});


Если у вас уже открыт $document.ready(), то дополнительно его открывать нет никакого смысла, просто поместите данный код внутрь имеющегося без первой и последней (со скобками) строками.

Логика


Создаем функцию в которой находим интересующий нас элемент на странице и задаем ему еще две функции — затухание и появление. Ставим им задержку в 150 миллисекунд, которую, для удобства выносим в отдельную переменную.

Задаем правило SetInterval, которое повторяет эту функцию каждые 150 миллисекунд.

HTML\CSS



В разметку элемента, который необходимо анимировать добавляем id="div_block1".

<div class="ban_h" id="div_block1"></div>


Неприятные особенности



Данный скрипт работает по принципу первого попавшегося элемента... Это значит, что если у вас на странице два и более блока с id div_block1, мигать будет только то, что находится выше. Скрипт его найдет и на этом поиск закончится. Для добавления блока используйте новый класс.

DIV ID можно заменить на DIV CLASS заменив решетку на точку. Для добавления нового блока в анимацию добавляем новый объект в jquery, где просто изменяем название id блока.

$(document).ready(function() {

	setInterval (blinke_funk, 150);

	function blinke_funk() { 
		var blinke_speed = 150;

		$("#div_block1").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block2").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block3").fadeIn(blinke_speed).fadeOut(blinke_speed);

		// в HTML добавить <div class="div_block4">
		$(".div_block4").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$(".div_block5").fadeIn(blinke_speed).fadeOut(blinke_speed);
	}

});


Понравилась статья "JS - создаем эффект мигания. Мигающие баннеры в HTML" из раздела JavaScript, HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 543   Дата: 06-июн-2017, 02:46

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика