274 reads

The Storybook Landing Page: A CSS/JavaScript Animated Splash Screen Landing Page

by Bob Wright21mFebruary 3rd, 2023

Too Long; Didn't Read

A low frame rate GIF capture of the website landing page for the **[Synthetic Reality](https://syntheticreality.net/)** domain. The object of the landing page is to present a measure of the proverbial eye candy sufficient to entice the viewer to look further. The landing page itself is rendered by two pieces of code.

People Mentioned

featured image - The Storybook Landing Page: A CSS/JavaScript Animated Splash Screen Landing Page

A popular aphorism has it that “a picture is worth a thousand words.” This picture is a low frame rate GIF capture of the website landing page for the Synthetic Reality domain. The object of the landing page is to present a measure of the proverbial eye candy sufficient to entice the viewer to look further and to provide a method for the viewer to explore further by some means of entry or navigation. And by the way, the actual web page displayed by our code is much smoother than our GIF image.

The landing page itself is rendered by two pieces of code, the first being an HTML file, Storybook.html, which is largely composed of JavaScript that is used for timing the animation sequences. Besides the script code, the HTML also contains the nominally semantic content for the page, i.e., the text messages, along with a few images, like the spinning globe logo and the hallway that are backgrounds for those introductory text messages. The second major piece of code is the Cascading Style Sheet (CSS), Landing.css, which defines the appearance of our content.

In spite of, or even more perhaps because of, the page focus is on content presented as animated images, we still need to keep the notion of accessibility in mind. This next image shows the results of the WebAIM accessibility test running the landing page code, and as may be seen, there are no errors, and some features (relative to navigation) are provided.

The HTML code uses some CSS libraries to accomplish the page display styling. To that end, Storybook.html uses the Bootstrap and the Material Design Bootstrap (MDB) libraries along with the Landing.css custom CSS file, which includes much of the animation functionality. Other animation functions for the page are accomplished by the JavaScript code, which uses jQuery, and a really neat animation package, the GreenSock Animation Program (GSAP), which is used to animate the introductory “expanding title” marquee. The script also scales the hallway image.

A final “closure” for the landing page is in the form of a character’s drop screen similar in concept to that seen in The Matrix movie with the addition of colors besides shades of green. This uses the canvas HTML element with JavaScript-generated content. The “matrix drop screen” is included in the article GitHub code repo as a standalone proggie.

All of the codebase and source content for the landing page, including the images and fonts, is also presented in the GitHub code repo, but as a convenience for the reader, we include the HTML file listing here next below:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Storybook</title>
	<script> document.documentElement.classList.remove("no-js")	</script>
	<base href="https://syntheticreality.net/">
	<link href="https://syntheticreality.net/" rel="canonical">
	<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
	<meta property="og:url" content="https://syntheticreality.net/Storybook.html" >
	<meta property="og:type" content="website" >
	<meta property="og:title" content= "Storybook Builder" >
	<meta property="og:description" content="by Bob Wright">
	<meta property="og:image:type" content="image/png" >
	<meta property="og:image:width" content="1800" >
	<meta property="og:image:height" content="960" >
	<meta property="og:image" content="https://syntheticreality.net/scenery98gray.png" >
	<meta name="description" content="my code and includes modified content from various sources" />
	<meta name="keywords" content="landing page, text, animation, javascript" />
	<meta name="author" content="Bob Wright" />
	<meta name="rating" content="general">
	<meta name="robots" content="index, follow"/> 
	<link rel="shortcut icon" href="./favicon.ico">
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="./CSS/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="./CSS/mdb.min.css">
	<!-- <link rel="stylesheet" type="text/css" href="./CSS/storybookLanding.css" /> -->
	<link rel="stylesheet" type="text/css" href="./CSS/Landing.css" />
</head>
<body>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/gsap.js"></script>
<script>
//$(document).ready(function () {
	console.info( "are we ready!" );
/* $(document).ready(function () {
	console.info( "we are ready!" );
}); */
//$(document).ready(function () {
$( window ).on( "load", function() {
	console.info( "we are ready!" );
    //'use strict';
 var showVPDetails = 1;
 var viewportWidth = $(window).width();
 var viewportHeight = $(window).height();
	$("#wrapper").hide(0);
	$("#content").hide(0);
	$(".textANI.three").hide(0);
	$(".textANI1.four").hide(0);
	$(".textANI2.seven").hide(0);
	$("#eyes").hide(0);

	$(".matrix").hide(0);
	$("#flyout").hide(0);
	$("#flyout2").hide(0);
	$("#back2Home").hide(0);

	var message = "Right-click disabled"; 
	function clickIE() {if (document.all) {(message);return false;}} 
	function clickNS(e) {if 
	(document.layers||(document.getElementById&&!document.all)) { 
	if (e.which==2||e.which==3) {(message);return false;}}} 
	if (document.layers) 
	{document.captureEvents(Event.MOUSEDOWN);document.onmousedown = clickNS;} 
	else{document.onmouseup = clickNS;document.oncontextmenu = clickIE;} 
	document.oncontextmenu = new Function("return false");

	// Display the Landing screen
	var tl = new TimelineLite(),
	inter = 30,
	speed = 2,
	$text = $('.text');
	function animInfinite() {
	$('.text').each(function (index, val) {
	  index = index + 1;
	  TweenMax.fromTo(
	  $(this), speed, { autoAlpha: 0 }, { autoAlpha: 0 + 0.01 * index, delay: 0.1 * index });
	});
	TweenMax.to($('.text:nth-child(30)'), speed, { autoAlpha: 1.5, delay: 3.5 });
	}

// scale the images to fill the viewport and keep aspect
$(window).resize(function() {

 if(showVPDetails == 1) {
  var viewportWidth = $(window).width();
  var vpWidth = parseInt(viewportWidth);
    var fontSize = '2vw';
    if(vpWidth <= 840) { fontSize = '2vw' } else { fontSize = '1.5vw' };
	$("body").append('<div id="viewport-size" title="Viewport Size and Aspect" style="display:block;color:#fff;background:#08F;position:fixed;top:0;left:0;font-size:' + fontSize + ';z-index:20;"></div>');
  var viewportHeight = $(window).height();
  var vpHeight = parseInt(viewportHeight);
  var VPaspectRatio = viewportWidth / viewportHeight;
	var VPaspectRounded = (Math.round(VPaspectRatio * 100)) / 100;
	  // console.info("rounded VP aspect " + VPaspectRounded);
	$("#viewport-size").html('<div class="dimensions">' + viewportWidth + ' &times; ' + viewportHeight + ' px &amp; w/h = ' + VPaspectRounded + ' </div>');
 }
  // Display the StoryBook Comic Book Builder screen
  // get the image dimensions, faster to have sizes already specified
  var elWidth = document.getElementById('content_img').width;
  // console.info("eW "+ elWidth);
  if (elWidth == null) {
	var elWidth = document.getElementById('content_img').naturalWidth;
  // console.info("nW "+elWidth);
  }
  var elHeight = document.getElementById('content_img').height;
	// console.info("eH "+ this.getAttribute("height"));
  if (elHeight == null) {
	var elHeight = document.getElementById('content_img').naturalHeight;
	// console.info("nW "+ elHeight);
  }
  var imgSize = "Img Size: " + elWidth + " X " + elHeight;
  // console.log(imgSize);
  // checkpoint for zero height image
	if (elHeight == 0) {return};
	 elWidth = parseInt(elWidth);
	 elHeight = parseInt(elHeight);
	 viewportWidth = parseInt(viewportWidth);
	 viewportHeight = parseInt(viewportHeight);
	 // console.info("eW "+elWidth);
	 // console.info("eH "+elHeight);
	 // console.info("vW "+viewportWidth);
	 // console.info("vH "+viewportHeight);
	var aspect = elWidth/elHeight;
	var aspectRounded = (Math.round(aspect * 100)) / 100;
	 // console.info("rounded img aspect " + aspectRounded);
	var widthRatio = viewportWidth / elWidth;
	var heightRatio = viewportHeight / elHeight;
	 // console.info("wR "+widthRatio);
	 // console.info("hR "+heightRatio);
	 // default to the width ratio until proven wrong
	var scale = widthRatio;
	if (widthRatio * elHeight > viewportHeight) {
		scale = heightRatio;};
	//  console.info("\nwR "+widthRatio);
	//  console.info("hR "+heightRatio);
	//  console.info("scale "+scale);
	//  scale = scale * .98;
	//  console.info("finalscale " + scale);
	var scaleRounded = (Math.round(scale * 100)) / 100;
	//  console.info("rounded scale " + scaleRounded);
	//  fit the content into the window
	var hsize  = Math.round(elWidth * scale);
	var vsize = Math.round(elHeight * scale);
	 //console.info ("hsize "+hsize);
	 //console.info ("vsize "+vsize);
  // finally set the scaled image width and height attributes
  document.getElementById('content_img').width = hsize;
  document.getElementById('content_img').height = vsize;

	// Display the "matrix" screen
	var ctx = c.getContext("2d");
	// full screen canvas
	c.height = vpHeight;
	c.width = vpWidth;
	//character set
	var character = "0123456789@#$%^&?©ΓειάσουΚόσμε田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑مرحبابالعالمПрывітаннеСусветСәлемӘлемសួស្តីពិភពលោកಹಲೋ ವರ್ಲ್ಡ್안녕하세요월드ສະບາຍດີຊາວໂລກ";
	//array of characters
	character = character.split("");
	var font_size = 26;
	var columns = c.width/font_size; //number of columns for the rain
	//an array of drops - one per column
	var drops = [];
	//x below is the x coordinate
	//1 = y co-ordinate of the drop(same for every drop initially)
	for(var x = 0; x < columns; x++) {
	drops[x] = 1;}
	//draw the characters
	function draw(){
		//Black BG for the canvas
		//translucent BG to show trail
		var opacity = 0.01;
		if(Math.random() > 0.9) {
		var opacity = 0.075};
		ctx.fillStyle = "rgba(0, 0, 0, "+opacity+")";
		ctx.fillRect(0, 0, c.width, c.height);
		//	var color = (Math.floor(Math.random()*10));
		//	if(color > 5) {ctx.fillStyle = "#F80";} else {ctx.fillstyle = "#0ff";}
		ctx.fillStyle = "#fff"; // text
			var color = (Math.floor(Math.random()*10));
			if(color == 9) {ctx.fillStyle = "#0ff";}
			if(color == 8) {ctx.fillStyle = "#8f0";}
			if(color == 7) {ctx.fillStyle = "#a3d";}
			if(color == 6) {ctx.fillStyle = "#e23";}
			if(color == 5) {ctx.fillStyle = "#f90";}
			if(color == 4) {ctx.fillStyle = "#ff1";}
			if(color == 3) {ctx.fillStyle = "#29f";}
			if(color == 2) {ctx.fillStyle = "#f0f";}
			if(color == 1) {ctx.fillStyle = "#f50";}
		ctx.font = font_size + "px arial";
		//looping over drops
		for(var i = 0; i < drops.length; i++){
			//a random character to print
			var text = character[Math.floor(Math.random()*character.length)];
			//x = i*font_size, y = value of drops[i]*font_size
			ctx.fillText(text, i*font_size, drops[i]*font_size);
			//sending the drop back to the top randomly after it has crossed the screen
			//adding a randomness to the reset to make the drops scattered on the Y axis
			if(drops[i]*font_size > c.height && Math.random() > 0.75)
				drops[i] = 0;
			//incrementing Y coordinate
			if(drops[i] > 6 && (Math.random() > 0.9)) {
			drops[i] = drops[i] - 6;}
			drops[i]++;
		}
	}
	setInterval(draw, 80);
}).trigger('resize');

	// Run the timeline
	setTimeout(function() {
		$("#wrapper").show(0);
	}, 0);
	animInfinite();
	setTimeout(function() {
		$("#wrapper").hide(0);
		$("#content").show(0);
		//$("#content_text-wrap").show(0);
		$(".content_img").show(0);
	$("#back2Home").show(0);
	$("#flyout").show(0);
	$("#flyout2").show(0);
	}, 6000);
	setTimeout(function() {
		$("#content_text-wrap").hide(0);
		$(".textANI.three").show(0);
	}, 8000);
	setTimeout(function() {$("#eyes").show(0);}, 9500);
	setTimeout(function() {
		$(".textANI1.four").show(0);
	}, 14500);
	setTimeout(function() {
		$(".textANI.three").hide(500);
		$(".textANI2.seven").show(0);
	}, 16500);
	setTimeout(function() {
		$("#eyes").hide(0);
		$(".textANI1.four").hide(0);
	}, 20500);
	setTimeout(function() {
		$(".textANI2.seven").hide(0);
	}, 22500);
	setTimeout(function() {
		$(".content_img").hide(500);
		$("#content").hide(0);
	}, 23500);

    setTimeout(function () {$(".matrix").show(0);}, 23500);
	//var c = document.getElementById("myBody").style.cursor = "pointer";
});
</script>
<!--#include file="./includes/browserupgrade.ssi" -->
<!-- <main class="container-fluid main-container d-flex flex-column"> -->
<main class="container-fluid main-container">
	<!-- ++++++++++++++++++++ -->
	<!-- display our content -->
	<!-- Title page -->
	<section class="row row-no-gutters">
     <img class="sr-only" alt="Synthetic Reality outline text zooms out over spinning logo globe." width="1px" height="1px" src="./Imgs/1x1pixel.png">
	<div  id="wrapper" class="col-12 px-sm-0" style="display: none;">
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<div class="text">Synthetic<br>Reality</div>
		<header class="text">Synthetic<br>Reality</header>
	</div>
	</section>

	<!-- StoryBook page -->
	<section id="content" style="display: none;">
		<img id="content_img" src="./Imgs/5.jpg" width="847px" height="565px" alt="a long hall receding to darkness in the distance.">
		<div id="content_text-wrap" class="content_text-wrap row d-flex align-items-top row-no-gutters">
		<!--	<div class="content_text--top col-10 d-flex px-sm-0 justify-content-left">
			<h1 class="content_text-inner">Story</h1>
			</div> -->
			<div class="content_text--mtop col-10 d-flex px-sm-0 justify-content-center">
			<h3 class="content_text-inner content_text-inner--stroke">This is</h3>
			</div> -->

			<div class="content_text--middle col-12 d-flex px-sm-0 justify-content-center">
			<h1 class="content_text--full">StoryBook</h1>
			</div>

		<!--	<div class="content_text--mbottom col-10  d-flex px-sm-0 justify-content-end">
			<h1 class="content_text-inner content_text-inner--stroke">Book</h1>
			</div>
			<div class="content_text--bottom col-10  d-flex px-sm-0 justify-content-end">
			<h1 class="content_text-inner ">Book</h1>
			</div> -->
		</div>
	</section>
	<section>
		<div class="textANI three">
			<span>I</span><span>m</span><span>a</span><span>g</span><span>e</span>&ensp;
			<span>G</span><span>a</span><span>l</span><span>l</span><span>e</span><span>r</span><span>y</span>&ensp;<span>M</span><span>a</span><span>k</span><span>e</span><span>r</span>
		</div>
		<div class="textANI1 four">
			<span>a</span><span>n</span><span>d</span>
		</div>
		<div class="textANI2 seven">
			<span>C</span><span>o</span><span>m</span><span>i</span><span>c</span>&ensp;
			<span>B</span><span>o</span><span>o</span><span>k</span>&ensp;<span>B</span><span>u</span><span>i</span><span>l</span><span>d</span><span>e</span><span>r</span>
		</div>		
		<div class="eyes">
			<img id="eyes" src="./Imgs/blinky.gif" alt="a pair of red eyes that blink open.">
		</div>
	</section>
	<section class="matrix" title="Drop character screen like the matrix.">
		<canvas id="c" height="100vh" width="100vw"></canvas>
	</section>

	<!-- +++++++++++++++++++++++ -->
	<!-- Navigation  -->
<style>
#back2Home a:focus, #flyout a:focus, #flyout2 a:focus {
  /*background-color: GreenYellow;*/
  	outline: .8vw solid GreenYellow;
}
</style>
	<nav>
	<button id="back2Home" title="Go to the site Home Page" type="button"><a href="./index.php" title="Go to the site Home Page">
	<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  id="Home" class="Home"
	width="60pt" height="40pt"  viewBox="0 0 40.000000 44.000000" alt="Go to the site Home Page">
	<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
	fill="green" stroke="green" stroke-width="5">
	<path d="M60 367 c0 -55 -3 -67 -25 -87 -28 -27 -32 -40 -10 -40 8 0 15 -6 15
	-14 0 -21 20 -30 33 -17 14 14 87 15 87 1 0 -6 32 -10 75 -10 l75 0 0 -100 0
	-100 25 0 25 0 0 120 c0 100 3 120 15 120 8 0 15 4 15 9 0 11 -184 181 -196
	181 -4 0 -18 -10 -31 -22 l-23 -21 0 21 c0 19 -6 22 -40 22 l-40 0 0 -63z"/>
	<path d="M47 184 c-4 -4 -7 -47 -7 -96 l0 -88 85 0 86 0 -3 92 c-3 85 -5 93
	-23 93 -16 0 -21 -8 -23 -42 -3 -43 -3 -43 -42 -43 -38 0 -39 0 -42 42 -3 39
	-16 57 -31 42z"/>
	</g></svg></a></button>
	<!-- proceed to comics page flyout -->
	<button id="flyout" title="Go to Comics page" type="button"><a href="./Comics/Comics.php" title="Go to Comics page"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" id="comicsPage" width="50.000000pt" height="33.000000pt" viewBox="0 0 150.000000 133.000000" class="bi bi-layout-wtf" preserveAspectRatio="xMidYMid meet" alt="Go to Comics page"><g transform="translate(0.000000,133.000000) scale(0.100000,-0.100000)" fill="none" stroke="#000000" stroke-width="36px"><path d="M325 1309 c83 -5 172 -12 198 -17 27 -6 56 -8 65 -5 24 6 122 -87 122 -116 0 -39 -29 -36 -73 7 -31 31 -55 44 -92 52 -77 15 -258 30 -377 30 l-108 0 0 -495 0 -495 109 0 c166 0 404 -19 482 -39 l69 -17 0 437 c0 285 4 448 11 466 15 40 57 81 110 108 84 43 270 79 454 88 33 2 -205 3 -530 4 -413 0 -545 -2 -440 -8z"/><path d="M1175 1248 c-179 -20 -310 -61 -362 -114 l-33 -32 0 -447 c0 -386 2 -446 14 -442 75 29 342 57 544 57 l102 0 0 495 -1 495 -92 -1 c-51 -1 -128 -6-172 -11z"/><path d="M164 201 c4 -6 2 -18 -4 -26 -11 -13 -3 -15 56 -15 212 0 461 -32 511 -66 20 -13 27 -13 51 0 50 26 174 46 360 58 100 6 177 15 171 19 -7 4 -9 15 -5 25 6 16 -3 17 -146 10 -213 -9 -378 -42 -378 -75 0 -17 -57 -13 -64 4 -14 39 -145 63 -375 72 -142 5 -182 3 -177 -6z"/></g></svg></a></button>
	<!-- proceed to galleries page flyout -->
	<button id="flyout2" title="Go to SyntheticReality galleries page" type="button"><a href="./Galleries/Galleries.php" title="Go to SyntheticReality home page"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" id="galleriesPage"  width="50.000000pt" height="33.000000pt" viewBox="0 0 16 16" class="bi bi-card-image" fill="currentColor" xmlns="http://www.w3.org/2000/svg" alt="Go to SyntheticReality home page"><path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M10.648 7.646a.5.5 0 0 1 .577-.093L15.002 9.5V13h-14v-1l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71z"/><path fill-rule="evenodd" d="M4.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg></a>
	</button>
	</nav>
</main>
<!-- =========================== -->
</body>
</html>

And our CSS stylesheet code: here next:

*,
*::after,
*::before {
	box-sizing: border-box;
	outline: none;
}
:root {
	font-size: 10px;
}
@font-face {
	font-family: "Merriweather Bold";
	src: url("../Fonts/Merriweather-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Merriweather";
	src: url("../Fonts/Merriweather-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Noto Sans";
	src: url("../Fonts/NotoSans-Regular.ttf") format("truetype");
  }
@font-face {
	font-family: "Roboto Slab";
	src: url("../Fonts/RobotoSlab-Regular.ttf") format("truetype");
}
html {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #000;
}
html body main {
  min-height: 100vh;
  height: 100vh;
  min-width: 100vw;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
	display: block;
}
@media screen and (max-width: 480px) {
H1 {font-size: 14vw;}
H2 {font-size: 13vw;}
H3 {font-size: 8vw;}
p {font-size: 8vw;}
#back2Home, #flyout, #flyout2 {width: 9vw;height: 9vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 481px) and (max-width: 600px) {
H1 {font-size: 13vw;}
H2 {font-size: 10vw;}
H3 {font-size: 7vw;}
p {font-size: 6vw;}
#back2Home, #flyout, #flyout2 {width: 9vw;height: 9vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 601px) and (max-width: 840px) {
H1 {font-size: 13vw;}
H2 {font-size: 10vw;}
H3 {font-size: 7vw;}
p {font-size: 7vw;}
#back2Home, #flyout, #flyout2 {width: 9vw;height: 9vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 841px) and (max-width: 960px) {
H1 {font-size: 14.5vw;}
H2 {font-size: 13vw;}
H3 {font-size: 5vw;}
p {font-size: 6vw;}
#back2Home, #flyout, #flyout2 {width: 8vw;height: 8vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
H1 {font-size: 11vw;}
H2 {font-size: 10vw;}
H3 {font-size: 5vw;}
p {font-size: 5vw;}
#back2Home, #flyout, #flyout2 {width: 6vw;height: 6vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
H1 {font-size: 10vw;}
H2 {font-size: 9vw;}
H3 {font-size: 4vw;}
p {font-size: 5vw;}
#back2Home, #flyout, #flyout2 {width: 6vw;height: 6vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 1441px) and (max-width: 1920px) {
H1 {font-size: 9.5vw;}
H2 {font-size: 8vw;}
H3 {font-size: 4.5vw;}
p {font-size: 4.5vw;}
#back2Home, #flyout, #flyout2 {width: 6vw;height: 6vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
@media screen and (min-width: 1921px) {
H1 {font-size: 9vw;}
H2 {font-size: 8vw;}
H3 {font-size: 4.5vw;}
p {font-size: 4.5vw;}
#back2Home, #flyout, #flyout2 {width: 6vw;height: 6vw;}
#upArrow, #comicsPage, #galleriesPage {width: 80%;height: 80%; margin: 7%;}
}
/* storybookLanding.css */
#wrapper:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
	z-index: -1;
	background-color: #112;
	opacity: 0.8;
    background-image: url("../Imgs/IsoBlockSphere.gif");
	background-position: center;
    background-repeat: no-repeat;
    -ms-background-size: 25% 25%;
    -o-background-size: 25% 25%;
    -moz-background-size: 25% 25%;
    -webkit-background-size: 25% 25%;
    background-size: 25vw 25vh;
}
html body #wrapper {
  font-family: 'Merriweather Bold', serif;
	--maxFontSize: 15vw;
	--minFontSize: 2vw;
	--stepCount: 30;
	--fontStepSize: calc((var(--maxFontSize) - var(--minFontSize)) / var(--stepCount));
}	
html body #wrapper .text:nth-child(30) {
  font-size: calc(var(--maxFontSize));
}
html body #wrapper .text:nth-child(29) {
  font-size: calc(var(--maxFontSize) - var(--fontStepSize));
}
html body #wrapper .text:nth-child(28) {
  font-size: calc(var(--maxFontSize) - 2 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(27) {
  font-size: calc(var(--maxFontSize) - 3 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(26) {
  font-size: calc(var(--maxFontSize) - 4 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(25) {
  font-size: calc(var(--maxFontSize) - 5 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(24) {
  font-size: calc(var(--maxFontSize) - 6 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(23) {
  font-size: calc(var(--maxFontSize) - 7 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(22) {
  font-size: calc(var(--maxFontSize) - 8 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(21) {
  font-size: calc(var(--maxFontSize) - 9 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(20) {
  font-size: calc(var(--maxFontSize) - 10 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(19) {
  font-size: calc(var(--maxFontSize) - 11 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(18) {
  font-size: calc(var(--maxFontSize) - 12 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(17) {
  font-size: calc(var(--maxFontSize) - 13 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(16) {
  font-size: calc(var(--maxFontSize) - 14 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(15) {
  font-size: calc(var(--maxFontSize) - 15 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(14) {
  font-size: calc(var(--maxFontSize) - 16 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(13) {
  font-size: calc(var(--maxFontSize) - 17 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(12) {
  font-size: calc(var(--maxFontSize) - 18 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(11) {
  font-size: calc(var(--maxFontSize) - 19 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(10) {
  font-size: calc(var(--maxFontSize) - 20 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(9) {
  font-size: calc(var(--maxFontSize) - 21 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(8) {
  font-size: calc(var(--maxFontSize) - 22 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(7) {
  font-size: calc(var(--maxFontSize) - 23 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(6) {
  font-size: calc(var(--maxFontSize) - 24 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(5) {
  font-size: calc(var(--maxFontSize) - 25 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(4) {
  font-size: calc(var(--maxFontSize) - 26 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(3) {
  font-size: calc(var(--maxFontSize) - 27 * var(--fontStepSize));
}
html body #wrapper .text:nth-child(2) {
  font-size: calc(var(--maxFontSize) - 28 * var(--fontStepSize));;
}
html body #wrapper .text:nth-child(1) {
  font-size: calc(var(--maxFontSize) - 29 * var(--fontStepSize));
}
html body #wrapper .text {
  font-family: 'Merriweather Bold', serif;
  position: absolute;
  height: 100%;
  max-width: 95vw;
  min-height: 100%;
  margin-top: calc(40vh - var(--maxFontSize));
  display: flex;
  flex-direction: column;
  text-align: center;
  text-fill-color: blue;
  text-stroke-width: .3vw;
  text-stroke-color: orange;
  -webkit-text-fill-color: blue;
  -webkit-text-stroke-width: .3vw;
  -webkit-text-stroke-color: orange;
  left: 50%;
  transform: translate(-50%);
  letter-spacing: 10px;
}
#content {
	display: block;
	height: 100vh;
	width: 100%;
	max-height: 100%;
	max-width: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#content_img {
	height: 100%;
	margin-top: 0%;
	z-index: -1;
	width: 100%;
	margin-left:0%;
	overflow: hidden;
	opacity: 0.5;
	animation: loaderAnim 1.5s linear backwards;
}
@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}
#eyes {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 50vh;
	left: 52vw;
	display: block;
	width: 2vw;
	height: 3vh;
}
.content_text-wrap {
	display: block;
	/*line-height: 0.5;*/
	height: 100vh;
	width: 100vw;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: lighten;
}
.content_text-inner {
	text-transform: uppercase;
	/*font-size: 12vw;
	line-height: 1;*/
	font-family: 'Merriweather Bold';
}
.content_text-inner--stroke {
	-webkit-text-stroke: 3px yellow;
	text-stroke: 3px yellow;
/*	-webkit-text-fill-color: #002080;
	text-fill-color: #002080;
	color: #002080;*/
}
.content_text--top, .content_text--bottom {
	opacity: 0;
	animation: showContent 2s linear;
}
@keyframes showContent {
	20% {
		opacity: 0.2;
		color: #0000d0;
	}
	40% {
		opacity: 0.4;
		color: #0000d0;
	}
	60% {
		opacity: 0.6;
		color: #00ffff;
	}
	80% {
		opacity: 0.8;
		color: #ff4000;
	}
	95% {
		opacity: 1;
		color: #ff8000;
	}
	100% {
		opacity: 0;
		color: #fff;
	}
}
.content_text--mtop, .content_text--mbottom {
	opacity: 0;
	animation: showMContent2 2s linear;
	animation-delay: 1.6s;
}
@keyframes showMContent2 {
	20% {
		opacity: 0.2;
		color: #0000d0;
	}
	40% {
		opacity: 0.4;
		color: #0000d0;
	}
	60% {
		opacity: 0.6;
		color: #00ffff;
	}
	80% {
		opacity: 0.8;
		color: #ff4000;
	}
	95% {
		opacity: 1;
		color: #ff8000;
	}
	100% {
		opacity: 0;
		color: #fff;
	}
}
.content_text--full {
/*flex: none; */
  display: block;
	visibility: hidden;
	text-transform: uppercase;
	font-family: 'Merriweather Bold';
	-webkit-text-stroke: 3px yellow;
	text-stroke: 3px yellow;
	z-index: 15;
  animation: flux 2s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 2s linear infinite;
  -o-animation: flux 2s linear infinite;
  animation-delay: 3s;
}
@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
	-webkit-text-fill-color: #28D7FE;
	text-fill-color: #28D7FE;
	color: #28D7FE;
	visibility: visible;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
	-webkit-text-fill-color: #146C80;
	text-fill-color: #146C80;
    color: #146C80;
	visibility: visible;
  }
}
.textANI {
  font-family: 'Merriweather Bold', serif;
	position: absolute;
	top: 65vh;
	width: 90%;
	font-size: 5.5vw;
	/*font-weight: 900;*/
	/*text-transform: uppercase;*/
	text-align: center;
	text-stroke-width: 1px;
    text-stroke-color: #ffff00;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffff00;
	margin-left: 5%;
	--slideDelay: 1s;
}
.textANI span {
	display: inline-block;
}
.textANI span:nth-of-type(1) {
	animation-delay: calc(var(--slideDelay) + 0s);
}
.textANI span:nth-of-type(2) {
	animation-delay: calc(var(--slideDelay) + .1s);
}
.textANI span:nth-of-type(3) {
	animation-delay: calc(var(--slideDelay) + .2s);
}
.textANI span:nth-of-type(4) {
	animation-delay: calc(var(--slideDelay) + .3s);
}
.textANI span:nth-of-type(5) {
	animation-delay: calc(var(--slideDelay) + .4s);
}
.textANI span:nth-of-type(6) {
	animation-delay: calc(var(--slideDelay) + .5s);
}
.textANI span:nth-of-type(7) {
	animation-delay: calc(var(--slideDelay) + .6s);
}
.textANI span:nth-of-type(8) {
	animation-delay: calc(var(--slideDelay) + .7s);
}
.textANI span:nth-of-type(9) {
	animation-delay: calc(var(--slideDelay) + .8s);
}
.textANI span:nth-of-type(10) {
	animation-delay: calc(var(--slideDelay) + .9s);
}
.textANI span:nth-of-type(11) {
	animation-delay: calc(var(--slideDelay) + 1s);
}
.textANI span:nth-of-type(12) {
	animation-delay: calc(var(--slideDelay) + 1.1s);
}
.textANI span:nth-of-type(13) {
	animation-delay: calc(var(--slideDelay) + 1.2s);
}
.textANI span:nth-of-type(14) {
	animation-delay: calc(var(--slideDelay) + 1.3s);
}
.textANI span:nth-of-type(15) {
	animation-delay: calc(var(--slideDelay) + 1.4s);
}
.textANI span:nth-of-type(16) {
	animation-delay: calc(var(--slideDelay) + 1.5s);
}
.textANI span:nth-of-type(17) {
	animation-delay: calc(var(--slideDelay) + 1.6s);
}
.textANI span:nth-of-type(18) {
	animation-delay: calc(var(--slideDelay) + 1.7s);
}
.textANI span:nth-of-type(19) {
	animation-delay: calc(var(--slideDelay) + 1.8s);
}

.three span {
	color: #0000ff;
	opacity: 0;
transform: translate(-300px, 0) scale(0);
animation-name: sideSlide;
  animation-duration: 5s;
  animation-direction: forwards;
animation-iteration-count: 1;
}
@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: #0000d0;
	}
	80% {
		transform: translate(20px, 0) scale(1);
		color: #00ffff;
	}
	95% {
		transform: translate(0) scale(1.4);
		color: #ff4000;
	}
	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: #0000ff;
	}
}
.textANI1 {
  font-family: 'Merriweather Bold', serif;
	position: absolute;
	top: 65vh;
	width: 90%;
	font-size: 5.5vw;
	/*font-weight: 900;*/
	/*text-transform: uppercase;*/
	text-align: center;
	text-stroke-width: 1px;
    text-stroke-color: #ffff00;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffff00;
	margin-left: 5%;
	--slideDelay: 0s;
}
.textANI1 span {
	display: inline-block;
}
.textANI1 span:nth-of-type(1) {
	animation-delay: calc(var(--slideDelay) + 0s);
}
.textANI1 span:nth-of-type(2) {
	animation-delay: calc(var(--slideDelay) + .1s);
}
.textANI1 span:nth-of-type(3) {
	animation-delay: calc(var(--slideDelay) + .2s);
}
.four span {
	color: #5cb85c;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
animation-name: dropVanish;
  animation-duration: 2.5s;
  animation-direction: forwards;
animation-iteration-count: 1;
}
@keyframes dropVanish {
	50% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
		color: #0000d0;
	}

	65% {
		transform: translate(0, -30px) scale(.8) rotate(90deg);
		color: #00ffff;
	}

	80% {
		transform: translate(0, -50px) scale(1.5) rotate(45deg);
		color: #ff4000;
	}

	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
		color: #0000ff;
	}
}
.textANI2 {
  font-family: 'Merriweather Bold', serif;
	position: absolute;
	top: 65vh;
	width: 90%;
	font-size: 5.5vw;
	/*font-weight: 900;*/
	/*text-transform: uppercase;*/
	text-align: center;
	text-stroke-width: 1px;
    text-stroke-color: #ffff00;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffff00;
	margin-left: 5%;
	--slideDelay: 1s;
}
.textANI2 span {
	display: inline-block;
}
.textANI2 span:nth-of-type(1) {
	animation-delay: calc(var(--slideDelay) + 0s);
}
.textANI2 span:nth-of-type(2) {
	animation-delay: calc(var(--slideDelay) + .1s);
}
.textANI2 span:nth-of-type(3) {
	animation-delay: calc(var(--slideDelay) + .2s);
}
.textANI2 span:nth-of-type(4) {
	animation-delay: calc(var(--slideDelay) + .3s);
}
.textANI2 span:nth-of-type(5) {
	animation-delay: calc(var(--slideDelay) + .4s);
}
.textANI2 span:nth-of-type(6) {
	animation-delay: calc(var(--slideDelay) + .5s);
}
.textANI2 span:nth-of-type(7) {
	animation-delay: calc(var(--slideDelay) + .6s);
}
.textANI2 span:nth-of-type(8) {
	animation-delay: calc(var(--slideDelay) + .7s);
}
.textANI2 span:nth-of-type(9) {
	animation-delay: calc(var(--slideDelay) + .8s);
}
.textANI2 span:nth-of-type(10) {
	animation-delay: calc(var(--slideDelay) + .9s);
}
.textANI2 span:nth-of-type(11) {
	animation-delay: calc(var(--slideDelay) + 1s);
}
.textANI2 span:nth-of-type(12) {
	animation-delay: calc(var(--slideDelay) + 1.1s);
}
.textANI2 span:nth-of-type(13) {
	animation-delay: calc(var(--slideDelay) + 1.2s);
}
.textANI2 span:nth-of-type(14) {
	animation-delay: calc(var(--slideDelay) + 1.3s);
}
.textANI2 span:nth-of-type(15) {
	animation-delay: calc(var(--slideDelay) + 1.4s);
}
.textANI2 span:nth-of-type(16) {
	animation-delay: calc(var(--slideDelay) + 1.5s);
}
.textANI2 span:nth-of-type(17) {
	animation-delay: calc(var(--slideDelay) + 1.6s);
}
.textANI2 span:nth-of-type(18) {
	animation-delay: calc(var(--slideDelay) + 1.7s);
}
.seven span {
	color: #0080ff;
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}
@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #0000d0;
	}

	60% {
		color: #00ffff;
	}

	80% {
		transform: translate(0) scale(2);
		opacity: .40;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}

.matrix {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
#back2Home, #flyout, #flyout2 {
	position: fixed;
	right: 0;
	margin-right: 1vw;
	overflow: hidden;
	border: none;
	border-radius: .5vw;
	outline: none;
	/*width: 6vw;
	height: 6vw;*/
	z-index: 999;
	display: block;
	cursor: pointer;
	transition: opacity 2s ease-out, margin-right 1s ease-out;
	background-color: #DDf;
}
/* HomeUp.CSS */
#back2Home {
	top: 0;
	margin-top: 1vw;
}
#back2Home:hover {
    background-color: #fDF;
}
#flyout {
	bottom: 45vh;
	margin-bottom: 1vw;
}
#flyout:hover {
    background-color: #fDF;
}
#flyout2 {
	bottom: 0;
	margin-bottom: 1vw;
}
#flyout2:hover {
    background-color: #fDF;
}

Hopefully, this writeup will give you some ideas and content that you will find useful for creating your own splash screen landing pages.

As always, criticisms, comments, and suggestions are welcome!