Stratum.js: jQuery Masonry Grid библиотека
Stratum.js - это небольшой плагин jQuery для создания потрясающей каменной сетки.
Макет сетки с эффектом наведения курсора и предварительным просмотром содержимого
Сегодня мы хотели бы поделиться с вами небольшой сеткой. Мы используем CSS Grid и забавный эффект наведения на элементы сетки, которые состоят из разных произвольно размещенных элементов. При щелчке по элементу мы скользим по оверлею предварительного просмотра содержимого и анимируем элементы сетки и элементы предварительного просмотра внутрь. Для анимации мы используем TweenMax от Greensock.
jQuery - Facebook, YouTube, Vimeo, Twitter, Instagram Social Stream Grid
- Адаптивные макеты дизайна.
- 6 доступных стилей
- Встроенное всплывающее окно для чтения в соцсетях
- Всплывающее окно только для встроенных изображений
- Настраиваемая компоновка столбцов
- Пользовательский цвет фона и цвет фона при наведении
- Схема Fitrow и каменной кладки
- Показать больше Разбивка на страницы
- Мультифильтрация
- Значок социальной публикации для каждого сообщения во всплывающем окне
- 60+ анимационных эффектов
Плагин jQuery для сетки изображений
Сетка изображений - это плагин jQuery для создания отзывчивой галереи изображений с возможностью просмотра всех в модальном окне.
Mp-Mansory.js: jQuery Mansory Gallery с использованием Bootstrap
Плагин jQuery для создания частных галерей с использованием bootstrap grid-system.
Изометрические и трехмерные сетки с CSS3
Сегодня мы хотели бы поделиться с вами некоторыми стилями изометрической сетки. Вдохновение исходит от веб-сайта Hotchkiss, где показана изометрическая прокручиваемая сетка с некоторыми классными эффектами наведения. В нашем первом эксперименте мы создали прокручиваемую сетку, точно такую же, как на этом сайте, с некоторыми эффектами наведения, которые включают случайное вращение. Вторая демонстрация демонстрирует некоторые идеи для «статических» сеток, которые нельзя прокручивать, но которые служат скорее декоративным целям.
Mikado Grid Gallery для WordPress
Mikado - это галерея изображений WordPress, основанная на случайных сетках с множеством функций. Он адаптивный, и изображения будут адаптироваться с красивой и плавной анимацией при изменении размера браузера. Вам просто нужно выбрать ширину (также процент) и высоту, и Mikado создаст случайную сетку внутри прямоугольника. Возможности:
- Полностью адаптивный и гибкий макет;
- Динамические фильтры и фильтрация анимации
- Размер галереи, ширина и высота. Ширина может быть указана в процентах, поэтому идеально подходит для адаптивных сайтов;
- Маржа между изображениями;
- 5 лайтбоксов;
- виджет WordPress;
- Несколько галерей на одной странице;
- Отлично подходит для мобильных устройств и планшетов;
jstiles: плагин jQuery Animated Tiles
Это плагин jQuery, который работает вместе с Bootstrap и помогает создавать красивые плитки. Как плагин jQuery - Bootstrap, чтобы использовать jsTiles, вы должны включить в свой проект как jQuery, так и Bootstrap. Вы также должны включить замедление jQuery, чтобы анимация выполнялась плавно.
Сетка продуктов с возможностью фильтрации с помощью jQuery и CSS3
Адаптивный макет сетки продукта с удобными для касания галереями Flickity и функциональностью фильтров на основе изотопов. Этот Blueprint представляет собой отзывчивый макет сетки продукта на основе изотопов, где каждый элемент сетки представляет собой слайдер Flickity image. Небольшая анимация значка корзины указывает на то, что товар был добавлен в корзину. Фильтр продукта использует функцию фильтра изотопов. Некоторые примеры медиа-запросов используются, чтобы показать, как сделать макет адаптивным.
Pinto: плагин jQuery Grid Layout
Pinto.js - это легкий и настраиваемый плагин jQuery для создания интересного, например, адаптивного макета сетки. Pinto.js предназначен для простоты использования и полностью развертывается за считанные минуты. Уменьшенная версия имеет размер менее 1 КБ.
- легкий (уменьшенная версия меньше 1 КБ)
- поддержка автоматического изменения размера
- ширина жидкого элемента
- анимация (переход CSS3)
Gridify: создание сетки в стиле Pinterest с помощью jQuery
Легкий скрипт для создания сетки в стиле Pinterest с использованием JQuery, чистого javascript или YUI с загруженным изображением Возможности
- поддержка события загрузки изображения
- событие изменения размера окна поддержки
- поддержка очень длинного элемента высоты
- поддержка ширины динамического элемента
- поддержка анимации (переход CSS3)
Адаптивные блоки одинаковой высоты с jQuery и CSS3
Он фактически разделяет список на строки, выбирает высоту самого высокого элемента в каждой строке и устанавливает ее для других соответствующих элементов строки. Самое главное, это должно быть сделано отзывчивым способом.
gridscrolling.js: плагин jQuery для верстки вашей статьи HTML5
Макет статей HTML5, размещение разделов и сторон в сетке, позволяющий легко перемещаться с помощью клавиш курсора.
Gridlock: адаптивная система сеток CSS
Gridlock - это адаптивная сеточная система CSS. Gridlock работает путем вложения «ячеек» в «строки». Ячейки определяются классами, которые устанавливают ширину в определенных точках останова. Точки останова соответствуют общим размерам экрана. По умолчанию Gridlock отображает 3 столбца на мобильных устройствах, 6 столбцов на планшете и 12 столбцов на мобильных устройствах.
Post Revolution - удивительный конструктор сеток для WP
Post Revolution - мощный плагин jQuery для WordPress, позволяющий создавать неограниченное количество макетов сетки сообщений и размещать предварительные просмотры лайтбоксов. Вы можете выбрать один из 27 уже включенных потрясающих макетов. Наслаждайтесь Post Revolution и преобразите свой сайт благодаря бесконечным настройкам: сетки, загрузчики, подписи, отрывки и предварительный просмотр. Возможности:
- 27 предустановленных настроек
- Бесконечные настройки
- Полностью отзывчивый
- 3 типа сетки
- 11 загрузчиков сетки
- Выбор нескольких категорий
- Установка лимита сообщений
- 8 стилей отображения сетки
- Готовы все шрифты Google
- Параметры эскизов
- Параметры выдержки
- Параметры субтитров
- Параметры предварительного просмотра
- Навигатор пользовательских предустановок
- Макет шорткода на странице
Создайте динамическую сетку с помощью Salvattore и Bootstrap
Salvattore позиционирует себя как альтернативу jQuery Masonry с одним важным отличием: он использует конфигурацию CSS вместо JavaScript. Эти виды сеток можно увидеть по всему Интернету, вероятно, наиболее популярно на Pinterest. Сегодня мы будем использовать Salvattore в сочетании с Twitter Bootstrap 3, чтобы создать потрясающую плавную сеточную структуру.
Плагин jQuery Hover Grid
Простой и легкий плагин jQuery для создания сетки изображений, при наведении которой появляется подпись.
BrickWork: плагин jQuery для создания динамических макетов
BrickWork - это отзывчивый плагин jQuery для создания динамических макетов. Основная цель - создать лучшие и наиболее настраиваемые плагины динамических макетов.
Magnet - плагин jQuery для фильтруемых макетов
Magnet - это плагин jQuery для создания фильтруемых макетов. Разработанный, чтобы быть максимально простым, Magnet легко инициализировать и настроить. Все дополнено обширной документацией с фрагментами кода и примерами.
Плагин Essential Grid для WordPress
Essential Grid - это плагин премиум-класса для WordPress, который позволяет отображать различные форматы контента в настраиваемой сетке. Возможные приложения варьируются от портфолио, блогов, галерей, магазинов WooCommerce, таблиц цен, услуг, слайдеров продуктов, отзывов и всего, что вы можете себе представить.
MixItUp 2: jQuery Animated Filtering & Sorting Plugin
MixItUp - это плагин jQuery, обеспечивающий анимированную фильтрацию и сортировку. MixItUp отлично подходит для управления любым категоризированным или упорядоченным контентом, таким как портфолио, галереи и блоги, но также может функционировать как мощный инструмент для взаимодействия с пользовательским интерфейсом приложения и визуализации данных. MixItUp отлично сочетается с существующим HTML и CSS, что делает его отличным выбором для адаптивные макеты. Вместо того, чтобы использовать абсолютное позиционирование для управления макетом, MixItUp предназначен для работы с существующим встроенным макетом. Хотите использовать проценты, медиа-запросы, встроенный блок или даже гибкий блок? Без проблем!
MagicWall: плагин jQuery Responsive Image Grid
MagicWall - это плагин jQuery для создания сетки изображений, которая циклически перебирает набор изображений с использованием привлекательной анимации с определенным интервалом времени. Вы можете использовать этот плагин для создания декоративного элемента вашего сайта, демонстрации вашей работы или просто использовать его как красивый анимированный фон. Плагин MagicWall преобразует список изображений в сетку с определенным количеством строк и столбцов. Остальные изображения появятся с разной анимацией и задержками. Возможности:
- Адаптивная сетка
- Аппаратное ускорение
- Макет полной ширины
- Полноэкранный макет
- Полностью настраиваемый
- 22 Анимации
- Файлы Sass включены
- Маленький размер файла
Эластичные столбцы: плагин jQuery Grid
Elastic Columns - это плагин jQuery, который был разработан для использования в качестве альтернативы известной библиотеке Isotope. Этот плагин легкий и подойдет вам, если вы хотите построить сетку элементов, используя столбцы одинаковой ширины.
CSS3 3D-эффект сетки
Сегодня мы хотели бы поделиться с вами небольшой концепцией анимации. Это воссоздание эффекта, который мы заметили в этом фантастическом прототипе приложения Маркуса Эккерта. Идея состоит в том, чтобы повернуть элемент сетки в 3D, развернуть его в полноэкранный режим и показать некоторый контент. Для нашей попытки имитировать поведение приложения мы создали две демонстрации. В первом мы вращаем элемент сетки по вертикали, а во втором - по горизонтали.
Галерея Google Grid с CSS3 и JavaScript
Адаптивная сетка Masonry с видом галереи с использованием 3D-преобразований. На основе галереи из Руководства Google по началу работы с Chromebook. Этот Blueprint представляет собой адаптивную сеточную галерею, основанную на галерее Google для руководства по началу работы с Chromebook. В этом Blueprint мы используем Masonry для сетки и 3D-преобразования для навигации по элементам. Для небольших экранов у нас есть несколько примеров медиа-запросов, которые регулируют макет сетки, а также вид галереи.
JavaScript Grids: плагин jQuery для создания контейнеров и сеток одинаковой высоты
Простой плагин jQuery, позволяющий пользователям создавать контейнеры и сетки одинаковой высоты с помощью JavaScript, где CSS2 не может.
Инструментарий: Инструментарий Front-End UI, созданный с помощью HTML5, CSS3, jQuery.
Titon Toolkit - это набор очень мощных компонентов пользовательского интерфейса и служебных классов для адаптивного, мобильного и современного Интернета. Каждый компонент представляет инкапсулированные функции HTML, CSS и JavaScript для элементов страницы, зависящих от ролей. Toolkit использует новейшие и лучшие технологии. Сюда входят HTML5 для семантики, CSS3 для анимации и стилей, Sass для предварительной обработки CSS, Grunt для управления задачами и пакетами, а также новые мощные API-интерфейсы браузера для уровня JavaScript.
Воссоздание эффекта загрузки сетки «Дизайн Samsung»
Учебное пособие о том, как добиться эффекта загрузки сетки, представленное на сайте «Дизайн Samsung». Эффект покажет, как цветной элемент сначала скользит, а затем снова выдвигается, открывая изображение.
jQuery Gridmanager: построение строк и сеток
jQuery GridManager - это способ построения строк и сеток со встроенными редактируемыми областями. Требуется jQuery, jQueryUI, Bootstrap 3.x и необязательный TinyMCE или CKEditor.
Grid Accordion - отзывчивый плагин jQuery для WordPress
Grid Accordion - это полностью отзывчивый плагин WordPress с сенсорным экраном, который сочетает в себе функции сетки и аккордеона, предлагая современный и привлекательный пользовательский интерфейс. Возможности:
- Полностью отзывчивый - автоматический или настраиваемый отклик.
- С сенсорным экраном: проведите пальцем по экрану и коснитесь экрана мобильного устройства, перетащите мышь на рабочий стол.
- Динамический контент - загружайте изображения и контент из сообщений, галерей и Flickr.
- Автоматические обновления - обновляйте плагин прямо из панели управления.
- Кеширование - экземпляры сетки автоматически кэшируются для сокращения времени загрузки.
- Анимированные слои: слои можно настроить так, чтобы они отображались, когда панель открыта, когда она закрыта, или постоянно.
- Retina-ready - укажите версию Retina для каждого изображения панели.
- Ленивая загрузка - загружайте изображения только тогда, когда они просматриваются.
jQuery tile.js: Самый легкий плагин jQuery для плиток
jquery.tile.js - это самый легкий плагин jQuery для плитки.
Плагин jQuery Awesome Grid Layout
Awesome Grid - это плагин jQuery, который позволяет отображать адаптивный макет сетки, сложенный друг над другом в строки и столбцы.
DYSANIA - плагин jQuery для адаптивной галереи сеток WordPress
- Полностью адаптивный макет
- Действительный HTML5 - CSS3 - JQuery
- Неограниченное количество галерей и фильтров. Неограниченное количество галереи и меню фильтров можно добавить к любому сообщению или странице.
- Простая в использовании, удобная админ-панель
- Широкие возможности настройки! Все цвета, шрифты, выравнивание, значки, анимацию наведения можно изменить в настройках плагина.
- Доступны типы элементов фото, видео и галереи ссылок.
- 6 разных стилей палитры
- 1,2,3,4,5 варианты расположения столбцов
- Подходит для всех тем
- Комбинация сеток
- 4 варианта разрешения миниатюр
- Генератор шорткодов галереи
- Пользовательский виджет
- И многое другое…
Griddy: плагин Simple Grid Overlay для jQuery
Griddy - это небольшой плагин JQuery, который создает простую настраиваемую сетку поверх любого элемента. Он также может автоматически рассчитывать высоту строк и ширину столбцов на основе количества строк / столбцов и промежутка между желобами.
Галерея изображений сетки в стиле Google+ с использованием jQuery
Основное внимание в этой статье будет уделено сетке изображений. Давайте начнем с рассмотрения функций исходной сетки изображений G +, чтобы узнать, что нужно для ее воссоздания. Чтобы проиллюстрировать возможности, я использую Галерею Thomas Hawk's G +, в которой есть несколько потрясающих изображений (проверьте это).
шампанское.js: плагин jQuery для рандомизации отображения в сетке
Плагин jQuery для рандомизации отображения объектов в сетке.
jPhotoGrid - масштабируемая галерея изображений jQuery
Почти все стили для этого плагина выполнены в CSS. Уловка состоит в том, чтобы разметить сетку, перемещая элементы списка. Первое, что сделает плагин, это все это преобразует в абсолютно позиционированные.
jQuery Panel Magic - макет панели для небольших сайтов
Плагин jQuery Panel Magic - это новый подход к навигации по веб-сайтам. Используя макет в виде матрицы или сетки для своего веб-сайта, вы можете легко реализовать этот плагин для небольших веб-сайтов и веб-приложений. Плагин предоставляет вам уникальный способ «панелизации» веб-сайта.
Замечательный плагин jQuery для создания волшебных макетов - Isotope
Isotope - это впечатляющий плагин jQuery, который позволяет нам сортировать элементы и создавать интеллектуальные макеты. Используя плагин, любой заданный список элементов может быть отфильтрован с помощью эффектов отображения / скрытия, и их можно переупорядочить с помощью гладкой анимации. очень мощный. С помощью простой функции элементы можно преобразовать в горизонтальные / вертикальные макеты или разумно расположить в сетке и многое другое. И все это с красивой анимацией.
Галерея B&W Box jQuery с демонстрацией
Мы создали небольшую галерею jQuery, которая играет с черно-белыми версиями изображений. Идея состоит в том, чтобы иметь начальное представление в виде сетки для различных категорий или альбомов. На заднем плане мы видим черно-белую версию текущего изображения зависшего альбома.
Wookmark: плагин jQuery Grid Layout с демонстрацией
Wookmark - это бесплатный плагин jQuery для создания динамических макетов и макетов с несколькими столбцами. Этот плагин jQuery динамически создает блоки произвольной высоты, он определяет размер окна и автоматически организует блоки в столбцы примерно одинаковой высоты.
Сетка перетаскиваемых окон jQuery
Сегодня мы хотим создать шаблон с полноэкранной сеткой изображений и областей содержимого. Идея состоит в том, чтобы иметь перетаскиваемую сетку, в которой отображаются блоки миниатюр и элементы, подобные меню. После щелчка миниатюра развернется до полноразмерного изображения, а поле пункта меню расширится до полноэкранной области содержимого.
Расширение портфолио полноэкранных сеток в jQuery
Сегодня мы хотим поделиться с вами аккуратным экспериментальным шаблоном портфолио. Основная идея состоит в том, чтобы иметь макет сетки, который мы создаем с помощью jQuery Masonry. Нажимая, чтобы просмотреть больше, мы разворачиваем соответствующий элемент в полноэкранный режим, чтобы показать более подробное описание элемента и типичное полноэкранное фоновое изображение.
Галерея изображений с произвольным вращением jQuery - Mosaiqy
Mosaiqy - это плагин jQuery для представления изображений в интерфейсе сетки, похожем на мозаику. Изображения отображаются внутри случайно движущихся столбцов и строк, где для анимации используются переходы CSS3. При щелчке по миниатюре исходная версия загружается в сетку с приятный эффект слайд-входа / выхода. Он извлекает изображения из источника данных JSON / JSONP, что упрощает интеграцию со службами хостинга изображений, и уже есть демонстрации для Flickr, Instagram и Panoramio.
Плагин JQuery Animated Grid
Этот анимированный Grid-плагин совместим с Mozilla Firefox, Safari, IE8 / IE7, Google Chrome и позволяет полностью контролировать деградацию, если JavaScript отключен.
Создание галереи изображений в виде сетки с пересекающимися светлыми областями с помощью jQuery и CSS.
В этой галерее изображений я хотел создать эффект пересекающихся линий, чтобы выделить выбранное изображение в сетке, как перекрестие. Я использовал различную непрозрачность изображений по горизонтали от текущего изображения и по вертикали над или под изображением, чтобы добиться этого эффекта. В этой галерее используется jQuery Masonry для достижения анимированного эффекта изменения размера сетки.
Эффекты навигации по сетке с помощью jQuery
Сегодня мы хотим поделиться некоторыми изящными эффектами навигации по сетке с использованием jQuery. В наших примерах мы покажем вам десять способов навигации по набору эскизов. Мы рассмотрим некоторые возможности и способы применения эффекта.
Система управления шаблонами перетаскивания с помощью JQuery
Я занимаюсь разработкой системы управления шаблоном (пользовательским интерфейсом) с поддержкой панели перетаскивания для моего будущего проекта. В этом посте я хочу объяснить, как проектировать таблицы базы данных и реализовать удобство использования перетаскивания сеток с помощью плагина jqueryUI. Используя эту систему, ваш веб-проект докажет выбор для конечного пользователя, он сможет управлять своим собственным шаблоном интерфейса. Взгляните на живую демонстрацию
jQuery Masonry: библиотека каскадных сеток
Masonry - это плагин верстки для jQuery. Думайте об этом как об оборотной стороне CSS-поплавков. В то время как плавающий размещает элементы горизонтально, а затем вертикально, Masonry размещает элементы вертикально, а затем горизонтально в соответствии с сеткой. В результате минимизируются вертикальные зазоры между элементами разной высоты, как если бы каменщик вставлял камни в стену.
Гибкая навигация jQuery Metro
Гибкая навигация jQuery Metro - это минималистичный чистый макет сетки, вдохновленный новым интерфейсом Windows 8. Его можно настроить так, чтобы он располагался горизонтально или вертикально. Его можно прокручивать и перетаскивать одновременно, и он содержит полезные скользящие элементы управления. Иконки можно менять, имеется большая коллекция. Возможности:
- Ориентацию макета можно настроить с помощью простого атрибута класса
- Возможность прокрутки и перетаскивания с помощью событий мыши и касания (совместимо с iPad)
- Кнопки управления для перемещения влево, вправо, вверх и вниз по области сетки
- Автоматическое изменение размера в зависимости от области просмотра браузера
- Хорошо документировано + бесплатная поддержка + бесплатные обновления
Сетка анимированного адаптивного изображения jQuery
Плагин jQuery для создания адаптивной сетки изображений, которая будет переключать изображения с использованием различных анимаций и таймингов. Это может прекрасно работать в качестве фона или декоративного элемента веб-сайта, поскольку мы можем рандомизировать появление новых изображений и их переходы. Идея состоит в том, чтобы иметь список изображений и определять количество столбцов и строк, которые будут размещать изображения в сетка. Остальные изображения появятся с разной анимацией и задержками. С помощью некоторых параметров изменения размера мы можем определить, как сетка должна быть выложена для разной ширины экрана. Этот вид компонентов может прекрасно работать в качестве фона или декоративного элемента веб-сайта, поскольку мы можем рандомизировать появление новых изображений и их переходы.
gridster.js: плагин jQuery для создания интуитивно понятных перетаскиваемых макетов
Gridster - это плагин jQuery, который позволяет создавать интуитивно понятные перетаскиваемые макеты из элементов, охватывающих несколько столбцов. Вы даже можете динамически добавлять и удалять элементы из сетки.
jSquares - коллаж изображения, подобный ted.com.
jSquares - это плагин jQuery, который отображает изображение и описание в оверлее при наведении курсора. Это в основном идентично сетке изображений на www.ted.com. Прекрасно работает в IE6 +, FF 3+, Safari 3+ и Opera 10.
Слайдер для переворачивания портфолио с использованием jQuery и CSS3
Есть много способов отображения нашего портфолио, один из них - использование стиля сетки с эффектом слайдера для нумерации страниц. В этом уроке я расскажу, как отобразить сетку нашего портфолио с эффектом переворачивающегося ползунка для разбивки на страницы с помощью jQuery и CSS3 Transform. Ползунок будет менять изображения нашего портфолио при переворачивании, этот эффект перелистывания запускается при нажатии пользователем на разбивке на страницы. Поэтому, когда пользователь щелкает страницу, каждое из изображений нашего портфолио будет переворачиваться на 360 градусов, а когда его анимация приближается к концу, изображение будет заменено новым изображением. Мы создадим четыре эффекта переворота, которые будут использоваться для анимации, а именно: горизонтальное левое направление, горизонтальное правое направление, вертикальное верхнее направление и вертикальное нижнее направление. Эти эффекты будут выбираться случайным образом при отображении изображения.
jQuery Dynamic Grid: галерея XML
С помощью Dynamic Grid: XML Gallery вы можете создать желаемую галерею изображений. Скрипт дает вам огромный контроль над макетом и анимацией, а возможности безграничны. Буквально бесконечно - скрипт достаточно умен, чтобы генерировать уникальные макеты каждый раз при запуске, что означает уникальный опыт для ваших посетителей при каждой загрузке страницы. С движком Dynamic Grid у вас есть возможность создать именно тот макет, который вам нужен. А если вы не знаете, что вам нужно, скрипт поставляется с надежными настройками по умолчанию, которые создают красивый и случайный макет при каждой загрузке страницы!
Адаптивный макет 3D панели в jQuery и CSS3
Сегодня мы хотим поделиться с вами креативным макетом сетки. Макет будет содержать слайды, каждый из которых состоит из четырех панелей. Во время навигации по ним мы будем анимировать некоторые разделительные линии («сетку»), регулируя размер панелей следующего слайда. Панели появятся с 3D-эффектом, который мы определим для каждой панели. Обратите внимание, что это очень экспериментально. Он будет работать только в тех браузерах, которые поддерживают используемые здесь новые свойства CSS. Он был протестирован в последних версиях Safari, Chrome, Safari Mobile и Firefox (хотя и не так гладко).
Динамическая сетка jQuery: движок
Dynamic Grid - это плагин jQuery для создания анимированной, отзывчивой и красивой сетки для вашего контента - будь то изображения, новостная лента, текст и т. д. С помощью некоторых сложных алгоритмов скрипт заполняет сетку ячейками со (необязательно) случайной высотой при каждой загрузке страницы, тем самым давая виджету уникальный макет каждый раз, когда кто-то загружает вашу страницу! Кроме того, алгоритм достаточно умен, чтобы ячейки не были слишком большими для общего размера виджета. Это означает, что в любой момент времени нет ячейки, которая отображается или скрывается только частично. Он просто работает так, как должен! Количество вариантов:
- Число столбцов
- Количество рядов
- Случайная / фиксированная высота ячеек
- Отступы между столбцами
- Жидкость / фиксированная ширина
- Высота
- Ослабляющий эффект
- Скорость анимации
- Интервал анимации
Создание переключателя представления списка / сетки с помощью jQuery
Довольно распространенной функцией веб-интерфейса является переключатель динамического просмотра. На страницах продуктов или в архивах блогов иногда можно встретить кнопки для изменения макета со списков отображения на более мелкие сетки. В этом руководстве я построил более простой пример, используя базовый CSS и несколько команд jQuery. Я буду использовать элементы интерфейса из набора Zephirro E-Commerce UI Set, которые включают кнопки и эскизы фотографий. Не стесняйтесь продемонстрировать код самостоятельно и опробовать аналогичный опыт на своем собственном веб-сайте. Этот эффект сложно определить, но, если все сделано правильно, вашим пользователям понравится уникальный опыт. Это руководство должно дать вам четкое введение в управление макетами страниц с помощью jQuery. Даже простое действие по смешиванию классов и идентификаторов может значительно улучшить взаимодействие с пользователем.
Gamma Gallery: эксперимент с галереей адаптивных изображений jQuery
Gamma Gallery - это экспериментальная адаптивная галерея изображений, которая пытается предоставить настраиваемый подход к адаптивным изображениям с учетом ее макета сетки и полного представления слайд-шоу. Gamma Gallery использует Masonry Дэвида Дэвида ДеСандро в плавном режиме, где номера столбцов определяются в зависимости от контейнера сетки размеры.
Grid-A-Licious: адаптивная сетка для jQuery
Я создал плагин jQuery. Я назвал его Grid-A-Licious и описал его так: «Div размещаются в хронологическом порядке с помощью специальной сетки», потому что я понятия не имел, как это лучше объяснить. Сегодня этот эффект макета плавающей сетки является широко используется в сети, и существует множество различных вариантов сценария, которые можно загрузить и использовать. Некоторые более популярны, чем другие, но все они работают лучше, чем Grid-A-Licious.
xSquare: слайдер адаптивного изображения в html5 / jquery
xSquare - это отзывчивый слайдер изображений jQuery. Он имеет макет, который состоит из сеток, что делает его полезным для различных позиций веб-страниц. Хотя основная цель слайдера изображений заключается в позиции баннера, его можно легко реализовать в виде галереи изображений или чего-то подобного, потому что он совместим с лайтбоксом, prettyPhoto и т. Д. Загрузка изображений выполняется с помощью smart lazyLoad со встроенным загрузчиком. Эффективные скользящие переходы делают слайдер более динамичным. Ползунок адаптивного изображения xSquare дает вам возможность разместить до 7 изображений на одном слайде или разместить одну эффективно нарезанную фотографию.
Flex: гибкий асимметричный плагин jQuery Animated Grid
Плагин гибкой асимметричной анимированной сетки для jQuery.Flex - это идея, вдохновленная старой домашней страницей Flash на Adidas.com. Поиск в Google чего-либо, напоминающего этот эффект, привел меня к нескольким похожим, но не одинаковым плагинам. Видел, как один человек сказал, что это «совершенно невозможно», и подумал, что это будет забавная задача.
Плагин jQuery Shuffling Tiles
Вдохновленный пошаговыми движениями танца в случайном порядке и новым внешним видом пользовательского интерфейса Metro, Shuffling Tiles сочетает в себе элементы обоих, а также некоторых других, создавая универсальный, анимированный и компактный виджет веб-страницы. Используйте его, когда у вас есть много информации, которую вы хотите уместить на небольшой площади, и вы хотите представить ее живым, оригинальным и интерактивным способом. Плагин имеет множество параметров настройки, в том числе настройку:
- разные скорости и типы анимации
- размеры плитки по ширине, высоте и набивке
- макет сетки, с возможностью выбора до 4 различных стилей, а также от того, является ли макет фиксированным или адаптивным
- количество плиток, от 1 до 6
jquery.vgrid: макет сетки переменных плагина jQuery
Я попытался представить разметку переменной сетки, используя jquery.vgrid.js на базе jQuery. Самый простой тип из семи образцов ul, размеченных с помощью «Разметки переменной сетки». «Я попытался разместить эскиз темы на следующих страницах.
Галерея клипов: jQuery Clip Animation Photo Gallery
ClipGallery - это новый способ показать свои фотографии. В сочетании с jQuery и плагином ClipFX он помещает ваши фотографии в сетку, и когда мышь перемещается по «большим пальцам», они расширяются в полный размер.
MelonHTML5: Галерея 3D-кубов в Html5, jQuery и CSS3
Это гибкая и легко интегрируемая фотогалерея, написанная на HTML5, CSS3 и jQuery. Функции:
- Анимация 3D-куба (Chrome, Safari, Firefox, IE10)
- Автоматическое создание миниатюр
- Уникальный предварительный просмотр анимированных миниатюр
- Сетка или пользовательский макет
- Лайтбокс
- Навигация
- Управление с клавиатуры
- 3 Анимации
- Слайд-шоу
uSquare - Универсальная адаптивная сетка html5 / jquery
uSquare - это гибкая квадратная сетка, которая может отображать ваш контент уникальным и интересным образом. Вы можете использовать его для отображения членов команды, продуктов, услуг, дизайнов, сообщений в блогах или всего, что вам приходит в голову. В наш предварительный просмотр мы включили 3 модификации исходного файла, чтобы вы могли увидеть, как uSquare может служить вашим целям. Разрабатывая плагин адаптивной сетки uSquare, мы тщательно продумали его адаптивный макет. Мы хотели убедиться, что все элементы видимы и доступны при любом разрешении для адаптивного макета.
Metro - портфолио jQuery для WordPress Grid
METRO - WordPress Grid Portfolio, плагин WordPress, который показывает ваше портфолио в интерактивном режиме. Вы можете отображать одну галерею, все галереи в категории и все галереи из нескольких категорий. Кроме того, плагин поддерживает: настраиваемый размер изображения (в процентах), настраиваемую ссылку, видео, SoundCloud, элемент пользовательского интерфейса Metro, неограниченное количество цветов и многое другое. Возможности:
- Полностью отзывчивый
- Загрузить больше (неограниченное количество предметов)
- Видео поддержка
- Поддержка SoundCloud
- Пользовательская ссылка
- Метро
- Неограниченное количество цветов
- Умный цвет при наведении
- Номер начальной загрузки
- Макс Загрузить еще номер
- Простое перетаскивание админки
- Фильтруемое портфолио
- Дисплей: одна галерея, одна категория, несколько категорий
- Клавиша навигации для лайтбокса (стрелка влево / вправо и Esc)
Klax - отзывчивая команда jQuery, портфолио, сеть продуктов
Продемонстрируйте свою работу, членов команды, портфолио или что-нибудь еще в удивительной и креативной форме. Klax - это многофункциональный плагин jQuery, который отображает ваш контент на веб-странице и предлагает все, что вам когда-либо понадобится, чтобы представить свои элементы клиенту. Вы можете установить количество элементов, отображаемых на странице, и создать свой собственный дизайн с помощью этого члена команды, плагина JS портфолио.
Анимация для сеток эскизов с помощью CSS3 и JavaScript
Сегодня мы хотели бы поделиться с вами красивой анимацией миниатюр в виде сетки. Когда дело доходит до такого рода эффектов, существует множество возможностей, но не все из них хорошо подходят при применении к нескольким элементам, таким как сетка изображений. Здесь не так много места, и мы должны учитывать порядок расположения элементов, чтобы эффекты выглядели красиво. Интересно то, что мы можем играть с задержками, усиливая удовольствие от просмотра всего этого. Мы можем применять задержки не только по порядку, но и случайным образом или в обратном порядке.
freewall: плагин jQuery для создания динамического макета сетки
Freewall - это гибкий кроссбраузерный плагин jQuery для создания динамических макетов сетки для настольных компьютеров, мобильных устройств и планшетов. Freewall - это универсальное решение, которое поможет вам создать множество типов макетов сетки (гибкий макет, макет сетки, макет изображений, макет в стиле pinterest и т. Д.) С красивыми эффектами анимации CSS3 и событиями обратного вызова.
Мейсон: Создание идеальной сетки с помощью jQuery
Mason.js - это плагин jQuery, который позволяет создавать идеальную сетку элементов. Mason был создан для решения проблемы с большинством доступных в настоящее время сеточных систем. Пробелы. При использовании Masonry, Isotope или любых других плагинов сетки иногда ваша сетка будет содержать зазоры или рваные края. Мейсон был создан, чтобы заполнить эти пробелы. Построенный на идее истинной каменной кладки, когда построена сетка, в ней обязательно должны быть дыры, поэтому Мейсон вычисляет, где эти отверстия, и заполняет их.
Gridly: плагин jQuery для включения перетаскивания и изменения размера сетки
Gridly - это плагин jQuery, позволяющий перетаскивать, а также изменять размер сетки. В демонстрации ниже попробуйте нажать или перетащить любой из кирпичей.
Горизонтальное выдвигающееся меню с CSS3 и JavaScript
Горизонтальное выдвигающееся меню с макетом миниатюр в виде сетки для подменю. С примерами медиа-запросов для небольших устройств. Меню выдвигается сверху, когда щелкают по элементу главного меню, а подпункты постепенно появляются. При щелчке по другому элементу высота подменю будет изменяться, а содержимое будет постепенно увеличиваться и исчезать при переключении. В некоторых примерах медиа-запросов показано, как сделать меню адаптивным и изменить вид на удобную для сенсорного экрана навигацию с вертикальным расположением элементов.
Адаптивная сетка фотогалереи слайд-шоу с HTML5
Адаптивная фотогалерея слайд-шоу имеет плавный / гибкий / адаптивный макет. В основном сетка добавляется на страницу html в выбранный вами div, и она адаптируется на основе ширины этого div, высота сетки изменяется в зависимости от количества миниатюр, и если другие элементы находятся ниже div сетки, они будут автоматически сдвинуты вниз (документооборот). В приведенных примерах вы можете увидеть несколько способов использования этой сетки, конечно, возможны и другие конфигурации. Чистый код OOP JavaScript, без использования jQuery или других библиотек, таким образом не будет несовместимости с HTML-страницами, которые могут использовать jQuery или другие библиотеки JavaScript. Адаптивная фотогалерея слайд-шоу использует графический процессор (аппаратное ускорение) с использованием стандартов HTML5. Скорость и производительность рендеринга безупречны на настольных компьютерах и, что наиболее важно, на мобильных устройствах, способ его работы будет пытаться использовать CSS3, а если он недоступен, он упадет до CSS2 или CSS1 для старых браузеров, таких как IE7 и IE8.
Плагин Megafolio Pro Responsive Grid jQuery
Megafolio Pro - это полностью адаптивный плагин медиа-сетки, который позволяет отображать контент практически всеми возможными способами, используя предустановленные или сгенерированные случайным образом макеты. Погрузитесь прямо в действие, взглянув на наши превью, демонстрируя лишь несколько примеров того, что возможно с Megafolio Pro! Функции:
- Тонны вариантов
- Полностью адаптивный и оптимизированный для мобильных устройств (смартфоны и планшеты)
- Настраиваемые макеты сетки
- Различные переходы и эффекты
- Категория Стили фильтров
- Быстрый CSS3 и jQuery Engine
- Идеальное решение для всех сетевых приложений
- Плагин Fancybox 2 Lightbox
Концепция липких подписей jQuery с помощью CSS3
При создании сетки эскизов мы обычно хотим отображать подписи к изображениям при наведении курсора, чтобы предоставить дополнительную информацию об элементе. Подписи к изображениям обычно отображаются в очень определенной части эскиза: вверху, в середине или внизу. При добавлении подписей к нижней части эскиза может случиться так, что эскиз, который выходит за пределы области просмотра (т. Е. Частично находится за «сгибом»), зависает, но подпись не будет видна, потому что она появляется в нижней части изображение, которое не видно. Пользователю придется прокручивать страницу, чтобы увидеть нижнюю часть элемента и, в конечном итоге, заголовок. Небольшой трюк может решить эту проблему, просто сделав заголовок «липким». Это будет означать, что подпись будет видна не только внизу каждой миниатюры, но и в любом месте, оставаясь в нижней части страницы, если миниатюра наведена поверх текущего представления.
OneMenu: адаптивное меню пользовательского интерфейса Metro для jQuery
OneMenu - это плагин jQuery для навигационного меню, созданный для тем Metro UI. OneMenu поддерживает адаптивный дизайн и неограниченное количество меню. Функции:
- Адаптивный дизайн для тем Metro
- Неограниченное меню.
- Неограниченное количество элементов в OneMenu.
- Работает практически на платформах.
- Автоматическое выравнивание элементов в динамической сетке.
- Легкий вес.
- Легкая настройка.
Shapeshift: плагин jQuery для динамических сеток с перетаскиванием
ShapeShift - это плагин jQuery, который помогает вам создать динамическую сеточную систему с потрясающей функциональностью перетаскивания нескольких столбцов. Этот плагин jQuery будет динамически упорядочивать коллекцию элементов в сетку в их родительском контейнере. В значительной степени вдохновлен плагином jQuery Masonry. Еще одна замечательная функция - это установка каменной кладки, так что при изменении размера сетка для размещения большего или меньшего пространства автоматически включается в этом плагине jquery, поэтому, если ваш родительский контейнер имеет 100% сетку, изменение размера окна будет перемещать дочерние объекты вокруг, чтобы разместить их. для нового макета.
Volley: плагин jQuery для разделения и фильтрации элементов
Плагин jQuery для разделения и фильтрации элементов в зависимости от их визуального положения. Вы можете использовать его для последовательной анимации элементов. Volley требует, чтобы все элементы были расположены в сетке, т.е. их ширина и высота должны совпадать (иначе нет смысла вызывать залп на самом деле). Начальная точка для разделения элементов. Установив другую начальную точку, вы можете разделить элементы на горизонтальные, вертикальные или диагональные строки.
jQDrawBootstrapGrid: плагин jQuery, который рисует столбцы сетки
Простой плагин jQuery, который рисует столбцы сетки в макете начальной загрузки twitter. Лучше работать с не текучими макетами (жидкость для контейнера, жидкость для строк).
Calendario: гибкий плагин календаря jQuery
Сегодня мы хотим поделиться с вами концепцией гибкого календаря. Календари могут быть очень сложной задачей, когда дело доходит до их макета и отзывчивости. Это эксперимент по опробованию некоторых макетов сетки, которые можно применить к календарям. Мы создали плагин jQuery для самого календаря, и вы можете увидеть несколько примеров того, как его использовать в демонстрациях. Цель состоит в том, чтобы обеспечить подходящий макет как для маленьких, так и для больших экранов и по возможности сохранить гибкую структуру календаря. На больших экранах мы хотим отображать макет на основе сетки, а на экранах меньшего размера мы хотим просто складывать дни месяца.
jQuery CSS3 Adaptive Thumbnail Pile Effect with Automatic Grouping
Экспериментальный плагин jQuery, который группирует миниатюры по общему атрибуту данных в стопку. При нажатии на стопку миниатюры, принадлежащие этой стопке, будут распределены в сетку с использованием переходов CSS.
JQuery 3D Carousel от CodingJack
3D-карусель CodingJack - это реальное 3D-изображение с использованием CSS3. Плагин карусели 3D-преобразований с jQuery, Html5 и Css3. Карусель поддерживается на iOS и Android и включает в себя функцию касания пальцем. Он отлично смотрится на планшете и будет работать даже на смартфоне. Но поскольку карусель может казаться маленькой на небольших экранах, я включил два специальных варианта для смартфонов:
- Возможность отображения вместо этого сетки эскизов («резервная» презентация)
- Возможность преобразования альтернативной сетки в адаптивный макет. Просмотрите любой предварительный просмотр на своем телефоне для примера.
CSS3 Product Grid Layout с JavaScript
Адаптивный макет сетки продукта с некоторыми деталями пользовательского интерфейса для вдохновения. При нажатии кнопки поворота продукт будет вращаться, показывая обратную сторону предмета. Также включены некоторые примеры того, как всплывающие подсказки могут появляться при наведении или щелчке. Медиа-запросы можно использовать для изменения размера элементов в сетке или изменения количества элементов в строке. Flexbox используется, когда поддерживается.
jQuery Mosaic Flow: Pinterest любит адаптивное изображение
Pinterest любит отзывчивую сетку изображений для jQuery, которая не отстой. Функции:
- Просто и легко установить.
- Адаптивный (показывает столько столбцов, сколько необходимо).
- Очень быстро.
- Всего 1 КБ (уменьшенный в сжатом виде).
- Вы можете, например, добавить наложение HTML: info.
jQuery Photoset Grid
Простой плагин jQuery для упорядочивания изображений в гибкую сетку на основе функции фотосета Tumblr. Первоначально плагин был создан для наших тем Style Hatch Tumblr как способ использования сетки фотосета в адаптивных макетах, но с тех пор мы расширили его для использования за пределами тем.
Витрина приложения jQuery CSS3 с наложением сетки
Сегодня мы создадим небольшую витрину приложения с изящным эффектом в jQuery и CSS3. Идея состоит в том, чтобы показать мобильное устройство со снимком экрана приложения, и при нажатии на устройство появляется сетка, показывающая еще несколько снимков экрана. Эффект очень тонкий: устройство отодвигается назад, сетка размывается и увеличивается в масштабе. При нажатии на другой снимок экрана изображение устройства обновляется, и сетка снова исчезает.
Сетка эскизов с расширяющимся предварительным просмотром в jQuery и CSS
Учебник о том, как создать сетку миниатюр с расширяющимся предварительным просмотром изображения, аналогичным эффекту, наблюдаемому в Google Images. Если вы недавно искали изображения в Google, вы могли заметить интересный расширяющийся предварительный просмотр для большего изображения, когда вы нажимаете на миниатюру . Это действительно приятный эффект и очень практичный, значительно упрощающий поиск. Сегодня мы хотим показать вам, как создать аналогичный эффект на сетке миниатюр. Идея состоит в том, чтобы открыть предварительный просмотр при нажатии на миниатюру и показать увеличенное изображение и другой контент, например заголовок, описание и ссылку. Интересно вычислить правильную высоту предварительного просмотра и прокрутить страницу в нужное положение. Мы расширим предварительный просмотр таким образом, чтобы мы могли видеть соответствующую строку эскизов и покрывать остальную часть оставшейся страницы. Обратите внимание, что мы не используем очень большие изображения для предварительного просмотра в демонстрации, поэтому вы можете увидеть много пустого места на больших мониторах.
Неограниченный макет сетки в CSS и JavaScript
Во время моей работы фронтенд-разработчиком я кодировал многие сайты с полной разметкой страницы, как до, так и после упадка Flash. Написание этого типа макета каждый раз было шагом вперед к лучшей и более поддерживаемой структуре CSS; однако, даже если каждая длина была выражена как относительная и гибкая единица, нам нужно знать количество страниц. Например: если у нас есть горизонтальная структура из 6 страниц, мы устанавливаем ширину контейнера страниц на 600% и ширину каждой дочерней страницы на 16,66%. Но если количество страниц изменилось на 5 или 7, мы должны отредактировать CSS.
Адаптивное сетевое портфолио: адаптивный макет JavaScript Html5
Адаптивное сетевое портфолио имеет плавный / гибкий / адаптивный макет. В основном сетка добавляется на страницу html в выбранный вами div, и она адаптируется на основе ширины этого div, высота сетки изменяется на основе эскизов, и если другие элементы находятся ниже div сетки, они будут автоматически сдвинуты вниз (документ поток). Адаптивное сетевое портфолио использует графический процессор (аппаратное ускорение) в соответствии со стандартами HTML5. Скорость и производительность рендеринга безупречны на настольных компьютерах и, что наиболее важно, на мобильных устройствах, способ его работы будет пытаться использовать CSS3, а если он недоступен, он упадет до CSS2 или CSS1 для старых браузеров, таких как IE7 и IE8.
Вложен: jQuery Gap free, плагин для многоколоночной сетки
Nested - это плагин jQuery, который позволяет создавать многоколоночные динамические макеты сетки. В отличие от других библиотек и плагинов jQuery, подобных Nested, это (насколько мне известно) первый скрипт, который позволяет создать полную разметку без пробелов. Он создает матрицу всех элементов и создает сетку из нескольких столбцов, аналогичную другим библиотекам и скриптам. Затем он сканирует матрицу на предмет пробелов и пытается заполнить их, переупорядочивая элементы. Именно так я наблюдал, как ведут себя другие новые библиотеки, скрипты и модификации, но если вы остановитесь на этом, результат иногда также оставит нежелательные пробелы. Вот почему я добавил последний шаг, возможность изменить размер любого элемента в нижней части сетки, который больше (или меньше, если вы предпочитаете), чем зазор, чтобы сделать сетку полностью без зазоров.
Минималистичная галерея слайд-шоу с jQuery
В сегодняшнем руководстве мы создадим простую и красивую галерею слайд-шоу с помощью jQuery, которую можно легко интегрировать в ваш веб-сайт. Идея состоит в том, чтобы иметь контейнер с нашим слайд-шоу и параметрами для просмотра сетки миниатюр, приостановки слайд-шоу и навигации по изображениям. Сетка эскизов выдвинется сверху и позволит пользователю перемещаться по набору эскизов.
Горизонтальное сетевое портфолио jQuery Pro
Horizontal Gridfolio Pro - это полностью адаптивный плагин мультимедийной сетки, который позволяет отображать мультимедийный контент с уникальным и оригинальным макетом. Он идеально подходит для презентаций для всех, кто хочет произвести сильное впечатление на своих посетителей. Горизонтальное сеточное портфолио Pro предлагает большое количество вариантов, оно может иметь любое количество категорий, и каждая категория может иметь любое количество изображений. При нажатии на миниатюру вы можете выбрать либо отображение исходного медиа-лайтбокса, который мы закодировали, никаких действий, либо открытие веб-страницы. В лайтбоксе могут отображаться изображения, iframe (html-страницы) и видео, загруженные с YouTube или Vimeo . Функции:
- Адаптивный / гибкий / гибкий макет: сетку можно использовать с тремя типами отображения: адаптивный / фиксированный, плавный или полноэкранный .
- Автоматическое масштабирование. Размер сетки можно изменять по высоте пропорционально ширине. Таким образом, на экранах меньшего размера она сохранит правильное соотношение и будет полностью видна (необязательно).
- Функция перетаскивания или прокрутки: сетку можно перетаскивать с помощью мыши / пальца или прокручивать, как обычную HTML-страницу.
- Поддержка колесика мыши: сетку можно прокручивать колесом мыши (необязательно).
Динамическая сетка с переходами с помощью JavaScript и CSS3
Макет с динамической сеткой, позволяющий выбрать количество отображаемых строк и столбцов элементов. Частично основан на визуализации Google Trends, за исключением того, что вы можете добавлять переходы.
Эффекты наведения надписей на CSS3 и JS
Сегодня мы хотим показать вам, как создать несколько простых, но стильных эффектов наведения для подписей к изображениям. Идея состоит в том, чтобы иметь сетку фигур и применять к элементам эффект наведения, который покажет заголовок с заголовком, автором и кнопкой ссылки. Для некоторых эффектов мы будем использовать 3D-преобразования. Цель состоит в том, чтобы сделать эффекты незаметными и дать вдохновение для множества различных вариаций.
Универсальное адаптивное мегаменю с jQuery и CSS3
В нем автор собрал гибкую систему мегаменю, которая может содержать выпадающие списки 12 размеров, неограниченное количество всплывающих элементов в сочетании со сценарием jQuery для улучшения всей системы. Его можно использовать как липкий нижний колонтитул (с большим выпадающим списком). ups »), используя ту же разметку, что и« стандартное »мегаменю. Вы можете переключаться между этими двумя вариантами, просто изменив один класс. Функции:
- Мега-меню верхнего и нижнего колонтитулов
- Полностью адаптивное меню
- Графика с поддержкой Retina
- Гибкая сетка из 12 столбцов
- Стилизованная типография и элементы
- Простая рабочая контактная форма
- Чистый и профессиональный дизайн
- Совместимость с устройствами с сенсорным экраном
- Кроссбраузерная поддержка
Blades 3D: CSS3-адаптивный и готовый к работе с Retina ротатор баннеров
Blades 3D - это отзывчивая сетчатка с поддержкой CSS3 3D Transforms и CSS3 Transitions. Функции:
- Адаптивный (необязательно)
- Retina Ready (необязательно)
- Выберите использование автовоспроизведения и установите задержку автовоспроизведения
- Автоматически рандомизировать порядок слайдов
- Выберите, чтобы отключить 3D-флип-изображение и переключиться в «классический» режим.
- Выберите один из 6 различных вариантов поворота или прокрутите их все
- Установите «раздельное» расстояние между пальцами
- Установите количество столбцов и строк сетки
- Touch-swipe для мобильных устройств
- Используйте как можно больше лозунгов
- Слоганы поддерживают несколько строк и гиперссылок
- Используйте более одного баннера на одной странице
- jQuery бесплатно (не беспокойтесь о конфликтах jQuery или необходимости обновления до последней версии jQuery)
- Пользовательские настройки можно передавать через атрибуты JavaScript или HTML.
PathFinding.js: обширная библиотека поиска путей в javascript
Комплексная библиотека поиска путей для игр на основе сетки. Цель этого проекта - предоставить библиотеку поиска путей, которую можно легко включить в веб-игры. Он может работать на Node.js или в браузере.
Галерея Smooth Diagonal Fade с переходами CSS3 и jQuery
В этом уроке мы собираемся создать галерею с эффектом плавного диагонального затухания, основанного на переходах css3. Он просканирует папку с фотографиями на сервере и отобразит их в сетке, охватывающей все окно браузера. Добавить новые фотографии так же просто, как скопировать два файла (обычное изображение и миниатюру, желательно 150 × 150 пикселей) в папку галереи. Браузеры с поддержкой CSS3 будут демонстрировать плавно анимированный эффект диагонального затухания, в то время как старые браузеры вернутся к более простой, но все же отлично используемой неанимированной версии галереи.
Галерея финальных плиток jQuery
НАКОНЕЦ лучшая галерея для плиточных макетов, потому что она не обрезает ваши изображения, но по-прежнему предлагает сложный макет, это не тот же старый скучный макет, состоящий из столбцов или строк одинакового размера. Наилучшие результаты достигаются при использовании изображений разного размера. Использование изображений одинакового размера просто даст вам стандартный макет сетки.
Diamonds.js: jQuery Diamond layout Галерея изображений
Устали от прямых сеток, где все выровнено по вертикали и горизонтали? Почему бы не наклонить все на 45 градусов? Этот плагин jQuery позволяет вам легко это сделать! Возможности:
- Автоматическое изменение размера
- Без изображений, все css
- Плагин с поддержкой AMD
- Тестовое покрытие!
Многоцелевые медиа-боксы jQuery - отзывчивая сетка
Это HTML | CSS | Полностью адаптивное портфолио JQuery в стиле pinterest с лайтбоксом. Он будет адаптироваться к ширине своего контейнера, поэтому вы можете положить его куда угодно, и вы можете положить что угодно в коробки. Кроме того, вам не нужно загружать все изображения сразу (для повышения производительности), поэтому вы можете указать количество изображений для загрузки при первой загрузке и количество изображений для загрузки при нажатии кнопки «загрузить больше изображений». Панель фильтров навигации создается автоматически из категорий, которые вы указываете для каждого изображения. Возможности:
- Полностью адаптивная сетка и лайтбокс
- Функция отложенной загрузки
- Лайтбоксы поддерживают изображения и фреймы любых размеров и сохраняют правильные пропорции.
- Панель навигации фильтра создается автоматически из категорий, которые вы указываете для каждой миниатюры.
- Установите количество изображений для загрузки при запуске и при нажатии кнопки «загрузить больше изображений»
- Поддержка эскизов для сетки только для изображений, которые вы хотите улучшить.
- Полностью отзывчивая сетка и лайтбокс
- На всю ширину, сетка адаптируется к 100% своего контейнера, если вы установите для ширины каждого столбца значение «авто».
- Вы можете указать статическую ширину для каждого столбца или указать количество столбцов.
- При указании количества столбцов вы можете установить минимальную ширину для каждого столбца.
- CSS3 эффекты
- Эффект наведения с учетом направления
- Лайтбоксы со слайд-шоу (воспроизведение, пауза, автовоспроизведение)
- Простая реализация
- Совместим с Twitter Bootstrap
Shuffle.js: плагин jQuery Shuffle
Плагин Shuffle.js, который помогает категоризировать, сортировать и фильтровать адаптивную сетку элементов и размещать группы элементов. Помимо других интересных функций, это эффективный, отзывчивый и быстрый плагин. Это большое улучшение для перемешивания. В первую очередь, умение кладки макетов. Другие дополнения включают добавление / удаление элементов, включение / отключение, несколько экземпляров на странице и многое другое!
Самый простой способ получить хронологию Twitter с помощью PHP и jQuery
Twitter прекратил работу своего старого API, и все наши руководства по Twitter перестали работать! Итак, вот продолжение, чтобы показать вам, насколько легко получить временную шкалу и хэштег пользователя с помощью Twitter REST API 1.1. Конечно, я не останавливаюсь на достигнутом. Я интегрировал свой ранее написанный скрипт и модифицировал его для работы с плагином Grid-A-Licious, чтобы создать что-то похожее на Pinterest.
Загрузка эффектов для элементов сетки с помощью CSS-анимации и JavaScript
Сегодня мы хотим поделиться с вами некоторыми эффектами загрузки элементов сетки. Идея состоит в том, чтобы отображать элементы в сетке с анимацией, когда они оказываются в области просмотра. Возможности безграничны, и мы хотели бы вдохновить вас. Некоторые из эффектов взяты из потрясающих эффектов прокрутки CSS3, созданных Хакимом Эль Хаттабом, а идея вдохновлена анимацией плитки, которую можно увидеть в приложении Google Plus. Поскольку Masonry - популярная библиотека для построения сеток, мы подумали, что было бы неплохо использовать ее в этой демонстрации. Если вы хотите использовать что-то еще или вообще не хотите использовать библиотеку, вам придется удалить инициализацию из сценария, настроить селекторы и т. Д. Это должно быть довольно просто.
Чертеж: адаптивная сетка значков с CSS3
Адаптивная сетка якорей со значками, текстом и некоторыми примерами переходов при наведении. Сетка значков и текста, которая регулирует количество столбцов в зависимости от размера экрана, как показано в некоторых медиа-запросах. Некоторые примеры эффектов используются для анимации элементов при наведении курсора.
Чертеж: переключение режима просмотра с помощью CSS3 и JavaScript
Переключатель раскладки с двумя режимами просмотра: сеткой и списком. Макет определяется классом представления, который применяется к основной оболочке. Некоторые примеры медиа-запросов показывают, как сделать вещи адаптивными.
Перемешать: jQuery Категоризируйте, сортируйте и фильтруйте гибкую сетку элементов.
Плагин jQuery Shuffle классифицирует, сортирует и фильтрует гибкую сетку элементов. Функции:
- Использует переходы CSS!
- Отзывчивый
- Фильтровать товары по группам
- Элементы могут иметь несколько групп
- Сортировать элементы
- Расширенный метод фильтрации (например, поиск)
Создайте адаптивное фильтруемое портфолио с помощью CSS3 Twists
Неотъемлемая внешняя привлекательность фильтруемых портфелей (таких как хаб Tuts +) сделала их очень популярными. Сегодня мы сделаем его, используя прямую разметку, CSS3 и немного jQuery.
jBlocks: библиотека макетов jQuery для адаптивного дизайна
jBlocks - это библиотека javascript, которую можно использовать как плагин jQuery и / или фреймворк, заботящийся о макете в приложении HTML5. Он позволяет разрабатывать приложения, которые будут работать как на настольных компьютерах, так и на мобильных устройствах, не беспокоясь о деталях разрешения экрана, плотности пикселей и т. Д. jBlocks упорядочивает прямоугольные блоки в области просмотра в соответствии с набором свободных предпочтений, заданных разработчиком. Библиотека пытается минимизировать свободные области без содержимого в реальном времени. Это означает, что приложение может добавлять, удалять или изменять геометрию блоков, а jBlocks соответствующим образом пересчитывает и корректирует макет. Возможности:
- работает на десктопах и мобильных
- поставляется с большим количеством предопределенных классов виджетов блока
- классы виджетов можно легко расширить
- поддержка вертикальной или горизонтальной прокрутки
Портфолио Cube: Адаптивный плагин jQuery Grid
Cube Portfolio - это мощный плагин jQuery, который обеспечивает красивую анимированную фильтрацию, настраиваемые подписи и идеально подходит для портфолио, галерей, членов команды, сообщений в блогах или любого другого упорядоченного контента. Он отлично сочетается с существующим HTML и CSS , что делает его отличным выбором для динамических и отзывчивых макетов. Функции:
- Адаптивный и центрирующий макет
- Полностью настраиваемый: более 20+ вариантов
- Вы можете добавлять неограниченное количество предметов
- Вы можете добавлять элементы с помощью AJAX
- Адаптивный встроенный лайтбокс с поддержкой изображений, youtube и vimeo.
- Встроенная единая страница ajax с поддержкой любого HTML
- 6 стартовых шаблонов
- 10 анимаций для сеток предметов
- Фильтр по категориям: группируйте записи по категориям
- Поддержка выпадающей фильтрации
- Функция отложенной загрузки
- Использование CSS-анимации с переходом на jQuery
- Мощный API: init, destroy, filter, appendItems, showCounter
- Регулируемая скорость, переход, замедление и эффекты для каждой подписи
jQuery Isotope для Twitter Bootstrap
Сочетает в себе невероятные возможности Twitter Bootstrap и jQuery Isotope.
BrandsBox: плагин jQuery для слайдера логотипов
Плагин jQuery для слайдера логотипов. Возможности:
- Отзывчивый
- Настраиваемая сетка
- Аппаратное обеспечение, переходы CSS3
- 6 плавных скользящих переходов
- Контроль скорости анимации
- Эффекты наведения
- 6 цветовых режимов для логотипов
- Контроль прозрачности логотипов
- Скользящие режимы
- Управление элементами XML / JS
- Поддержка основных браузеров
Wordbox.js: плагин тегов категорий jQuery и классифицирующих меток
jQuery.wordbox.js позволяет легко создавать теги категорий и классифицировать ярлыки.
Stackgrid.js: плагин jQuery для Stacking Stuff
Очень простой и настраиваемый плагин jQuery для стекирования.
jMosaic: плагин jQuery для выравнивания элементов в Mosaic Grid
Легкий плагин jQuery, который может взять список элементов страницы и расположить их в красивой, плотно подогнанной мозаичной сетке из плиток. Пропорции элементов не меняются. В качестве элементов могут использоваться: img, div, li и т. Д.
Modularux jQuery - отслеживание лица в адаптивной сетке
Плагин ModularUX jquery - это простой и настраиваемый создатель сетки контента, построенный на хорошо продуманном javascript и html5 / css3. Используйте файл json с картой сайта, и ModularUX выполнит тяжелую работу. Modularux легко делит вашу сеть на части, создавая инновационный интерфейс с анимацией css3. Он прост в использовании, и вы можете заставить его работать на любом из ваших веб-сайтов (html, php и т. Д.).
РЕЦЕНЗЕНТ: Мастер оценки и обзора с jQuery и PHP
REVIEWER - это система мастера проверки HTML5 / CSS3 с индикатором выполнения, которая отправляет результат на вашу электронную почту и резюме / благодарственное письмо пользователю, заполнившему форму. Он отзывчивый, может использоваться с другими типами форм. Вы можете добавить, сколько шагов вам нужно. Возможности:
- Действительный и чистый код HTML5 / CSS3
- На основе Bootstrap 3: хорошо смотрится на всех устройствах
- Мастер с индикатором выполнения
- Система оценок
- PHP Рабочая форма, отправляющая данные обзора
- Электронное письмо с подтверждением пользователю, заполнившему форму (плюс необязательное резюме обзора)
- Проверка jquery
- Jquery Tweet Feed, поддерживающий новый API V1.1
Gridstack.js: плагин jQuery для макета виджетов
Gridstack.js - это плагин jQuery для компоновки виджетов. Это многоколоночная сетка с перетаскиванием. Он позволяет создавать перетаскиваемые адаптивные макеты для начальной загрузки v3. Он также отлично работает с knockout.js.
Waterfall.js: JS-библиотека для Pinterest Grid
На данный момент лучшим вариантом для выполнения этой работы является Masonry, но он очень тяжелый и зависит от jQuery. Пожалуйста, поймите: в большинстве случаев это не проблема, но в случаях, когда производительность и вес страницы имеют значение, лучше всего попробовать другие варианты: может быть, чистый CSS? Возможно?
Масштабирование макета сетки с помощью jQuery и CSS3
Простой макет сетки с эффектом анимации масштабирования для отображения сообщений в блогах или другого контента.
Gridlex: система сеток Flexbox
Адаптивная сеточная система на основе Flexbox, которая поможет вам создать отзывчивый веб-сайт на основе CSS3 Flexbox.
- Обычно каждый столбец такой же ширины, как и любая другая ячейка в сетке.
- Но вы можете добавить классы размеров к отдельным столбцам.
- Для адаптивного дизайна вы можете добавлять классы на основе медиа-запросов.
- Верх, низ или середина. Для сетки. И для колонн.
- Сетки могут быть вложенными. Всегда. Прямо в колонке.
Hashtegny: плагин jQuery для агрегированных хэштегов
Плагин jQuery собирает хэштеги из разных социальных сетей. Сообщения отображаются в уникальной привлекательной сетке с анимированным макетом.
- Собирает хэштеги из разных социальных сетей.
- Отображает сообщения в виде сетки и анимированного макета.
- Работает на экранах разных размеров.
- Он автоматически обновляет метку времени каждого сообщения.
- Он автоматически добавляет последние сообщения, если таковые имеются.
- Сообщения отсортированы по времени их создания.
- Сообщения кликабельны.
Chewing-Grid: CSS-сетка, идеально подходящая для дизайна листинга карточек
ChewingGrid - это сетка CSS для оформления списков карточек, таких как видео, плитки или списки статей. Он не требует медиа-запросов, но настраивается в зависимости от максимального количества столбцов, а также минимальной и максимальной ширины карточки.
Мини-сетка: схема каскадной сетки
Minigrid - это минимальная каскадная сетка размером 2 Кбайт с нулевой зависимостью. Он адаптивный и может быть анимирован.
Идеи создания эффектов для сеток изображений с помощью jQuery и CSS
Сегодня мы хотели бы поделиться вдохновением с эффектами сетки изображений. Идея состоит в том, чтобы анимировать элемент сетки при его открытии, исчезновении других элементов сетки и новом содержании. Отображаемый контент может быть чем угодно, от просто увеличенной версии изображения и заголовка (например, галерея изображений) или чего-то вроде просмотра альбома. Общим эффектом для всех является анимация изображения сетки, по которому щелкнули мышью: мы перемещаем его в желаемое место, масштабируем и затем заменяем более крупной версией. Это создает прямой поток между сеткой и другим (полным) видом.
gridSplit: система сеток jQuery
Сетка jQuery разработана таким образом, что каждую ячейку можно «разбить» по горизонтали или вертикали. Он предназначен для использования как часть более крупной системы, позволяющей пользователю свободно управлять своей средой виджетов.
Gridex: расширяемая сетка для Twitter Bootstrap
Gridex - это расширяемая сетка для бутстрапа twitter.
Редактор сетки: визуальный редактор JavaScript для Bootstrap
Визуальный редактор javascript для системы сетки начальной загрузки, написанный как плагин jQuery.
Макет анимации элемента сетки с помощью CSS3 и JavaScript
Сегодня мы хотели бы поделиться с вами простой анимированной сеткой. В адаптивном макете есть боковая панель и элементы сетки, которые при нажатии анимируются в большую область содержимого. В первой демонстрации область содержимого заполняет сетку, а во второй демонстрации весь макет перемещается влево, пока элемент сетки расширяется.
twitTalk: разговор в Twitter в реальном времени с jQuery Freewall
TwitTalk - это очень упрощенное использование API Twitter. Он включает в себя как поисковый API, так и API профиля пользователя для захвата как текстовых, так и мультимедийных твитов. Прямо сейчас он получит последние x твитов от пользователей, язык которых определен как английский (en), которые упомянули Кейт Спейд / Джека Спейда или твиты от организаций Кейт Спейд и Компании. Макет построен с помощью JQUERY (Freewall.js).
Элемент Instagram: плагин Instagram для jQuery
Instagram Element - это премиальный плагин Instagram для блогеров, фотографов, моделей и всех, кто хочет увеличить свое присутствие в Instagram. Эта версия плагина jQuery, основанная на популярном плагине Instagram Journal, позволяет легко управлять более чем 50 гибкими опциями и создавать идеальное отображение всего за несколько кликов. Кроме того, его мобильный адаптивный дизайн позволяет красиво демонстрировать свои фотографии на любом устройстве!
Bricks.js: Javascript Masonry Layout Generator
Bricks.js - это невероятно быстрый генератор макетов каменной кладки для элементов фиксированной ширины с использованием javascript. Возможности:
- Не требуется разметки HTML или таблицы стилей CSS.
- Минимальная, мощная и удобочитаемая конфигурация
- Дополнительная обработка изменения размера
- Оптимизированная обработка динамически добавляемых элементов
Вводная анимация из стека Polaroid в сетку
Учебное пособие о том, как создать вступительную анимацию, в которой декоративный стек Polaroid становится сеткой, аналогичной эффекту, который можно увидеть на веб-сайте takeit.
TileJs: плитки Windows Metro с CSS3 и JavaScript
Простая репликация javascript тонкого эффекта наклона, когда вы щелкаете плитку в Windows 8. Tilejs использует преобразования css3, поэтому поддерживается только современными браузерами.
Коды новостей: элементы новостей, журналов и блогов для WordPress
Элементы новостей, журналов и блогов для WordPress! Добро пожаловать в будущее ваших публикаций! Новостные коды кардинально изменят то, как вы используете и отображаете свои сообщения, и улучшат способ взаимодействия посетителей с вашим контентом в новостях, на веб-сайтах журналов и блогах или практически в любом проекте, над которым вы работаете, который использует сообщения для создания и представления контента.
- 20+ классных макетов постов Newscodes
- Неограниченные стили кодов новостей
- Элементы с вкладками Newscdes
- Диспетчер стилей и редактор кодов новостей с возможностью предварительного просмотра на странице администратора
- Поддержка всех типов сообщений
- Фильтры сообщений
- Фильтры пост-таксономии
- Почтовые мета-фильтры
- Сменное соотношение фильтров
- Ajax Load
Moon Mega Grid plus Grand Pack
Создайте свою уникальную художественную впечатляющую галерею для своих фотографий с множеством красивых анимированных эффектов наведения, используя шаблоны и примеры, цветовые схемы, svg и фильтры для фотографий на холсте и другие инструменты!
- интегрированная поддержка фильтров Canvas и SVG
- идеально подходит для мобильных устройств
- простые инструменты для создания шаблонов
- встроенный лайтбокс с поддержкой Retina
- 2 режима сетчатки
- алгоритм сохранения памяти
- работает как с форматами json, так и с html (кастомные парсеры)
Анимация загрузки сетки с помощью JavaScript и CSS
Сегодня мы хотим поделиться с вами набором простых и вдохновляющих анимаций загрузки элементов сетки. Идея состоит в том, чтобы после завершения загрузки показать некоторые элементы сетки изображений с (тонкой) анимацией. Для демонстрации у нас есть три немного разных макета сетки с разными желобами и номерами столбцов.
Гибридная кладка: несколько столбцов jQuery и изменение размера элемента
Masonry Hybrid - это плагин многоколоночной компоновки для jQuery. Думайте об этом как об оборотной стороне CSS-поплавков. В то время как плавающий размещает элементы горизонтально, а затем вертикально, Masonry размещает элементы вертикально, а затем горизонтально в соответствии с сеткой.
Портфолио и лайтбокс адаптивного загрузчика jQuery
Набор адаптивных Bootstrap Portfolio и Lightbox содержит загрузочную галерею портфолио, bootstrap-галерею лайтбоксов, загрузочную карусель с миниатюрами, а также поддерживает видео YouTube, видео vimeo, видео на собственном хостинге и т. Д. С новыми функциями.
- 18 лайтбоксов
- 7 цветовых схем
- 6 портфелей слайдеров
- 18 простых портфолио
- Создан с использованием Bootstrap 3.x
- 3 схемы цветов фона
- 2,3,4,5,6 столбца сетка портфелей
- 100% отзывчивость и удобство для мобильных устройств
- Поддержка YouTube, Vimeo и видео на собственном хостинге
Классные эффекты загрузки CSS для изображений в виде сетки
TutsMix поделился с нами некоторыми классными эффектами загрузки CSS для изображений сетки. Вы можете использовать их в своем портфолио, блоге или где угодно. Настройка довольно проста. Мы используем Normalize.css в качестве альтернативы традиционному сбросу CSS, ZURB Foundation для создания адаптивной сетки, Masonry для создания динамического макета сетки, imagesLoaded, чтобы проверить, загружены ли изображения, и Infinite Scroll от Paul Irish для загрузки большего количества изображений. и добавьте их в галерею.
Плагин Images Grid jQuery
Плагин jQuery сетки изображений. Отображение первых 6 изображений в виде сетки. Остальные изображения можно просмотреть в модальном окне.
Gridagram: плагин jQuery Dynamic Grid layout
Управляет динамической сеткой отображаемых на экране данных, как сетка для бедняков.
