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

Переключение вида отображения

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

80+ интересных функциональных плагинов на любой вкус.

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

jQuery портфолио

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

2. Супер реализация сайта-портфолио с использованием CSS и jQuery

Сайт-портфолио на jQuery

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

3. Стена-портфолио на jQuery

Стена-портфолио jQuery

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

4. Плавная jQuery прокрутка страниц

Плагин jQuery

Реализация вертикальной и горизонтальной прокрутки.

5. Плагин jQuery «Draggable Image Boxes Grid»

Плагин jQuery Draggable Image Boxes Grid

Перетаскиваемая сетка, состоящая из блоков с содержимым и изображений. Сетку можно перетаскивать с помощью мышки (нажать любую кнопку мыши и тянуть в нужную сторону). При клике на миниатюру основное изображение разворачивается на всю ширину экрана. При клике темный блок с текстом, раскрывается область с более подробным описанием.

6. Одностраничный сайт портфолио

Сайт портфолио

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

7. Переключение вида отображения блоков на jQuery

Переключение вида отображения

С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.

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

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

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

9. Плагин Plasm The Wall

Стена на jQuery

Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.


1

2

3

4

5

6

7

8