Красивое портфолио с помощью Quicksand

By | 27.12.2012

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

Просмотр   Исходники

HTML

Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:

Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.

Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.

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

Портфолио работ

 

jQuery

Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.

После загрузки страницы мы запускаем цикл для обнаружения меток.

script.js – Часть 1

 

Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags['Веб дизайн'] будет содержать массив всех пунктов, которые имеют метку ‘Веб дизайн’. Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.

Создадим вспомогательные функции

script.js – Part 2

Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список  ul и добавляет ссылку на зеленую полоску.

Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.

script.js – Часть 3

CSS

Самая интересная часть стилей CSS — зеленая полоска #filter. Для нее используются  псевдо-элементы :before / :after, чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.

styles.css

Зеленая полоска меню

 

Готово!

Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. Если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.

Источник: http://ruseller.com/page.php?doc=reprint

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

One thought on “Красивое портфолио с помощью Quicksand

  1. Татьяна

    Спасибо! Очень познавательная статья) сейчас воспользуюсь Вашими советами 😛

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.