I have been attempting to replicate the captivating CSS animations seen on a particular website:
My goal is to imitate how the site:
initially reveals a full-screen black div sliding away to the right
progressively loads the black background (div tags) behind text (such as "Hi, I'm Stanley Sakai"), expanding from left to right
- loads the text over the black background div, expanding from left to right.
You may wonder why I haven't simply inspected the page, analyzed the classes applied to the divs and text, and reviewed the CSS in the network tab. Unfortunately, the CSS appears convoluted. According to my friend, it is pre-processed by SASS, whatever that entails. Consequently, I find deciphering the code to be quite challenging.
I've scoured various StackOverflow pages (like this one) and numerous Google search results. While I learned about utilizing keyframes, I have yet to grasp how to recreate the effect found on Stanographer.com. My friend, who happens to own the website, shared an example with me, but integrating it into individual divs remains elusive. He mentioned something about z-index usage, but I fail to see its application.
I am aware that triggering a class change via JavaScript is necessary to initiate the page with a full black screen sliding out. Thus far, I have implemented:
let blackStuff = document.getElementById("blackness");
window.addEventListener("load", () => {
console.log("loaded");
blackStuff.setAttribute("class", "black-box-out");
},
false
);.black-box {
position: fixed;
float: left;
top: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #000;
z-index: 999999;
-webkit-animation: powerslide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: powerslide 0.5s forwards;
animation-delay: 2s;
}
@-webkit-keyframes powerslide {
100% {
left: 0;
}
}
@keyframes powerslide {
100% {
left: 0;
}
}
.black-box-out {
margin-left: 100%;
animation: slide 0.5s forwards;
-webkit-transition: slide 0.5s forwards;
transition: slide 0.5s forwards;
}<div id="blackness" class="black-box"></div>However, this currently causes the "blackness" div to vanish instantly upon page load rather than sliding out as intended. It is evident that my understanding of CSS animations is lacking.
If you wish to explore further unsuccessful attempts, read on. Otherwise, feel free to skip this section which solely showcases my failed endeavors.
I managed to create a CSS animation that horizontally expands from 0:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 50px;
border: 1px solid black;
}
.slide-custom {
width: 500px;
height: 50px;
background: cyan;
position: relative;
-webkit-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
/* moz and webkit keyframes excluded for space */
@keyframes slideIn {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}<div class="wrapper slide-custom">
<h1 class="slide-custom">
<span>MEET ROLY POLY.</span>
<!-- expands horizontally from 0 width to 100% width -->
</h1>
</div>Furthermore, I succeeded in making text "slide in" from the left, although it initiates at 100% width instead of 0% width:
/* CSS */
.test-slide {
animation-duration: 3s;
animation-name: testSlide;
}
@keyframes testSlide {
from {
margin-left: 0%;
width: 50%;
}
to {
margin-left: 100%;
width: 100%;
}
}<div class="test-slide">
<h1><span>ABOUT.</span></h1>
<!-- will slide in from the left -->
</div>Unfortunately, none of these methods mimic the desired effect of the website I aim to replicate.