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

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

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

DEMODOWNLOAD

1. Определение HTML

Проект инициируется построением HTML-кода. Шаблон документа состоит из HTML контейнера для хранения разделов <head> и <body>. В разделе <head> хранятся описание документа и ссылки на внешний JavaScript и CSS. <body> используется для хранения видимого содержимого. Разделы 2 и 3.

2. Слайды CSS. Навигация контента

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

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

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

Основной тег HTML5 используется как контейнер для каждой из статей, содержащихся на странице. Каждая статья имеет Идентификатор, который соответствует навигационной ссылке, которые мы определили (в шаге 2). Статьи представляют собой контейнеры для отображения содержимого. Использование контейнеров для каждого раздела контента позволяет CSS контролировать свою позицию для Анимированной навигации.

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

4. Помощь JavaScript

Создаем новый файл с именем ‘code.js’. CSS требуется помощь JavaScript для поиска выбранного элемента навигации. JavaScript сохраняет заметку в текущем разделе и использует функцию «popstate», в которой изменяется URI. Обнаружив, она отключит любые существующие данные и поместит новые в статью.

window.addEventListener("load", function(){
	var target = "#"+document.querySelector("[id]").getAttribute("id");
	window.addEventListener("popstate", function(){
		if(target != "" && target != window.location.hash){
			var node = document.querySelector('[data-previous]');
			if(node != null)node.removeAttribute("data-previous");
			document.querySelector(target).setAttribute("data-previous", "");
		}
		target = window.location.hash;
	});
});

5. Инициируем CSS

Создаем новый файл под названием ‘styles.css’. Первая часть этого файла определит стили html, body и main container. Они настроены на отображение по всей ширине / высоте экрана без видимой границы. Для того, чтобы анимация работала, — основной контейнер использует относительное позиционирование.

body,html, main {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	padding: 0;
	margin: 0;
}

6. Основа статей

Статьи должны заполнять полную видимость в основном контейнере. Их позиционирование установлено так, что размещение не может быть использовано — относительно основного контейнера.
Свойству перехода задана анимация. Все статьи помещаются над областью видимой страницы по умолчанию, путем установки верхнего свойства на -100vh.

main article{
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	padding-top: 1em;
	overflow: scroll;
	transition: top 1s;
	top: -100vh;

7. Целевая статья

Выбранная статья требует, чтобы ее верхняя позиция после нажатия изменилось на ноль. К переходу применяется анимация, браузер будет анимировать это как переход. Хотя браузер не может напрямую отслеживать выбранную статью, JavaScript (определенный на шаге 4), допускает это посредством атрибута  «dataprevious».

main article:target{
	top: 0;
}
main article[data-previous]{
	animation: close 1s forwards;

8. Стили навигации и контента

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

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


#p1{ background: green; }
#p2{ background: blue; }
#p3{ background: red; }

9. Эффект перехода

Анимации перехода нужно, чтобы элемент анимировался вне поля зрения, а затем быстро расположил себя над видимой частью экрана. Эта достигается использованием анимационных кадров: первый (0%) и последний (99%) для выхода основной анимации. Финальный Кадр (100%) — это статья, которая быстро помещается в Конечное местоположение.

@keyframes close{
	0% { top: 0; }
	99% { top: 100vh; }
	100% { top: -100vh }
}

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

DEMODOWNLOAD

Aliexpress INTAliexpress INTAliexpress INT

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

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