<div id="marquee">
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
<div aria-hidden="true"><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
</div>
<form onsubmit="setText(event)">
<label for="textsource">Source text</label>
<input type="text" id="textsource" value="STAY INDOORS: ZOMBIE OUTBREAK" autocapitalize="characters" pattern=".{5,30}" title="Text must be 5 to 30 characters in length">
<input type="submit" value="Use">
</form>
// 3D switched off on viewports less than 993px wide to preserve ledgibility
@font-face {
font-family: Agency;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body {
font-family: Avenir, sans-serif;
marging: 0;
}
#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;
}
form {
margin-top: 3rem;
background: #334;
padding: 1rem;
text-align: center;
color: #fff;
}
input[type="text"] {
padding: .5rem;
font-size: 1.2rem;
width: 22rem;
}
input[type="text"] {
padding: .5rem;
}
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%;
}
}
View Compiled
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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.