Адаптивное представление миниатюр изображений в виде эффекта автоматической группировки в стопки
Занимательный экспериментальный jQuery плагин, который будет создавать группы изображений исходя из атрибута data-pile миниатюр, расположенных в стопке. При нажатии на неё, изображения принадлежащие к данной группе, используя CSS переходы, будут разлетаться по сетке.
Этот экспериментальный jQuery плагин, позволяет автоматически группировать миниатюры, используя эффект стопки. Изображения будут сгруппированы в соответствии с их атрибутами data, и после нажатия по стопке, они будут разлетаться по экрану, занимая свои места в сетке. В ней, миниатюры могут быть слегка повёрнуты или занимать свои позиции с некоторой задержкой.
Сама сетка, на которой будут располагаться стопки, является адаптивной, что значит, если размеры экрана будут не большими, количество стопок на одной строке уменьшится, это так же относится и к сетке миниатюр.
Иллюстрации для демонстрационных примеров, были позаимствованы у следующих товарищей из Dribbble:
Bryan Moats
Mike Dornseif
Griffin Moore
Andrea Austoni
Jakob Pierzyna
Jack Hughes
Jeremy Fryc
Joyce Rice
Где купить щипцы для наращивания Волос. Материалы для наращивания Волос г. Москва .
Обращаю Ваше внимание: данный эффект будет виден, только в браузерах поддерживающих CSS преобразования.
Для прочих браузеров, в качестве запасного варианта, мы будем анимировать стопки с помощью jQuery.
Разметка
По традиции, давайте начнём с разметки. Для работы плагина, мы будем использовать неупорядоченный список с классом «tp-grid»:
<ul id="tp-grid" class="tp-grid"> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Some title</span> </span> <img src="images/1.jpg" /> </a> </li> <li data-pile="Group 2"> <!-- ... --> </li> <li data-pile="Group 1,Group 2"> <!-- ... --> </li> <!-- ... --> </ul>
Атрибут data-pile стопок, будет содержать название группы. Обратите внимание, что один и тот же элемент, может принадлежать более чем к одной группе.
Включаем плагин:
$( '#tp-grid' ).stapel();
Настройки:
По умолчанию доступны следующие настройки плагина:
$.Stapel.defaults = {
// пространство между элементами
gutter : 40,
// степень ротации для 2-ого и 3-ого пункта
// (для получения других интересных эффект)
pileAngles : 2,
// настройки для щелчка по стопке миниатюр
pileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 400,
closeEasing : 'ease-in-out'
},
// настройки для других миниатюр
otherPileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 350,
closeEasing : 'ease-in-out'
},
// задержка для каждого элемента стопки
delay : 0,
// произвольный поворот миниатюр, как только был совершён щелчок по стопке
randomAngle : false,
// функции обратного вызова
onLoad : function() { return false; },
onBeforeOpen : function( pileName ) { return false; },
onAfterOpen : function( pileName, totalItems ) { return false; },
onBeforeClose : function( pileName ) { return false; },
onAfterClose : function( pileName, totalItems ) { return false; }
};
Основной стиль, определён в файле stapel.css. Увидеть примеры стилей для некоторых дополнительных демонстраций, мы можете в файле custom.css.
Демонстрации
Просмотрите демонстрации, чтобы увидеть различные настройки конфигурации в действии:
Демонстрация 1: конфигурация по умолчанию;
Демонстрация 2: задержка отлёта отдельных миниатюр к сетке;
Демонстрация 3: при отлёте, миниатюры имеют разные углы вращения.
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Дата публикации: 21.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 773
Правила перепечатки
Правила перепечатки
Уважаемый посетитель сайта!Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.
Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /
BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
