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

js blinking - 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);
	}

});

Читайте также

Похожие записи

Скрипт идущего времени на jQuery
Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу. Пример:...
Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *