Горизонтальные Слайды CSS и JavaScript. Создание Swipe-эффекта для Контента

Слайды CSS и JavaScript. Создание эффекта слайда контента

Горизонтальные Слайды CSS и JavaScript. Создание Swipe-эффекта для Контента

Анимация CSS для изменения содержимого фона в ответ на взаимодействие с пользователем

DEMODOWNLOAD

1. Документ HTML

Запустите проект, инициировав документ HTML. Он состоит из контейнера HTML, который содержит разделы <head> и <body>. <head> секции отвечают за хранение не видимого «описательного» контента и ссылок на внешние ресурсы, такие как файл CSS. Видимый контент помещается внутри секции <body> — как показано на шагах 2 и 3.

2. Навигационный контент

Первый элемент страницы, это навигация контента, состоящая из контейнера навигации, содержащего ряд ссылок. Каждая ссылка ссылается на контейнер статьи страницы через свой идентификатор. Использование навигационного контейнера для навигационных ссылок имеет преимущества как для стилей SEO, так и для CSS, без необходимости добавлять сложность в HTML.

<nav>
	<a href="#p1">Section 1</a>
	<a href="#p2">Section 2</a>
	<a href="#p3">Section 3</a>
</nav>

3. Основной контейнер

Main используется как контейнер для содержимого для чтения. Каждый раздел контента создается из контейнера статьи, который имеет атрибут ID, соответствующий связанной ссылке в навигации. Кроме того, каждый раздел статьи содержит пустой элемент span в качестве последнего элемента, который будет использоваться CSS для анимированного фонового эффекта.

<main>
	<article id="p1">
		<h1>Section 1</h1>
		<span></span>
	</article>
	<article id="p2">
		<h1>Section 2</h1>
		<span></span>
	</article>
	<article id="p3">
		<h1>Section 3</h1>
		<span></span>
	</article>
</main>

 

4. JavaScript

Создайте новый файл с именем ‘code.js’. Необходимо помнить, какой раздел статьи был выбран ранее при навигации к новой статье. Это достигается с помощью JavaScript для инициации «popstate» — изменения в URI, которое происходит при выборе одной из ссылок навигации. Это ведет к записи предыдущей ссылки «target» в атрибуте «data-previous», примененном к контейнеру «main».

var target = window.location.hash;
window.addEventListener("popstate", function(){
	if(target != ""){
		document.querySelector("main").setAttribute("data-previous", target);
	}
	target = window.location.hash;
});

 

5. Создайте CSS

Создайте новый файл под названием ‘styles.css’. Этот шаг инициирует файл со свойствами, позволяющий отображать html, body и main контейнеры по всей ширине и высоте экрана. Также устанавливаются правила для установки видимого интервала между границами и относительного позиционирования, которые необходимы для работы эффектов.

6. Контейнеры

Каждый контейнер содержимого должен отображаться через полную видимость основного контейнера родителя, как определено на предыдущем шаге. Целевой селектор используется для идентификации, когда он нацелен через URI; Они должны быть видны над всеми другими разделами, поэтому атрибут устанавливает z-index.

main article{
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	padding-top: 1em;
	overflow: auto;
}
main article:target{
	z-index: 999;

 

7. Фоновый элемент

Изменение фона производится из элементов, созданных для отображения с указанным цветом, которые ожидают просмотра, когда это необходимо. Их z-index должен быть ниже всего другого видимого содержимого, поэтому им задано значение -1. Эти элементы ссылаются с помощью подстановочных знаков (*) и селектора «last-child». Это обеспечивает гибкость использования любого типа элемента в качестве фонового элемента — пока они являются последним элементом, помещенным внутри контейнера статьи.

main article > *:last-child{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 100vw;
	z-index: -1;
	background: #000;
	transition: right 1s;
}
main article:target > *:last-child{
	animation: open 1s forwards;
}

 

8. Фоновые стили

Этот шаг определяет стили, используемые для компонентов фона. Обратите внимание на то, как здесь упоминается атрибут ‘data-previous’, примененный к контейнеру ‘main’ через JavaScript. Это позволяет применить предыдущий цвет фона к контейнеру основного содержимого, чтобы создать иллюзию прокрутки старого фона, когда новый фон прокручивается.

[data-previous="#p1"],
#p1 > span{
	background: green;
}
[data-previous="#p2"],
#p2 > span{
	background: blue;
}
[data-previous="#p3"],
#p3 > span{
	background: red;
}

 

9. Открытие и навигация

Заключительный шаг — определить, как отображаются анимация навигации и открытие фона. Навигацию необходимо размещать таким образом, чтобы она оставалась видимой в любое время, поэтому применяется использование фиксированного позиционирования в верхней части экрана. Анимация открытия просто устанавливает элемент вне поля зрения в первом кадре «from» и полностью отображается в конце «to» кадра. Все кадры между ними вычисляются автоматически.

nav{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	background: #000;
}


@keyframes open{
	from{ right: -100vw; }
	to{ right: 0; }
}

DEMODOWNLOAD

Aliexpress INTAliexpress INTAliexpress INT

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

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