От автора: Отзывчивая разметка макета (наподобие интернет-магазина) с анимацией элементов сетки, которая происходит при открытии контента.
Сегодня мы хотели бы поделиться с вами примером простой разметки макета с анимацией сетки. Отзывчивая разметка имеет боковую колонку (сайдбар) и элементы сетки, к которым при клике будет применяться анимация, расширяющая их контентную область.
В первом демо-примере контентная область «заливает» сетку (в основе лежит концепт, разработанный Вёрджил Пана (Virgil Pana)), а во втором демо-примере вся разметка смещается влево, в то время как элемент сетки расширяется (в основе лежит эскиз на сайте Dribble, сделанный Сэмом Тиболтом (Sam Thibault)).
Расширяющийся элемент (который является подставным и не является самим элементом сетки) не увеличивается анимировано в размерах (в высоту и ширину), а, наоборот, ему изначально заданы исходные размеры, и мы просто уменьшаем его до нужных нам пределов. Устанавливая классы, мы можем контролировать все переходы: исчезновение элементов сетки и появление элементов с контентом (и, наоборот, когда мы закрываем открытый элемент).
Разметка является адаптированной под мобильные устройства благодаря технике медиа-запросов, которая включает определение контрольных точек (брейкпойнтов), основываясь на размерах элемента сетки и сайдбара. Для этого мы использовали препроцессор Sass, который позволяет с легкостью определить переменные для подобных величин. По большому счету данный подход можно считать подходом «сначала мобильные», но мы также сделали некоторую перестановку для маленьких экранов.
Пожалуйста, обратите внимание, что при создании данной разметки использовались некоторые современные техники, включающие применение единиц области просмотра, переходов, модуля flexbox и других свойств, которые будут работать только в современных браузерах.
Второй демо-пример носит больше экспериментальный характер, и он может работать неодинаково в разных браузерах. Похоже, что в Internet Explorer есть определенные проблемы с переходами, которые применяются к трансформациям, где задействована функция calc().
Все внимание в данной разметке уделено самому эффекту расширения элемента сетки, поэтому многие элементы являются просто заглушками (загрузчик, фильтр в верхней части разметки, надпись «загрузить еще» внизу разметки). Основная разметка выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="container"> <button class="menu-toggle" id="menu-toggle" ><span>Menu</span></button> <div class="sidebar" id="theSidebar" > <button class="close-button fa fa-fw fa-close"></button> <!-- ... другие элементы ... --> </div> <div class="main" id="theGrid" > <section class="grid"> <header class="top-bar"> <!-- элементы шапки --> </header> <a class="grid__item" href="#"> <!-- элементы превью --> </a> <a class="grid__item" href="#"> <!-- элементы превью --> </a> <!-- ... --> <footer class="page-meta"> <!-- ... --> </footer> </section><!-- /grid --> <section class="content"> <div class="scroll-wrap"> <article class="content__item"> <!-- контент --> </article> <article class="content__item"> <!-- контент --> </article> <!-- ... --> </div> <button class="close-button"><i class="fa fa-close"></i><span>Close</span></button> </section><!-- /content --> </div><!-- /main --> </div><!-- /container --> |
Sass файлы для данного проекта поделены на основной файл со стилями и два дополнительных, один – для базовых стилей, а другой – для медиа-запросов. Для каждого демо-примера имеется свой уникальный файл с таблицей стилей (style1.scss и style2.scss), где мы инициализируем некоторые переменные и переопределяем некоторые стили (как это сделано во втором демо-примере). Существует много способов организации файлов для вашего проекта на Sass; для данного проекта было удобно организовать файлы именно так. Если вы захотите использовать код одного из файлов, то вам следует пересмотреть некоторые стили. Если вы не знакомы с Sass, то вы просто можете воспользоваться уже сгенерированными файлами с CSS.
Пример основного Sass файла для демо-примеров:
|
1 2 3 4 5 6 7 8 9 |
$item_width: 300px; $sidebar_width: 300px; $color_primary: #fafafa; $color_secondary: #fff; $color_link: #81c483; $anim-time: 0.5s; @import "base"; @import "mediaqueries"; |
Переменные, которые потребуются для базовых стилей и для медиа-запросов, определены здесь.
Количество контрольных точек для медиа-запросов определяется количеством элементов в сетке и сайдбаром (код приведен без префиксов):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/* Размеры области просмотра, основанные на количестве колонок и сайдбаре */ $viewport_xs: $item_width + $sidebar_width; /* 1 колонка */ $viewport_s: $item_width * 2 + $sidebar_width; /* 2 колонки */ $viewport_m: $item_width * 3 + $sidebar_width; /* 3 колонки */ $viewport_l: $item_width * 4 + $sidebar_width; /* 4 колонки */ $viewport_xl: $item_width * 5 + $sidebar_width; /* 5 колонок */ $viewport_xxl: $item_width * 6 + $sidebar_width; /* 6 колонок */ @media screen and (min-width: $viewport_xs) { html, body, .container, .main { height: 100vh; } .main { height: 100%; margin-left: $sidebar_width; } .content__item { font-size: 1em; } .grid__item { padding: 45px 45px 30px; } } @media screen and (min-width: $viewport_s) { .grid { display: flex; flex-wrap: wrap; } /* 2 колонки */ .grid__item { width: 50%; border: none; } .grid__item::before { top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid rgba(74,74,74,0.075); transition: opacity 0.3s; } .grid__item:hover::before, .grid__item:focus::before { border: 3px solid rgba(129,196,131,0.5); } .grid__item--loading.grid__item::before { opacity: 0; } } @media screen and (min-width: $viewport_m) { /* 3 колонки */ .grid__item { width: 33.333%; } } @media screen and (min-width: $viewport_l) { /* 4 колонки */ .grid__item { width: 25%; } } @media screen and (min-width: $viewport_xl) { /* 5 колонок */ .grid__item { width: 20%; } } @media screen and (min-width: $viewport_xxl) { /* 6 колонок */ .grid__item { width: 16.66%; } } /* изменения сайдбара на маленьких экранах (он превращается в скрытое меню) */ @media screen and (max-width: $viewport_xs - 1px) { .sidebar { transform: translate3d(-100%,0,0); } .sidebar.sidebar--open { transform: translate3d(0,0,0); } .sidebar.sidebar--open ~ .main { pointer-events: none; } .top-bar { padding: 22px 15px 10px 60px; } .menu-toggle { display: inline-block; } .sidebar .close-button { opacity: 1; top: 15px; right: 15px; pointer-events: auto; } .title--full { font-size: 2em; } .content__item { padding: 80px 20px 40px; } .close-button { padding: 10px 20px; } .close-button::before { content: ''; position: absolute; top: 0; right: 0; background: $color_secondary; border-bottom: 1px solid $color_primary; width: 100vw; height: 50px; pointer-events: none; z-index: -1; } } |
Данная техника является очень полезной, когда приходится работать с сетками. Оптимально было бы не использовать последний медиа-запрос, если бы мы хотели строго следовать подходу «сначала мобильные». Но поскольку данные стили применяются исключительно для маленьких экранов, нам бы не хотелось переопределять стили для больших экранов.
Посмотрите на разметку макета и на сам эффект, а также поразбирайтесь с исходным кодом. Мы очень надеемся, что данный шаблон окажется для вас полезным и вдохновляющим!
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
