Анимирование элементов сетки

demosourse

Адаптивная сетка, состоящая из элементов в стиле журнала. При нажатии на один из элементов раскрывается целый блок с полным описанием.

Сегодня мы бы хотели поделиться сеткой с анимированными элементами. В первом демо примере полное описание будет раскрываться на полную ширину самой сетки. Во втором раскрывается на весь экран.

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

Адаптивность для мобильных устройств осуществляется за счёт использования медиа запросов. Тут мы использовали Sass, чтобы иметь возможность выставить значение брейкпоинтов.

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

Основная разметка будет такой:

<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>
		<!-- ... other elements ... -->
	</div>

	<div class="main" id="theGrid" >

		<section class="grid">
			<header class="top-bar">
				<!-- header elements -->
			</header>
			<a class="grid__item" href="#">
				<!-- preview elements -->
			</a>
			<a class="grid__item" href="#">
				<!-- preview elements -->
			</a>
			<!-- ... -->
			<footer class="page-meta">
				<!-- ... -->
			</footer>
		</section><!-- /grid -->

		<section class="content">

			<div class="scroll-wrap">
				<article class="content__item">
					<!-- content -->
				</article>
				<article class="content__item">
					<!-- content -->
				</article>
				<!-- ... -->
			</div>

			<button class="close-button"><i class="fa fa-close"></i><span>Close</span></button>

		</section><!-- /content -->

	</div><!-- /main -->

</div><!-- /container -->

В данном проекте файлы Sass разделены на две основные части: основные стили и медиа запросы. Это лишь один из подходов организации CSS кода.

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

$item_width: 300px;
$sidebar_width: 300px;
$color_primary: #fafafa;
$color_secondary: #fff;
$color_link: #81c483;
$anim-time: 0.5s;

@import "base";
@import "mediaqueries";

Тут мы перечислили основные Sass переменные.

Далее определяем брейкпоинты (префиксы опущены):

/* Viewport sizes based on column number and sidebar */
$viewport_xs: 	$item_width + $sidebar_width; /* 1 column */
$viewport_s: 	$item_width * 2 + $sidebar_width; /* 2 columns */
$viewport_m: 	$item_width * 3 + $sidebar_width; /* 3 columns */
$viewport_l: 	$item_width * 4 + $sidebar_width; /* 4 columns */
$viewport_xl: 	$item_width * 5 + $sidebar_width; /* 5 columns */
$viewport_xxl: 	$item_width * 6 + $sidebar_width; /* 6 columns */

@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 columns */
	.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 columns */
	.grid__item {
		width: 33.333%;
	}
}

@media screen and (min-width: $viewport_l) {
	/* 4 columns */
	.grid__item {
		width: 25%;
	}
}

@media screen and (min-width: $viewport_xl) {
	/* 5 columns */
	.grid__item {
		width: 20%;
	}
}

@media screen and (min-width: $viewport_xxl) {
	/* 6 columns */
	.grid__item {
		width: 16.66%;
	}
}

/* small screen changes for sidebar (it becomes an off-canvas menu) */
@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;
	}
}

Надеемся данный пример вам пригодится!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/04/15/grid-item-animation-layout/
Перевел: Станислав Протасевич
Урок создан: 16 Апреля 2015
Просмотров: 10840
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^