Скролинг текста как в «Звездных войнах»

Как сделать титры из звезных войн на HTML и CSS.

Скроллинг текста из «Звездных войн» под углом 30-45 градусов с перспективой к горизонту - эта классика кинематографа, которая стала предметом всевозможных упражнений и уроков.

Первое, что нужно сделать, это написать контент для вашей HTML страницы. Мы использовали текст из нашего веб-сайта. В основном веб-сайт содержит заголовок и раздел для текста. Нам нужны два контейнера – один с ID “titles” и внутренний контейнер с контентом с ID “titlecontent”.

HTML:

<!doctype html>
<meta charset="utf8" />
<header></header>
<body>
<section>
<div id="titles">
<div id="titlecontent">
Тут ВАШ текст
</div>
</section>
</body>
</html>

Далее необходимо стилизовать дизайн. Нам нужно убедиться, что фон черный, шрифт San-Serif или современный "Droid Sans", и что мы будем использовать 100% высоту и ширину, установим “перспективу” добавим “transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg);”.

CSS

body, html
{
	width: 100%;
	height: 100%;
	font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
}
#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}

Добавим черный градиент сверху через псевдо-элемент.

CSS

#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

Используем правило для прокрутки текста путем добавления анимации keyframes.

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда у нас есть только два ключевых кадра — исходное и конечное состояние. Поддерживается только Chrome, Safari, Firefox, IE10 браузерами.

CSS

#titlecontent
{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

Весь исходный код

CSS:

body, html
{
	width: 100%;
	height: 100%;
	font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
}
#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(20deg);
}
#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}
#titlecontent
{
	position: absolute;
	top: 100%;
	animation: scroll 200s linear 0s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
анимации css
02:15
2376
Администратор