Friday, 23 December 2023 23:55

Cool Zombie Outbreak

Cool Zombie Outbreak

STAY INDOORS: ZOMBIE OUTBREAK
STAY INDOORS: ZOMBIE OUTBREAK
<div id="marquee">
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
</div>
<form onsubmit="setText(event)"><label for="textsource">Source text</label> <input id="textsource" title="Text must be 5 to 30 characters in length" pattern=".{5,30}" type="text" value="STAY INDOORS: ZOMBIE OUTBREAK" /> <input type="submit" value="Use" /></form>
<script type="text/javascript" xml="space">// <![CDATA[
function setText(event){
  event.preventDefault();
  leftText.innerText = textsource.value.toUpperCase();
  rightText.innerText = textsource.value.toUpperCase();
}
var leftText = document.querySelector("#marquee div:first-of-type span");
var rightText = document.querySelector("#marquee div:last-of-type span");
var textsource = document.getElementById("textsource");
setText();
// ]]></script>
#marquee {
	margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block;
	height: 12rem;
	width: 30rem;
	position: relative;
}
#marquee div:first-of-type {
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}
#marquee div {
	font-size: 8rem;
	overflow: hidden;
}
#marquee div span {
	position: absolute;
	width: 400%;
	line-height: 1.4;
}
@keyframes leftcrawl {
	to {
		transform: translateX(-100rem);
	}
}
@keyframes rightcrawl {
	to {
		transform: translateX(-130rem);
	}
}
#marquee div:first-of-type span {
	transform: translateX(60rem);
	animation: leftcrawl 14s linear infinite;
	text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}
#marquee div:last-of-type span {
	transform: translateX(30rem);
	animation: rightcrawl 14s linear infinite;
}
#marquee form {
	margin-top: 3rem;
	background: #334;
	padding: 1rem;
	text-align: center;
	color: #fff;
}
#marquee input[type="text"] {
	padding: .5rem;
	font-size: 1.2rem;
	width: 22rem;
}
#marquee input[type="text"] {
	padding: .5rem;
}
l#marquee label {
	margin: 1rem;
}
@media all and (max-width: 993px) {
	#marquee {
		perspective: none;
	}
	#marquee div:last-of-type {
		opacity: 0;
		height: 0;
	}
	#marquee div:first-of-type {
		width: 80%;
	}
}
 

 

К примеру мы имеем такой список ul li

<ol>
    <li>Москва</li>
    <li>Вильнюс</li>
    <li>Хьюстон</li>
    <li>Буратино</li>
    <li>Гротеск</li>
</ol>
<ol>
    <li>Америка</li>
    <li>Китай</li>
    <li>Индия</li>
    <li>Таиланд</li>
    <li>Украина</li>
</ol>

 Javascript

// прописываем необходимые буквы в переменную
var letters = "абвгдежзиклмнопрстуфхцчшщэюя";
$.each($('ol'), function() {
    var item = $(this).find('li');
    item.each(function(i){
        $(this).attr("russ", letters[i] + ")");
    });
});

 Прописываем стиль

ol {
  list-style-type: none;
}
ol > li::before {
  display: inline-block;
  content: attr(russ);
  width: 1.2rem;
  margin-left: -2rem;
}