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

Динамическая структура страницы, позволяет вам определить на сколько строк и столбцов должны быть разбиты элементы страницы.

Наверняка вы видели страницу визуализации 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
} );

Примеры:

1. Без анимации

2. Анимация без задержки

3. Анимация с задержкой


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hhhBLn3aHIo/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Динамическая сетка с эффектами переходов | | 2013-07-04 05:51:12 | | Статьи Web-мастеру | | Динамическая структура страницы, позволяет вам определить на сколько строк и столбцов должны быть разбиты элементы страницы.Наверняка вы видели страницу визуализации Google Trends, где запросы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: