CODEWITHSUNDEEP
javascriptcssevents
Rapha445
Rapha445

Reputation: 35

Reveal element on page load

I am trying to make elements appear only after the page has loaded. I added a class that removes my elements, and a modifier that makes them appear only once the page has loaded.

It looks like my transition jumps when the page is fully loaded, but I would like the whole transition to play. I have been looking at other solutions but nothing that worked for me.

This is what my JavaScript looks like.

class RevealOnLoad {
    constructor() {
        this.itemsToReveal = document.querySelectorAll(".hero__element");
        this.hideInitially();
        this.events();
    }
    events() {
        let stateCheck = setInterval(() => {
            if (document.readyState === 'complete') {
              clearInterval(stateCheck);
              this.itemsToReveal.forEach(el => {
              el.classList.add("reveal-item--is-visible");
              })
        }
        console.log(document.readyState);
              // document ready
          }, 100);          
    }
    hideInitially() {
            this.itemsToReveal.forEach(el => {
            el.classList.add("reveal-item");
            console.log(document.readyState);
        })
    }
}
export default RevealOnLoad;

And the css class:

.reveal-item {
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  transform: scale(1.15);
  }

.reveal-item--is-visible {
    opacity: 1;
    transform: scale(1);
  }

Upvotes: 1

Views: 543

Answers (1)

zer00ne
zer00ne

Reputation: 43910

Register document to the "DOMContentLoaded" event, that's when everything but the images are loaded:

document.addEventListener('DOMContentLoaded', reveal);

The event handler is reveal(e). Wrap everything in reveal(e) in a setTimeout():

function reveal(e) {
  setTimeout(function() {
  //... switch classes etc.
  }, 2000);
}

Use @keyframe and animation in CSS.

document.addEventListener('DOMContentLoaded', reveal);

function reveal(e) {
  setTimeout(function() {
    const H = document.querySelectorAll('.hidden');
    H.forEach(h => {
      h.classList.toggle('hidden');
      h.classList.toggle('revealed');
    })
  }, 2000);
}
.hidden {
  opacity: 0;
  transform: scale(0);
}

.revealed {
  animation: show 3s forwards ease-in;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
<h1 class='hidden'>TITLE</h1>
<fieldset class='hidden'>
  <legend>TITLE</legend>
</fieldset>

Upvotes: 2

Related Questions