Динамическая сетка с эффектами переходов
- Details
- Published on Thursday, 27 June 2013 09:46
Динамическая структура страницы, позволяет вам определить на сколько строк и столбцов должны быть разбиты элементы страницы.
Наверняка вы видели страницу визуализации Google Trends, где запросы пользователей показываются в красивой сетке в режиме реального времени.
Мы же хотели просто сделать функционал, позволяющий контролировать число колонок и столбцов элементов на странице. Другой особенностью должен был стать “резиновый” эффект. Эффект анимации, применяем при изменении количества элементов на странице, к примеру с 5x5 на 2x3.
Мы старались сделать что-то подобное: динамическую структуру страницу с применением эффектов. Сама анимация реализована через JavaScript, однако поворот, изменение размера, через CSS.
Сначала мы вычисляем позицию и размеры каждой ячейки и в зависимости от этих показателей, распределяем по странице. Все значения заданы в % чтобы сделать страницу резиновой. К элементам, которые нужно скрыть будет добавлен специальный класс (в зависимости от которого потом к данному элементу будет применён тот или иной эффект).
Заметьте, что в данном примере, мы использовали Modernizr http://modernizr.com/ для того, чтобы обеспечить прикосновение на тачпадах. Так же мы воспользовались classie.js http://github.com/desandro/classie от David De Sandro.
Пример использование:
Grid.init( { transition : true, speed : 450, delay: 20 } );
Примеры:
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hhhBLn3aHIo/lessons.php