Javascript & jQuery

Как попросить посетителей своего сайта отключить AdBlock

Как попросить посетителей своего сайта отключить AdBlock

Сегодня мы узнаем, как распознать факт того, что у человека присутствует включенный AdBlock или AdGuard и соответственно запретить ему просмотр web-сайта или какое-либо другое действие, например, скачивание файла. Не секрет, что сегодня почти у всех установлены в браузере фильтры интернет-рекламы. В некоторых браузерах, таких как Яндекс AdBlock идет уже в комплекте. Такие расширения блокируют рекламу в YouTube или на ваших сайтах, соответственно доход с рекламы уже не идет…


Читать дальше
Javascript & jQuery 0    148    0 0

Обратный таймер на JavaScript

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

Обратный таймер на JavaScript

Читать дальше
Javascript & jQuery 0    156    0 0

Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru

Сейчас мы реализуем такую вещь, как маскирование электронной почты.

Требования:

  • Логин почты должен содержать неопределённое количество символов (A-Z,a-z,0-9);
  • После @ можно вписать любую почту (mail, gmail, yandex, rambler, корпоративный адрес и т.д.);
  • После точки можно вписать любую доменную зону (.ru, .com и т.д.).

Наша маска примет такой вид: "мойЛогин@mail.com"

E-mail маска для ввода E-mail
Читать дальше
Javascript & jQuery 0    264    0 0

Как создать div блок с прокруткой на JS?

Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого DIV блока. Подключив скрипт на свой сайт, - Вы получите следующий результат:

Прокручивающийся DIV
Читать дальше
Javascript & jQuery 0    631    0 0

Скролинг страницы вверх и вниз по клику на кнопку

Данный скрипт позволяет плавно прокручивать страницу вверх и вниз по клику на соответствующие кнопки. Эти кнопки располагаются, для удобства, в левом нажнем углу монитора, но по желанию их можно зафиксировать в любом другом месте.

кнопки прокрутки вниз вверх

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


    
    

Читать дальше
Javascript & jQuery 0    194    0 0

Калькулятор расчета стоимости натяжных потолков на jQuery

В этой статье мы сделаем простой калькулятор на jQuery. Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.

Калькулятор на jQuery

Писать наш скрипт калькулятора мы будем на примере расчета стоимости натяжных потолков.


Читать дальше
Javascript & jQuery 0    1966    0 +1

Parallax эффект для одиночного элемента с библиотекой RELLAX

Скачиваем и подключаем библиотеку rellax.min.js

   
   

Прописываем нужному элементу класс rellax и выбираем подхоящий атрибут data-rellax-speed, от которого зависит скорость анимации.

    
Стандартная скорость
Супер быстрая скорость
Очень медленная скорость

После этого параллакс эффект должен заработать. О дополнительных настройках можно прочесть тут.

Посмотреть пример работы скрипта можно тут.


Читать дальше
Javascript & jQuery 0    159    0 0

Плавная прокрутка страницы после нажатия на якорную ссылку

Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		//отменяем стандартную обработку нажатия по ссылке
		event.preventDefault();

		//забираем идентификатор бока с атрибута href
		var id  = $(this).attr('href'),

		//узнаем высоту от начала страницы до блока на который ссылается якорь
			top = $(id).offset().top;
		
		//анимируем переход на расстояние - top за 1500 мс
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

Читать дальше
Javascript & jQuery 0    425    0 +1

jQuery анимация для сайта - эффекты появления DIV блоков


Уже давно вошло в моду применять на Landing Page анимацию появления блоков при скроллинге страницы. Если этим не злоупотреблять, то красивые эффекты помогут сделать сайт интересней.

В этом уроке мы реализуем анимацию используя jQuery плагин Revealator. Первым делом его нужно скачать и подключить:


Читать дальше
Javascript & jQuery 1    1687    0 +1