14:51 | 05.05.2024
Web-разработка
Реклама

Всплывающая jQuery CSS3 панель

Выезжающие панели с использованием jQuery. В заметке собраны несколько различных плагинов для реализации выезжающих панелей на страницах веб-сайта.

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

1. Плагин jQuery «Floater»

Плавающий блок

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

2. jQuery плагин «Slick»

Раскрывающийся блок jQuery

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

3. Всплывющая анимированная jQuery UI панель

jQuery панель

jQuery панель с содержимым, которая всплывает в заданном положении прокрутки. Плагин можно использовать для реализации контейнера с похожими статьями или товарами. Чтобы просмотреть все доступные похожие блоки на одной странице необходимо нажать на пиктограмму со стрелкой в верхнем правом углу jQuery панели. Для просмотра плагина в действии на демонстрационной странице прокрутите колесо мыши до упора вниз.

4. Всплывающая jQuery CSS3 панель

Всплывающая jQuery CSS3 панель

На демонстрационной странице нажмите на кнопку «infos» слева.

5. Выпадающие jQuery панели

Плагин jQuery

jQuery панели, выпадающие с различных сторон экрана.

6. Выезжающая Mootools панель

jQuery панель

Выпадающая сверху экрана Mootools панель.

7. Всплывающий блок

jQuery всплывающее сообщение

Сообщение появится при прокрутке страницы. Отличный плагин для привлечения внимания посетителя к какой-нибудь информации.

8. Выплывающий блок при прокрутке страницы

jQuery выплывающий блок

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