<ul style="visibility:hidden;">
	<li>
		“The rainbow flag has become
	</li>
	<li>
		far more than just a flag,
	</li>
	<li>
		it gives people hope.”
	</li>
	<li>
		Gilbert Baker
	</li>
	<li>
		(June 2, 1951 – March 31, 2017) 
	</li>
	<li>
		“We needed something to express
	</li>
	<li>
		our joy, our beauty, our power.
	</li>
	<li>
		And the rainbow did that.”
	</li>
	<li>
		“That's really how I ended up 
	</li>
	<li>
		making the first flag.
	</li>
	<li>
		I was the guy who could sew it.”
	</li>
	<li>
		[ <a href="https://www.typewithpride.com/" target="_blank">Download Gilbert font here</a> ]
	</li>  
</ul> 
// Gilbert is a cool font by Robyn Makinson 
// It was created with Fontself Maker & hosted using Fontself Catapult
@import url('https://fonts.fontself.com/gE309jx/gilbert-color-bold-preview4.css');

// Showcasing glyph alternates
.aalt-0 {
font-feature-settings: "aalt" 0; 
}
.aalt-1 {
font-feature-settings: "aalt" 1; 
}
.aalt-2 {
font-feature-settings: "aalt" 2; 
}

// Animation based on a cool pen by carpe numidium https://codepen.io/carpenumidium/pen/ZOjawV
$fontsize: 10vh;

$lines: 12; // no of <li> elements, has to be an even number. Still learning how sass works, I'm getting a warning when an odd number is used.

$delayandduration: 1.1; // use this number to divide both animation duration for <ul> and animation delay for <li>. Controls the speed of the animation. Greater = faster.

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
body {
	background-color: #f9f9f9;
	color: black;
	// overflow: hidden;
	}
ul {
	overflow: hidden;
	perspective: 900px;
	list-style: none;
	height: 100vh;
	max-height: 500px;
	min-height: 400px;
	width:100%;
	//min-width:1000px;
	text-align: center;
	// animation: 60s width-sway linear infinite;
	}
@keyframes width-sway {
	0%, 100% {
		width: 500px;
		// transform: rotate(10deg);
		}
	50% {
		width: 100%;
		// transform: rotate(-10deg);
		}
	}
li {
	position: absolute;
	top: 0;
	left:5vh;
	width: 100%; //100%
	
	transform: translateY(100vh) translateX(30vh);
	
	font-size: $fontsize;
	font-family: gilbert-color-bold-preview4, sans-serif;

	animation: #{$lines/$delayandduration}s spiral-staircase linear infinite;
	}

@for $i from 1 through $lines {
	li:nth-child(#{$i}) {
		animation-delay: #{$i/$delayandduration}s;
		}
	}

@for $r from 1 through $lines/2 {
	li:nth-child(#{$r}) {
		right: #{$r}rem;
		}
	li:nth-last-child(#{$r}) {
		right: #{$r}rem;
		}
	}

@keyframes spiral-staircase {
	0% {
		transform: rotateY(90deg) translateY($fontsize*12) rotate(0deg);
		//filter: blur(4px);	
	}
	0%, 100% {
		// opacity: 0;
		}
	50% {
		//filter: blur(0px);	
	}
	100% {
		transform: rotateY(-90deg) translateY(-$fontsize*3) rotate(0deg);
			//filter: blur(4px);	
		}
	}

ul {
	visibility:visible !important;
}

a:link { color: black; } 
a:visited { color: black; }
// Randomizing alternates on each letter
var list = document.getElementsByTagName("UL")[0]
// Prevent processing last line
for (var i=0; i < list.childElementCount - 1; i++) {
	var textSource = list.getElementsByTagName("LI")[i].innerHTML
	list.getElementsByTagName("LI")[i].innerHTML = mixAlternates (textSource, 3)
}

function mixAlternates (txt, maxAlts) {
  var txtString = ''
  for (var i=0; i < txt.length; i++) {
		var letterVersion = Math.floor((Math.random() * maxAlts))
		txtString += '<span class="aalt-'+letterVersion+'">'+txt[i]+'</span>'
	}
	return txtString
}

warnIfColorFont();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1785737/color-font-warning.js
  2. https://cdn.jsdelivr.net/gh/RoelN/ChromaCheck/chromacheck-min.js