700+ эффектных jQuery Mootools CSS решений для веб-разработчиков

Предисловие

У каждого разработчика всегда есть два варианта при реализации определенного функционала в проекте: писать с нуля или взять готовое решение и проверить его реализацию на соответствие поставленным условиям. Если речь идет об очень индивидуальном решении, то тут сомнений не остается — писать самостоятельно. Но в случае, если  требуется добавить проекту фишку, которую вы уже десятки раз встречали на других сайта, полезно будет сначала взглянуть на перечень готовых решений, перед тем как с головой погружаться в изобретение своего велосипеда.

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

Почему я, потратив довольно много времени на поиск, не нашел его раньше? Ответ прост: основное хранилище подобных готовых плагинов — plugins.jquery.com, превратилось в некое подобие свалки, куда разработчики со всего мира скидывают свои детища, не всегда доведенные до ума. Поиск среди этого добра всегда занимает много времени, и при этом я ни разу (!) не смог найти подходящее решение с помощью этого каталога. Всегда для поиска приходилось пользоваться помощью более понятливых поисковых роботов Google и Yandex.

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

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

Когда количество этих заметок в блоге стало измеряться десятками, ко мне стали приходить письма от посетителей, с просьбами помочь им найти повторно тот или иной плагин, который ранее они точно видели в одной из заметок на сайте. Ничего удивительного в этом не было, так как на блоге, к сожалению, не предусмотрен механизм для удобного поиска из большого количества всевозможных скриптов (на данный момент собралось уже более 900 различных JavaScript и CSS плюшек на любой вкус). Я откликнулся на просьбы читателей и решил сделать поиск по плагинам более удобным, для чего пришлось перелопатить заново весь материал, систематизировать его, убрать устаревшие решения, почистить от битых ссылок и разбить все плагины на несколько основных категорий. В итоге у меня получился небольшой каталог с более чем 700 готовыми jQuery Mootools плагинами. Это заняло довольно много времени, но я надеюсь, что этот путеводитель поможет сэкономить ваше время при поиске необходимого решения.

Коллекция плагинов и скриптов

Эту заметку можно считать путеводителем по тем jQuery и Mootools решениям, которые были опубликованы в блоге начиная с самого первого поста и до ноября 2011 года.

Все jQuery и Mootools новинки будут как и прежде периодически публиковаться в виде подборок на блоге. Если вы хотите получать анонс на e-mail о выходе новых интересных плагинов и скриптов, пожалуйста, подписывайтесь на рассылку.

Оглавление

  1. Аккордеоны и экспандеры (19 шт)
  2. Аудио и видео плееры (11 шт)
  3. Вкладки и табы (30 шт)
  4. Всплывающие модальные и диалоговые окна (17 шт)
  5. Всплывающие описания для изображений (10 шт)
  6. Всплывающие подсказки (25 шт)
  7. Выезжающие панели (8 шт)
  8. Галереи (79 шт)
  9. Зуммеры, эффекты увеличения (14 шт)
  10. Изображения и другой медиа контент во всплывающих блоках (39 шт)
  11. Карусели, ротаторы и скроллеры (33 шт)
  12. Контактные формы (20 шт)
  13. Навигация: мега-меню (14 шт),
  14. Навигация:  меню-аккордеоны (22 шт)
  15. Навигация:  выпадающие и древовидные меню (41 шт)
  16. Навигация: анимированные меню (72 шт)
  17. Оформление кнопок, чекбоксов и других элементов интерфейса (21 шт)
  18. Плавающие блоки (4 шт)
  19. Слайдеры и слайд-шоу (100 шт)
  20. Текстовые эффекты (9 шт)
  21. Фильтры информационных блоков (8 шт)
  22. Фоновые эффекты (7 шт)
  23. Hover-эффекты, эффекты при наведении (13 шт)
  24. Другие плагины, анимированные эффекты (13 шт)
  25. Другие плагины, без категории (82 шт)

Внимание: все ссылки откроются в новом окне.

Аккордеоны и экспандеры

Аккордеоны и экспандеры

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

Аудио и видео плееры

Аудио и видео плееры

HTML5 решения для стильной реализации воспроизведения музыкальных и видео файлов на страницах сайта.

Вкладки и табы

Вкладки и табы

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

Всплывающие модальные и диалоговые окна

Всплывающие модальные и диалоговые окна

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

Всплывающие описания для изображений

Всплывающие описания для изображений

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

Всплывающие подсказки

Всплывающие подсказки

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

Выезжающие панели

Выезжающие панели

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

Галереи

Галереи

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

Зуммеры, эффекты увеличения

Зуммеры

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

Изображения и другой медиа контент во всплывающих блоках

Медиа контент во всплывающем блоке

Большая коллекция JavaScript решений для показа изображений и другого содержимого во всплывающих окнах, поверх страницы, аналоги известного всем плагина LightBox.

Карусели, ротаторы и скроллеры

Карусели и ротаторы

Функциональные jQuery плагины для реализации различных каруселей, ротаторов контента и скроллеров. Их можно использовать для эффектного отображения различной информации на сайте, например, последних новостей или рекомендуемых товаров из каталога.

Контактные формы

Формы обратной связи

Интересные стильные решения для оформления форм обратной связи на сайте с использованием CSS, jQuery и PHP: пошаговые формы, формы с проверкой правильности ввода информации «на лету», всплывающие подсказки при заполнении форм, формы с CSS3 анимированными эффектами, выезжающие формы, форма в стиле Facebook и другие решения.

Навигация: мега-меню

Мега меню

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

Навигация: меню-аккордеоны

Меню-аккордеоны

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

Навигация: выпадающие и древовидные меню

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

Навигация в виде выпадающих горизонтальных и вертикальных jQuery,Mootools,CSS меню: двухуровневые, многоуровневые выпадающие меню, древовидные меню в различном стилевом оформлении.

Навигация: анимированные меню

Анимированные меню

Плагины, которые вы сможете использовать при создании навигации в ваших проектах. Меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню, меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

Оформление кнопок, чекбоксов и других элементов интерфейса

Оформление кнопок, чекбоксов

Решения для потрясного оформления элементов пользовательского интерфейса: кнопки, чекбоксы, радиокнопки, оформление форм.

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

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

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

Слайдеры и слайд-шоу

Слайдеры и слайд-шоу

Огромная коллекция jQuery Mootools CSS плагинов и скриптов для реализации интересных слайдеров изображений и слайд-шоу на ваших сайтах: с автоматической и ручной сменой слайдов, с текстовым описанием слайдов и без него, слайдеры фоновых изображений, с миниатюрами и без них, круговые сладеры, 3D слайдеры, огромное количество самых разнообразных анимированных эффектов перехода между изображениями.

Текстовые эффекты

Текстовые эффекты

Различные текстовые эффекты: градиенты, масштабирование текста, эффекты при наведении, размытие, свечение, переливание, отражение и другие приемы.

Фильтры информационных блоков

Фильтрация блоков

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

Фоновые эффекты

Фоновые эффекты

Плагины для реализации фоновых эффектов: масштабируемые фоновые изображения, эффект движения фоновых слоев, hover-эффект.

Hover-эффекты, эффекты при наведении

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

Несколько интересных hover-эффектов (эффекты при наведении курсора) с использованием jQuery: смена изображений и анимированные эффекты.

Анимированные эффекты

Анимированные эффекты

Решения для реализации различной анимации на веб-страницах с использованием jQuery.

Плагины без категории

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

Большая коллекция различных jQuery Mootools CSS решений, которые трудно отнести к какой-либо одной категории. В заметке представлены: различная реализация страниц-портфолио и других сайтов, плавные прокрутки страниц, эффектное отображение различных элементов, интересные анимационные эффекты, множество Ajax решений, опросы и голосования, игры, диаграммы, индикаторы загрузки, путеводители по сайту и многое других самых разных плагинов и скриптов.

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

Всего хорошего, Ефимов Виктор.

01.12.2011
top


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