Lecaw

Учимся создавать Web-сайты

Динамическая сетка с переходами

June 24, 2013 439hits

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

ДЕМО Исходные файлы

 

Нам действительно понравилась идея с динамическим изменением расположения элементов с дополнительным управлением. Еще одна интересная вещь состоит в том, что размеры полей основаны на количестве процентов, которые делают их плавающими. Мы не могли не задаться вопросом, как это будет выглядеть, если бы мы добавили переходы к сетке, где мы могли бы фактически видеть, что происходит при переходе скажем от макета 5 × 5 на 2 × 3.

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

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

Пример инициализации сетки:

Grid.init( {
    transition : true,
    speed : 450,
    delay: 20
} );

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий