Разметка макета с анимацией элементов сетки

Разметка макета с анимацией элементов сетки

От автора: Отзывчивая разметка макета (наподобие интернет-магазина) с анимацией элементов сетки, которая происходит при открытии контента.

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

скачать исходникидемо

В первом демо-примере контентная область «заливает» сетку (в основе лежит концепт, разработанный Вёрджил Пана (Virgil Pana)), а во втором демо-примере вся разметка смещается влево, в то время как элемент сетки расширяется (в основе лежит эскиз на сайте Dribble, сделанный Сэмом Тиболтом (Sam Thibault)).

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Разметка является адаптированной под мобильные устройства благодаря технике медиа-запросов, которая включает определение контрольных точек (брейкпойнтов), основываясь на размерах элемента сетки и сайдбара. Для этого мы использовали препроцессор Sass, который позволяет с легкостью определить переменные для подобных величин. По большому счету данный подход можно считать подходом «сначала мобильные», но мы также сделали некоторую перестановку для маленьких экранов.

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

Второй демо-пример носит больше экспериментальный характер, и он может работать неодинаково в разных браузерах. Похоже, что в Internet Explorer есть определенные проблемы с переходами, которые применяются к трансформациям, где задействована функция calc().

Все внимание в данной разметке уделено самому эффекту расширения элемента сетки, поэтому многие элементы являются просто заглушками (загрузчик, фильтр в верхней части разметки, надпись «загрузить еще» внизу разметки). Основная разметка выглядит следующим образом:

Sass файлы для данного проекта поделены на основной файл со стилями и два дополнительных, один – для базовых стилей, а другой – для медиа-запросов. Для каждого демо-примера имеется свой уникальный файл с таблицей стилей (style1.scss и style2.scss), где мы инициализируем некоторые переменные и переопределяем некоторые стили (как это сделано во втором демо-примере). Существует много способов организации файлов для вашего проекта на Sass; для данного проекта было удобно организовать файлы именно так. Если вы захотите использовать код одного из файлов, то вам следует пересмотреть некоторые стили. Если вы не знакомы с Sass, то вы просто можете воспользоваться уже сгенерированными файлами с CSS.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Пример основного Sass файла для демо-примеров:

Переменные, которые потребуются для базовых стилей и для медиа-запросов, определены здесь.

Количество контрольных точек для медиа-запросов определяется количеством элементов в сетке и сайдбаром (код приведен без префиксов):

Данная техника является очень полезной, когда приходится работать с сетками. Оптимально было бы не использовать последний медиа-запрос, если бы мы хотели строго следовать подходу «сначала мобильные». Но поскольку данные стили применяются исключительно для маленьких экранов, нам бы не хотелось переопределять стили для больших экранов.

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

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree