Рубрика «Javascript & jQuery»

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

Уже давно вошло в моду применять на Landing Page анимацию появления блоков при скроллинге страницы. Если этим не злоупотреблять, то красивые эффекты помогут сделать сайт интересней. В этом уроке мы реализуем анимацию используя jQuery плагин Revealator. Первым делом его нужно скачать и подключить: Скачать плагин Revealator Теперь осталось обернуть наши div блоки в нужный класс. …

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

Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с Вами поправим. Структура меню с якорными ссылками Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока …

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

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

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

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

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

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

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

Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого DIV блока. Подключив скрипт на свой сайт, — Вы получите следующий результат: HTML структура прокручивающегося div блока JS скрипт Инициализация Функция TINY.scroller.init принимает 5 параметров: id родительского DIV для контента, id DIV контента, id DIV прокрутки, id кнопки прокрутки, класс кнопки прокуртки в активном состоянии …

Как сделать маску для ввода E-mail типа ▶ [email protected]

Сейчас мы реализуем такую вещь, как маскирование электронной почты. Требования: Логин почты должен содержать неопределённое количество символов (A-Z,a-z,0-9); После @ можно вписать любую почту (mail, gmail, yandex, rambler, корпоративный адрес и т.д.); После точки можно вписать любую доменную зону (.ru, .com и т.д.). Наша маска примет такой вид: «мойЛогин@mail.com« Реализация Мы воспользуемся библиотекой jquery.inputmask.bundle.js. Скачать …

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

Сегодня мы рассмотрим таймер обратного отсчета. Такие таймеры часто используются на различных продающих страницах, на лэндингах, на страницах ожидания, на страницах реконструкции сайта и т.д. ПРИМЕРЫ: Тамер в строгом стиле HTML разметка CSS оформление body{font:normal 13px/20px Arial,Helvetica,sans-serif;word-wrap:break-word;color:#eee;background:#353535} #countdown{width:465px;height:112px;text-align:center;background:#222;background-image:-webkit-linear-gradient(top,#222,#333,#333,#222);background-image:-moz-linear-gradient(top,#222,#333,#333,#222);background-image:-ms-linear-gradient(top,#222,#333,#333,#222);background-image:-o-linear-gradient(top,#222,#333,#333,#222);border:1px solid #111;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.6);margin:auto;padding:24px 0;position:absolute;top:0;bottom:0;left:0;right:0} #countdown:before{content:»»;width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-left-radius:6px;border-bottom-left-radius:6px;display:block;position:absolute;top:48px;left:-10px} #countdown:after{content:»»;width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-right-radius:6px;border-bottom-right-radius:6px;display:block;position:absolute;top:48px;right:-10px} #countdown #tiles{position:relative;z-index:1} #countdown #tiles > …

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

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

CSS файлы для браузеров EDGE и IE

Браузерами EGDE и Internet Explorer по статистике пользуется не больше 5% людей. Но иногда заказчик требует сделать его сайт кроссбраузерным. CSS хаки из интернета у меня не срабатывают, потому что я криворукий. Поэтому я использую вот такой скрипт. Размещать его следует перед закрывающим тегом head: Этот скрипт определяет, с какого браузера сидит пользователь. Если он …