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 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. Synthetic Reality The landing page itself is rendered by two pieces of code, the first being an HTML file, 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), , which defines the appearance of our content. Storybook.html, Landing.css 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 running the landing page code, and as may be seen, there are no errors, and some features (relative to navigation) are provided. WebAIM accessibility test 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 which is used to animate the introductory “expanding title” marquee. The script also scales the hallway image. (GSAP), GreenSock Animation Program A final “closure” for the landing page is in the form of a character’s drop screen similar in concept to that seen in movie with the addition of colors besides shades of green. This uses the HTML element with JavaScript-generated content. The “matrix drop screen” is included in the article as a standalone proggie. The Matrix canvas GitHub code repo All of the codebase and source content for the landing page, including the images and fonts, is also presented in the , but as a convenience for the reader, we include the HTML file listing here next below: GitHub code repo Storybook document.documentElement.classList.remove("no-js") --> //$(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 '); 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(' ' + viewportWidth + ' &times; ' + viewportHeight + ' px &amp; w/h = ' + VPaspectRounded + ' '); } // 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 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"; }); --> Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Synthetic Reality Story --> This is --> StoryBook Book Book --> I m a g e &ensp; G a l l e r y &ensp; M a k e r a n d C o m i c &ensp; B o o k &ensp; B u i l d e r #back2Home a:focus, #flyout a:focus, #flyout2 a:focus { /*background-color: GreenYellow;*/ outline: .8vw solid GreenYellow; } 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!