Набор различных MooTools и jQuery красивостей для реализации на вашем сайте

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

Внимание: все ссылки с демонстрацией скриптов откроются в новом окне, ссылки для скачивания исходников — прямые.

1. Превосходное CSS3 слайд-шоу на jQuery

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

2. Плагин для демонстрации продукта в стиле Apple

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

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

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

4. Реализация портфолио с использованием jQuery галереи

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

5. Смена изображении при наведении курсора мыши с использованием jQuery

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

6. jQuery плагин «Rating System»

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

7. MooTools плагин «LightFace» для реализации диалоговых окон Facebook

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

8. MooTools меню с изображениями

MooTools анимированное разъезжающее меню.

9. MooTools древовидный список

10. MooTools древовидный список

Скачать можно на странице загрузки, там же есть и описание плагина. Страница на русском языке.

11. MooTools плагин «ImageDrawer»

Интересные анимированные эффекты смены изображений.

12. MooTools 3D карусель «Moo3DCarousel»

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

13. MooTools плагин «StaticScroller»

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

14. MooTools плагин «Zoomer»

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

Вы можете посмотреть похожие заметки: