Fading out text and background. an issue – HTML & CSS – SitePoint

Did I do this right? https://jsfiddle.net/xz97npdf/

There is an issue here, trying to figure out why the video is not fading in correctly.

Also, is there anything you would change in here?

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
}

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
    50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel{
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: black;
}

.panel,
.video-wrapper::after {
  content: "";
  pointer-events: none;
  }

.panel p {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 10.938vw;
  white-space: nowrap;
}

.panel,
.panel p{
  animation: fadeOut 2s ease-in 700ms forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    
  }
}

This part seems to be the issue:

If I don’t want it to be clickable until half way in, how do I do that?

Would this be done a different way?

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
    50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


PaulOB

April 21, 2022, 7:44am
#2

asasass:

There is an issue here, trying to figure out why the video is not fading in correctly.

It seems to fade in for me. What is the problem you see?

asasass:

If I don’t want it to be clickable until half way in, how do I do that?

You would set pointer: events to none at 0% and at 49%. Then at 50% you set it to pointer-events:initial.

Remember that pointer events isn’t animatable and changes instantly. That means that if you have none at 0% and initial at 50% then it will switch from none to initial at 0.1%.

Source: https://www.sitepoint.com/community/t/fading-out-text-and-background-an-issue/385633/

Posted on

Leave a Reply

Your email address will not be published. Required fields are marked *