Домой / Архивы с метками: js

Архивы с метками: js

Плавная навигация «Go To» на одностраничном сайте

Плавная навигация "Go To" на одностраничном сайте

Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут. Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как ... Читать далее »

Плавная навигация на странице

Плавная навигация на странице

Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока. Пример ссылки в меню на якорь блока: где #defaults это id блока div «О нас». Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML ... Читать далее »

Выезжающая панель для сайта на jQuery и CSS

Выезжающая панель для сайта на jQuery и CSS

Если вы искали как сделать выезжающую панель для сайта, тогда данный пример для вас! При клике по кнопке панель выезжает с правой стороны веб-станицы, а закрывается при нажатии на любую область страницы, кроме окна выдвигающейся панели или при нажатии на иконку закрытия в вернем углу. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Всплывающие модальные окна (popup) с помощью CSS и JS

Всплывающие модальные окна (popup) с помощью CSS и JS

Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального ... Читать далее »

Модальное окно с помощью CSS и jQuery

Модальное окно с помощью CSS и jQuery

Предлагаю вашему вниманию пример создания модального окна с помощью CSS и jQuery. Модальное окно с сообщением появляется сразу после загрузки страницы. Для закрытия окна необходимо нажать на клавиатуре клавишу Esc или кликнуть по кнопке размещенной в сообщении модального (popup) окна. Изменяя в скрипте значение можно назначить любую клавишу (или несколько клавиш) на клавиатуре для закрытия модального окна. Виртуальные коды клавиш можно узнать тут. Для работы необходимо обязательно подключить библиотеку jQuery. ... Читать далее »

Плавная навигация (прокрутка) страницы до якоря

Плавная навигация (прокрутка) страницы до якоря

В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для ... Читать далее »

Фильтрация элементов с помощью jQuery

Фильтрация элементов с помощью jQuery

В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие. Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery. Если у вас есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »

Текстовый игровой автомат

Текстовый игровой автомат

Интересный скрипт для генерации заданного текста с эффектом анимации как в игровом автомате. Поочередно задаются буквы, которые за заданное в скрипте время складываются в слово. HTML CSS JS Читать далее »