Свежие jQuery CSS полезности для веб-разработчика. Часть 2

Свежая коллекция jQuery CSS плагинов и скриптов.16 классных решений: меню, галереи, слайдеры, слайд-шоу, плавающие блоки, шаблоны с применением jQuery технологий и много других полезных вещей. Многие из представленных плагинов были созданы совсем недавно в 2011 году. Скачивайте, настраивайте и используйте в своих проектах.

Внимание: страницы с демонстрацией плагинов откроются в новом окне, ссылки для скачивания исходников — прямые. Чтобы не пропустить появление свежих записей в блоге — подпишитесь на e-mail рассылку или RSS ленту. 

1. Потрясное слайд-шоу jQuery «Skitter»

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

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

Элементы на странице, например, изображения или блоки DIV, появляются и исчезают по диагонали.

3. jQuery галерея

Плагин галереи изображений на jQuery.

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

Слайд-шоу с кнопками навигации.

5. CSS3/HTML меню сайта

CSS3 + HTML меню виде ленты без использования скриптов.

6. Контактная форма в стиле старой печатной машинки

7. Шаблон для каталога музыки с использованием jQuery

Шаблон с использованием jQuery для сайтов музыкальной тематики. На главной странице отображается альбом в виде пластинки, используя стрелки можно переключаться между альбомами. При нажатии на изображение альбома открывается страница с описанием пластинки. В страницу с описанием интегрирован аудио плеер jPlayer, с помощью которого можно прослушать несколько песен либо отрывков из выбранного альбома. Чтобы вернуться к списку альбомов, необходимо нажать на ссылку «Go Back».

8. Шаблон для сайта ресторана с jQuery галереей и картой от Google

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

9. Легкий профессиональный JavaScript CSS3 слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

10. Многоуровневое выпадающее JavaScript меню «TinyDropdown2»

11. Настраиваемый HTML5 аудио-плеер «Speakker»

Легко настраивается внешний вид плеера. Плеер доступен в двух вариантах: компактном и развернутом. В развернутом варианте пользователь может управлять плейлистом.

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

jQuery слайд-шоу с миниатюрами.

13. Плавающий блок jQuery «Sticky Sidebar»

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

14. jQuery плагин «jRumble»

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

15. jQuery плагин «ImageLens»

Эффект увеличительной лупы при наведении курсора мыши на изображение. Реализовано с помощью jQuery.

16. jQuery плагин «Backstretch»

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

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

Смотрите также:

Внимание: чтобы не пропустить появление свежих записей в блоге — подпишитесь на e-mail рассылку или RSS ленту.