Многострочный Горизонтальный CSS эффект для Контента

Многострочный Горизонтальный CSS эффект для Контента

Многострочный Горизонтальный CSS эффект для Контента

Используйте анимацию CSS и JavaScript, чтобы привлечь внимание к внедрению нового контента

DEMODOWNLOAD

1. Определение HTML-документа

Запустите проект, указав шаблон документа, который состоит из контейнера HTML — родительского элемента для <head> и <body>. Раздел <head> хранит описания документа и ссылки на внешние ресурсы JavaScript и CSS, <body> сохраняет видимый контент, созданный на шагах 2 и 3.

2. Навигация HTML

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

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

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

4. JavaScript

Создайте новый файл с именем ‘code.js’. Чтобы избежать написания раздутого HTML, это плохо для SEO, мы используем JavaScript для автоматизации генерации элементов openTransition, которые делают переходный эффект. HTML для необходимых элементов генерируется и добавляется в контейнеры статей; В комплекте с расчетами высоты. Вы можете изменить количество элементов при переходе, изменив переменную «amount».

window.addEventListener("load", function(){
	var articles = document.querySelectorAll("main > article");
	var amount = 30, html = "", top = 0;
	var height = 100/amount;
	for(var i=0; i<amount; i++){
		html += "<span class='openTransition' style='height:"+height+"%; top:"+top+"%'></span>"
		top += height;
	}
	for(var i=0; i<articles.length; i++){
		articles[i].innerHTML += html;
	}
});

 

5. Инициирование CSS

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

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

 

6. Основные статьи

Дочерние элементы основного контейнера должны заполнять полный размер их родителя — основного контейнера. В этих статьях нужно использовать относительное позиционирование, чтобы обеспечить правильное позиционирование элементов перехода, созданных в JavaScript на шаге 4. Кроме того, целевые статьи будут отображаться с z-index выше всех элементов — 999 в примере ниже.

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

 

7. Переходные элементы

Элементы перехода .openTransition, определенные в JavaScript на этапе 4, требуют стилизации. Полупрозрачный цвет фона применяется с шириной, соответствующей их родительской. Переход применяется к «right» свойству, так что анимация (openLeft или openRight) показывает, что они перемещаются, когда используется их родительская статья. Использование значений «odd» и «even» в селекторе nth-child позволяет правильно применять анимацию для всех элементов без использования конкретных ссылок.

main article > .openTransition{
	position: absolute;
	display: block;
	width: 100%;
	height: 33%;
	top: 0;
	right: 0vw;
	background: rgba(0,0,0,.25);
	transition: right 1s;
}
main article:target > .openTransition:nth-child(odd){
	animation: openRight 1s forwards;
}
main article:target > .openTransition:nth-child(even){
	animation: openLeft 1s forwards;
}

 

8. Уникальные статьи и навигация

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

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


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

 

9. Главный Эффект

Элементы перехода, определенные на этапах 4 и 7, требуют анимации «openLeft» или «openRight», в зависимости от того, четные или нечетные дочерние элементы к их родительской статье. Последний шаг — определяет, как работают эти анимации, — просто определяет, какие кадры перемещаются слева направо или справа налево.

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

DEMODOWNLOAD

Aliexpress INTAliexpress INTAliexpress INT

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

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