Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого DIV блока. Подключив скрипт на свой сайт, — Вы получите следующий результат: HTML структура прокручивающегося div блока JS скрипт Инициализация Функция TINY.scroller.init принимает 5 параметров: id родительского DIV для контента, id DIV контента, id DIV прокрутки, id кнопки прокрутки, класс кнопки прокуртки в активном состоянии …
Сейчас мы реализуем такую вещь, как маскирование электронной почты. Требования: Логин почты должен содержать неопределённое количество символов (A-Z,a-z,0-9); После @ можно вписать любую почту (mail, gmail, yandex, rambler, корпоративный адрес и т.д.); После точки можно вписать любую доменную зону (.ru, .com и т.д.). Наша маска примет такой вид: «мойЛогин@mail.com« Реализация Мы воспользуемся библиотекой jquery.inputmask.bundle.js. Скачать …
Сегодня мы рассмотрим таймер обратного отсчета. Такие таймеры часто используются на различных продающих страницах, на лэндингах, на страницах ожидания, на страницах реконструкции сайта и т.д. ПРИМЕРЫ: Тамер в строгом стиле 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 или AdGuard и соответственно запретить ему просмотр web-сайта или какое-либо другое действие, например, скачивание файла. Не секрет, что сегодня почти у всех установлены в браузере фильтры интернет-рекламы. В некоторых браузерах, таких как Яндекс AdBlock идет уже в комплекте. Такие расширения блокируют рекламу …
Браузерами EGDE и Internet Explorer по статистике пользуется не больше 5% людей. Но иногда заказчик требует сделать его сайт кроссбраузерным. CSS хаки из интернета у меня не срабатывают, потому что я криворукий. Поэтому я использую вот такой скрипт. Размещать его следует перед закрывающим тегом head: Этот скрипт определяет, с какого браузера сидит пользователь. Если он …
Интересная анимация для текста, которая имитирует хаотичное движение пузырьков. Например, подойдет для оформления заголовков на сайте. Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение пузырьков по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. HTML разметка CSS …
Интересная анимация для текста, которая имитирует хаотичное движение конфетти. Например, подойдет для оформления заголовков на сайте по организации праздников. Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение конфетти по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. …
Интересная анимация для текста, которая имитирует хаотичное движение сердечек. Например, подойдет для оформления заголовков на сайте знакомств. Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение сердечек по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. HTML разметка …
Интересная анимация для текста, которая имитирует огонь. Например, подойдет для оформления заголовков на сайте по заказу шашлыков. Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует костер. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. HTML разметка CSS оформление body .textcontainer …
Интересная анимация для текста, которая имитирует хаотичное движение линий. Например, подойдет для оформления заголовков любом сайте. Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение линий по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. HTML разметка CSS …