CodePen Test Page
See the Pen Hero Text Animation by Greg Van de Mosselaer (@gregvan95) on CodePen.
<div class="box"> <div id="heroText"></div> </div> <!-- Not the final look - just knocking around different options re javascript and css for that requested bespoke animation in the Hero banner -->
.box { background-color:#232323; background-size: cover; background-image: url(https://primaryon.ca/system/assets/segment_images/pictures/66/original/cdc-voVYCm6xoQo-unsplash.jpg?16); box-shadow: inset 0 0 0 2000px rgba(20, 20, 20, 0.5); color: white; position: relative; /* display: flex; justify-content: center; */ /* align-items: center; */ width: auto; height: 300px; margin: 0px auto; overflow: hidden; position: relative; transition: ease all 3s; } #heroText { font-size: 3em; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; } #heroText div { /* justify-content: center; */ position:absolute; transition: ease all 2s; /* margin: 20px; */ } .heroText0 { padding-left: 0px; margin-left: -50px; } .init0 { color:red; opacity: 0; } .init1 { opacity: 0; } .init2 { padding-left: 0px; color:blue; opacity: 0; margin-left: -200px !important; } .init3 { opacity: 0; } .init4 { opacity: 0; padding-left: 300px; } .anim0 { color:yellow; font-size: 1.5em; opacity: 1; } .anim1 { font-size: 0.7em; color:white; top: 80px; opacity: 1; margin-left: -12px !important; } .anim2 { font-size: 0.8em; color:red; top: 60px; opacity: 1; margin-left: 0px !important; padding-left: 260px; } .anim3 { font-size: 1.2em; padding-left: 40px; top: 60px; opacity: 1; } .anim4 { font-size: 1em; padding-left: 78px; top: 100px; opacity: 1; } @media screen and (min-width: 200px) { #heroText { margin-left: -50px !important; } } @media screen and (min-width: 300px) { #heroText { margin-left: -50% !important; } } @media screen and (min-width: 400px) { #heroText { margin-left: -30% !important; } } @media screen and (min-width: 500px) { #heroText { margin-left: -25% !important; } } @media screen and (min-width: 600px) { #heroText { margin-left: -10% !important; } }
const text = ["SGFP.ca", "Lets", "Work", "Organize", "Care"]; for (let i = 0; i < text.length; i++) { const mainDiv = document.getElementById("heroText"); let div = document.createElement("div"); const divName = "heroText" + i; div.classList.add(divName); div.innerHTML = text[i]; switch (divName != null) { case divName === "heroText0": div.classList.add("init0"); setTimeout(() => { div.classList.add("anim0"); }, 1000); break; case divName === "heroText1": div.classList.add("init1"); setTimeout(() => { div.classList.add("anim1"); }, 200); break; case divName === "heroText2": div.classList.add("init2"); setTimeout(() => { div.classList.add("anim2"); }, 200); break; case divName === "heroText3": div.classList.add("init3"); setTimeout(() => { div.classList.add("anim3"); }, 200); break; case divName === "heroText4": div.classList.add("init4"); setTimeout(() => { div.classList.add("anim4"); }, 200); break; } mainDiv.appendChild(div); }