Related items

• Cool Zombie Outbreak
  in CSS

  Cool Zombie Outbreak

  STAY INDOORS: ZOMBIE OUTBREAK

  STAY INDOORS: ZOMBIE OUTBREAK

  Source text

  <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%;
  	}
  }