Skip to main content
Code Review

Return to Answer

update CSS terminology
Source Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only creating CSS classeslisting selectors in CSS once.
  • You had two instances of #i-w that could be combined into one ruleset instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll notice that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only creating CSS classes once.
  • You had two instances of #i-w that could be one instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll notice that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only listing selectors in CSS once.
  • You had two instances of #i-w that could be combined into one ruleset instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll notice that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
deleted 1 character in body
Source Link
Taco
Taco
  • 929
  • 7
  • 18
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
    // Perform some kinds of loading tasks.
    for (var i = 0; i < 65535; i++)
    i++;

  // Check i++;

the DOM before updating.
  checkDOMForLoadingCompleted();
}

// NowSince swapwe're yourdone stylesloading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
  if (document.readyState != 'loading')
    loadingCompleted();
  else if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', loadingCompleted);
  else
    document.attachEvent('onreadystatechange', onReadyStateChange);
}
function loadingCompletedonReadyStateChange() {
  if (document.readyState == 'complete')
    loadingCompleted();
}

// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
  document.getElementById("pre-loader").classList.add("loaded");
    var loadedContent = document.getElementById("loaded-content");
    loadedContent.classList.add("fd");
    showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
    loadedContent.classList.remove("fd");
}


// This is to simulate starting a loading process.
//    Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
  setTimeout(beginLoading, 2650);
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
function beginLoading() {
    // Perform some kinds of loading tasks.
    for (var i = 0; i < 65535; i++)
        i++;

    // Now swap your styles.
    loadingCompleted();
}
function loadingCompleted() {
    document.getElementById("pre-loader").classList.add("loaded");
    var loadedContent = document.getElementById("loaded-content");
    loadedContent.classList.add("fd");
    showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
    loadedContent.classList.remove("fd");
}


// This is to simulate starting a loading process.
//    Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
  setTimeout(beginLoading, 2650);
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
  // Perform some kinds of loading tasks.
  for (var i = 0; i < 65535; i++)
    i++;

  // Check the DOM before updating.
  checkDOMForLoadingCompleted();
}

// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
  if (document.readyState != 'loading')
    loadingCompleted();
  else if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', loadingCompleted);
  else
    document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
  if (document.readyState == 'complete')
    loadingCompleted();
}

// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
  document.getElementById("pre-loader").classList.add("loaded");
  var loadedContent = document.getElementById("loaded-content");
  loadedContent.classList.add("fd");
  showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
  loadedContent.classList.remove("fd");
}


// This is to simulate starting a loading process.
//    Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
  setTimeout(beginLoading, 2650);
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
deleted 1 character in body
Source Link
Taco
Taco
  • 929
  • 7
  • 18
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only creating CSS classes once.
  • You had two instances of #i-w that could be one instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll noticednotice that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you neededneed to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
setTimeout(beginLoading, 2650);
function beginLoading() {
    // Perform some kinds of loading tasks.
    for (var i = 0; i < 65535; i++)
        i++;

    // Now swap your styles.
    loadingCompleted();
}
function loadingCompleted() {
    document.getElementById("pre-loader").classList.add("loaded");
    var loadedContent = document.getElementById("loaded-content");
    loadedContent.classList.add("fd");
    showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
    loadedContent.classList.remove("fd");
}


// This is to simulate starting a loading process.
//    Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
  setTimeout(beginLoading, 2650);
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only creating CSS classes once.
  • You had two instances of #i-w that could be one instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll noticed that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you needed to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
setTimeout(beginLoading, 2650);
function beginLoading() {
    // Perform some kinds of loading tasks.
    for (var i = 0; i < 65535; i++)
        i++;

    // Now swap your styles.
    loadingCompleted();
}
function loadingCompleted() {
    document.getElementById("pre-loader").classList.add("loaded");
    var loadedContent = document.getElementById("loaded-content");
    loadedContent.classList.add("fd");
    showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
    loadedContent.classList.remove("fd");
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
  • Clean up and remove the anonymous functions.
  • They aren't really needed here and just create extra clutter, decreasing readability.
  • Remove the additional setTimeout call and just call to show when you're done loading.
  • Use more meaningful names.
  • It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
  • Using more meaningful names helps readability, and thus improves maintainability.
  • Ensure you're only creating CSS classes once.
  • You had two instances of #i-w that could be one instead.
  • Remove the usage of events unless needed.
  • I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
  • A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
  • A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
  • Do not redefine variables.
  • You'll notice that I removed one variable (wrp) because it was only used once.
  • Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
  • I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are wrp and swp which are both used by the pre-loader only.
function beginLoading() {
    // Perform some kinds of loading tasks.
    for (var i = 0; i < 65535; i++)
        i++;

    // Now swap your styles.
    loadingCompleted();
}
function loadingCompleted() {
    document.getElementById("pre-loader").classList.add("loaded");
    var loadedContent = document.getElementById("loaded-content");
    loadedContent.classList.add("fd");
    showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
    loadedContent.classList.remove("fd");
}


// This is to simulate starting a loading process.
//    Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
  setTimeout(beginLoading, 2650);
}
body {
    margin: 0;
    padding: 0;
    background: yellow;
}
.pre-loader {
    z-index: 9999;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pre-loader.loaded {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
    transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0f0a05;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container {
    background: pink;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
    will-change: transform;
}
.container.fd {
    transform: translateY(100%);
    transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-size: 18vw;
}
.intro-heading {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: green;
    font-size: 8vw;
    opacity: 1;
    visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
    animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
        to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes to-transform-tss {
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        -webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
        transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
    }
}
@keyframes to-visible {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes to-hidden {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
<div id="pre-loader" class="pre-loader">
    <div class="intro-wrapper">
        <div class="intro-heading">
            <h1>&#11014; intro &#11014;</h1>
        </div>
    </div>
</div>
<div class="container" id="loaded-content">
    <h1 class="heading">hello</h1>
</div>
Source Link
Taco
Taco
  • 929
  • 7
  • 18