Новые jQuery меню, слайдеры, слайд-шоу, галереи и другие интересные решения.Часть 17

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

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

Внимание: если вы подписаны на обнолвления в блоге, то ни когда не пропустите новую порцию плюшек. Обновления можно получать на почту, по RSS или в Twitter.

1. jQuery плагин «Fresco»

Отображение контента во всплывающм окне «Fresco»

Адаптивная галерея (масштабируется при изменении размера экрана), отображаемая во всплывающем окне с миниатюрами и подписями изображений. Еще плагин можно использовать с Zoom-эффектом для удобного просмотра больших фотографий, не помещающихся на экране, а также для просмотра видео роликов. «Fresco» корректно работает в большинстве браузеров в том числе: IE6+,Firefox 3+,Chrome 5+, Opera 9+. Бесплатная версия этого плагина может использоваться только на некоммерческих проектах.

2. Слайдер «Adaptor»

Слайдер «Adaptor»

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Проект на Github.

3. Плагин слайдера с различными эффектами «jQ-Tiles»

Плагин слайдера с различными эффектами «jQ-Tiles»

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

4. jQuery плагин «Sly»

CS3 скроллер

Плагин для реализации вертикального и горизонтального скроллера. Проект на Github.

5. Анимированное CSS3 меню «Makisu»

CS3 меню

6. Простое слайд-шоу

Простое слайд-шоу

7. Функциональный jQuery слайдер «iView Slider v2.0»

Функциональный jQuery слайдр «iView Slider»

Слайдер контента/слайдшоу (в качестве слайда может быть не только изображения, а также видео ролики и другое HTML содержимое). Для навигации можно использовать: миниатюры, кнопок Влево/Вправо и с помощью клавиатуры. Проект на Github.com.

8. Набор jQuery плагинов «Vanity»

Набор jQuery плагинов «Vanity»

В наборе 7 плагинов:  jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder и jCollapse. Набор этих решений поможет вам в реализации слайдера, всплывающих подсказок, табов, всплывающих описаний изображений и др.

9. Hover CSS3 эффект

Hover CSS3 эффект

10. CSS3 выпадающее меню

Выпадающее меню

11. iOSslider

Слайдер, работает на Ahdroid и OS

Слайдер, заточенный под работу на мобильных устройствах.

12. CSS3 индикатор загрузки

Индикатор загрузки

13. CSS3 эффект при наведении

CSS3 эффект при наведении

14. «Product Colorizer» jQuery плагин

«Product Colorizer» jQuery плагин

Плагин является легким решением для реализации просмотра продуктов в различных цветовых вариантах (актуально, например, для интернет-магазинов одежды, чтобы дать посетителям выбрать цветовую гамму товара из нескольких вариантов). Для работы плагина необходимо только два изображения для каждого продукта (все цвета будут накладываться в виде маски). Плагин работает во всех основных браузерах, включая IE7 + (будет работать и в IE6, если вы пофиксите отображение прозрачности PNG). Проект на GitHub.

15. CSS3 анимированные диаграмы

CSS3 анимированные диаграмы

16. Создание overlay-эффекта при нажатии на изображение

Описание изображения jQuery CSS

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

17. Навигация по странице в виде выпадающего меню

Содержание документа в виде выпадающего меню

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

18. CSS3 галерея с эффектом при наведении

Эффект при наведении

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

19. jQuery слайдер с Parallax эффектом

jQuery слайдер с Parallax эффектом

20. CSS3 анимация при наведении на блоки

CSS3 анимация при наведении на блоки

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

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

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

22. Бесплатная HTML5 галерея изображений «Juicebox Lite»

Бесплатная HTML5 галерея изображений «Juicebox Lite»

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

23. Плагин «JQVMap»

Плагин «JQVMap» Векторная карта мира

Интерактивная векторная карта мира с использованием jQuery. Карту можно спокойно масштабировать (как увеличивать так и уменьшать) при этом качество всех элементов не ухудшится. Также вы можете посмотреть еще парочку примеров кликалебльных карт.

24. CSS3 слайдер с Parallax-эффектом

CSS3 слайдер с Parallax-эффектом

25. jQuery галерея фотографий с миниатюрами 

jQuery галерея фотографий с миниатюрами

Адаптивная галерея, размеры изображений и миниатюр изменяются вместе с размером окна браузера.

26. jQuery плагин слайдера контента «Horinaja»

jQuery плагин слайдера контента «Horinaja»

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

27. Плагин jQuery слайдера «Pikachoose»

Плагин jQuery слайдера «Pikachoose»

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

28. Несколько пользовательских CSS стилизаций выпадающих списков 

Несколько пользовательский CSS стилизаций выпадающих списков

Пять различных стилевых оформлений выпадающих списков с использованием различных CSS техник.

29. Ресторанное меню с анимированным 3D эффектом

Анимированное ресторанное меню с 3D эффектом

Интересное CSS jQuery представление информации на странице. По нажатию на ссылку раскрывается буклет-меню и посетитель может во всплывающем окне прочитать подробнее о предоставленных блюдах. Анимация некорректно отображается в IE.

30. Плагин «Elastislide»

Плагин «Elastislide»

Реализация резиновой адаптивной карусели (вертикальная и горизонтальная карусель изображений) и галереи изображений. При уменьшении окна браузера уменьшается количество  изображений до определенного минимального значения и далее масштабируется размер оставшихся изображений. Проект на Github.

31. Свежий CSS3 jQuery слайдер «Slit Slider»

Свежий CSS3 jQuery слайдер «Slit Slider»

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

32. Новая версия 3D слайдера изображений «Slicebox»

3D слайдер изображений

Новая версия с внесенными изменениями и добавлением новых функций: теперь 3D слайдер стал масштабируемым, увидеть это можно при уменьшении окна браузера; добавлена поддержка Firefox; в описании к слайду уже можно использовать HTML контент (раньше описание подтягивалось из атрибута ссылки без возможности использовать в нем HTML теги). На демонстрационной странице можно посмотреть 4 варианта использования плагина. Последняя версия живет на Github.com.

Эффект очень похож на Flash галерею 3D CU3ER (демоскачать), только выполнен этот 3D слайдер не с помощью flash технологий, а с помощью JavaScript. 

33. jQuery плагин «PFold»

jQuery плагин «PFold»

Экспериментальное решение. Плагин реализует 3D эффект с имитацией разворачивания записки. Различные варианты исполнения: с тремя разворотами, с двумя разворотами и разворот с последующим центрированием развернутой записки.

34. jQuery плагин «Windy»

jQuery плагин «Windy»

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

35. Стильные кнопки переключения и чекбоксы

Стильные кнопки переключения и чекбоксы

Для оформления используется CSS3. На демо странице вы сможете посмотреть четыре различных стилевых оформления.

36. Эффект при наведении

Эффект при наведении CSS

Всплывающие подписи появляются при наведении курсора на круг. 7 различных стилевых оформлений. Некорректно работает в IE.

37. Галерея изображений «Photo Booth Strips With Lightbox»

Галерея изображений «Photo Booth Strips With Lightbox»

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

38. Эффект веера на CSS3 и jQuery

Эффект веера на CSS3 и jQuery

39. Интересный CSS jQuery hover-эффект при наведении

Интересный CSS jQuery hover-эффект при наведении

40. CSS3 аккордеон

CS3 аккордеон

41. Выпадающее меню, адаптированное под мобильные устройства

Выпадающее меню, адаптированное под мобильные устройства

CSS jQuery выпадающее меню. На маленьких экранах меню сворачивается в обычный выпадающий список, чтобы корректно отображаться при просмотре с мобильных устройств.

42. Всплывающие подписи к изображениям

Подписи к изображениям

Подписи, всплывающие с различными анимационными эффектами (6 эффектов) при наведении курсора на изображение. Реализовано с помощью CSS3.

43. Многоуровневое выпадающее меню, с переключением на мобильную версию

Многоуровневое выпадающее меню, с переключением на мобильную версию

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

44. CSS3 hover эффект

CSS3 hover эффект при наведении

5 различных эффектов при наведении на изображение.

45. Tooltip всплывающие подсказки на jQuey

toltip

Всплывающие текстовые подсказки при наведении на текст, на ссылку, на изображение, или на элементы HTML формы.

46. «wmuSlider» a jQuery адаптивный слайдер

 «wmuSlider» a jQuery адаптивный слайдер

Проект на Github.com.

47. jQuery плагин «ChillBox»

 jQuery плагин «ChillBox»

Еще одно решение для отображение изображений во всплывающем окне. Вы также можете посмотреть 39 похожих решений.

48. Всплывающие подсказки на jQuery «Tooltipster»

Всплывающие подсказки на jQuery «Tooltipster»

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

Также вы можете посмотреть похожие материалы:

Я буду рад видеть Вас в числе подписчиков. Получайте анонс свежих записей с блога на почтупо RSS или в Twitter.

07.11.2012
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus