Having trouble adding a fade instead of sliding curtains

HTML & CSS
1

After adding a fade instead of sliding curtains, the video is no-longer clickable.

Did I do the fade wrong?

https://jsfiddle.net/3acdy4rg/4/

Adding this has no effect on it.

    const splitWrap = document.querySelector(".split-wrap");
    splitWrap.style.pointerEvents = "none";

What I changed in the code.

It went from this
https://jsfiddle.net/qoLbsrcp/

.slide-wrap:before,
.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.slide-wrap:before {
  left: 0;
}
.slide-wrap:after {
  right: 0;
}
.slide .slide-wrap::before {
  transform: translateX(-100%);
}
.slide .slide-wrap::after {
  transform: translateX(100%);
}

to this:

.fadeout .slide-wrap{
opacity: 0;
transition: opacity 5s;
}

.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
 .slide-wrap:before {
  left: 0;

}
.slide-wrap:after {
  right: 0;

}

<div class="slide-wrap fadeout"></div>

curtain.classList.add("fadeout");

2

Why aren’t you using CSS to do it?

.slide .slide-wrap{pointer-events:none;}

I don’t know how many times I have to say it :slight_smile:

1 Like
3

Do you even have an element called split-wrap on that code?

4

My mistake.

Split/slide

I must have got them confused and thought it was the same.

5

I should, it’s less code to remember.

6

Why would it be needed if I am not using an image that splits apart?

This play image just disappears after clicking on it.

Isn’t it removed from the dom right away after clicking on it?

Also, how would I add a fade effect to this code, I couldn’t figure it out.
https://jsfiddle.net/vg05pwqo/

<div class="outer">
	<div class="tcell">
		<div class="video-wrapper">
			<div class="ratio-keeper">
				<div class="jacket fadeout" title="Play">
        
                 <svg class="play" width="100%" height="100%" viewBox="0 0 32 32">
            <path d="M4.1,10.8C5.9,6.6,10,3.5,14.8,3.1v-3C8.6,0.5,3.5,4.4,1.2,9.9L4.1,10.8z" />
            <path d="M17.2,3.1c4.8,0.5,8.8,3.5,10.7,7.8l2.9-0.9c-2.3-5.4-7.4-9.3-13.5-9.8V3.1z" />
            <path d="M28.7,13.2C28.9,14.1,29,15,29,16c0,3.9-1.7,7.3-4.4,9.7l1.8,2.4C29.8,25.2,32,20.9,32,16
              c0-1.3-0.2-2.5-0.5-3.7L28.7,13.2z" />
            <path d="M22.6,27.2C20.7,28.3,18.4,29,16,29s-4.7-0.7-6.6-1.8l-1.8,2.4c2.4,1.5,5.3,2.4,8.4,2.4
              s5.9-0.9,8.4-2.4L22.6,27.2z" />
            <path d="M7.4,25.7C4.7,23.3,3,19.9,3,16c0-1,0.1-1.9,0.3-2.8l-2.9-0.9C0.2,13.5,0,14.7,0,16
              c0,4.9,2.2,9.2,5.6,12.2L7.4,25.7z" />
            <polygon points="12.4,9.5 12.4,22.5 21.6,16 " />
          </svg>
				</div>
				<div class="wrap hide">
					<div class="video video-frame"></div>
				</div>
			</div>
		</div>
	</div>
</div>
7

My attempt: I’m confused how it would be written.
https://jsfiddle.net/9xv68dto/1/


.panel {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-size: cover;
}

.fadeout .panel {
  opacity: 0;
  transition: opacity 5s;
}


<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">

        <div class="curtain">
          <div class="panel fadeout"></div>

          <div class="jacket " title="Play">

            <svg class="play" width="100%" height="100%" viewBox="0 0 32 32">
              <path d="M4.1,10.8C5.9,6.6,10,3.5,14.8,3.1v-3C8.6,0.5,3.5,4.4,1.2,9.9L4.1,10.8z" />
              <path d="M17.2,3.1c4.8,0.5,8.8,3.5,10.7,7.8l2.9-0.9c-2.3-5.4-7.4-9.3-13.5-9.8V3.1z" />
              <path d="M28.7,13.2C28.9,14.1,29,15,29,16c0,3.9-1.7,7.3-4.4,9.7l1.8,2.4C29.8,25.2,32,20.9,32,16
              c0-1.3-0.2-2.5-0.5-3.7L28.7,13.2z" />
              <path d="M22.6,27.2C20.7,28.3,18.4,29,16,29s-4.7-0.7-6.6-1.8l-1.8,2.4c2.4,1.5,5.3,2.4,8.4,2.4
              s5.9-0.9,8.4-2.4L22.6,27.2z" />
              <path d="M7.4,25.7C4.7,23.3,3,19.9,3,16c0-1,0.1-1.9,0.3-2.8l-2.9-0.9C0.2,13.5,0,14.7,0,16
              c0,4.9,2.2,9.2,5.6,12.2L7.4,25.7z" />
              <polygon points="12.4,9.5 12.4,22.5 21.6,16 " />
            </svg>
          </div>
          <div class="wrap hide">
            <div class="video video-frame"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
8

It’s needed because of the area where the opacity is being given, has nothing to do with the play image with this one. I think that’s it.

.slide .slide-wrap{pointer-events:none;}

slide-wrap refers to the panels

split-wrap refers to the split play image.

9

Like this:

.fadeout{
  opacity:1;
  transition:opacity 5s;
}
.hide.fadeout{
  display:block;
  opacity:0;
  z-index:2;
  pointer-events:none;
}
11

This code doesn’t use display: block;
https://jsfiddle.net/opav7tx0/

This code you’re having me add display block.

Can this code work the same as the other?
Without display block?

Where the fade is only on the background and not the play svg.

https://jsfiddle.net/vg05pwqo/

12

Yes but you aren’t adding a class of ‘hide’ to it that is setting display:none. That’s why your attempts weren’t working because the element was display:none so there is nothing to animate. It’s already gone.

Don’t be silly. Re-read what I just said above.

But that’s not what you were doing? You were setting the whole thing to display:none anyway?

Won’t that leave the round play button on top of the video play button. It doesn’t really make any sense to me.

Anyway you can’t fade an image unless you use opacity and if you do that everything in the div is affected. You can’t exclude child elements from the opacity. What you’d need to do is pull the image from .jacket and apply it t a pseudo element of .jacket instead and absolutely place it over the area. Then you could fade out the pseudo element without affecting the play button.

However it makes no sense to have effectively 2 play buttons on top of each other (the red circle and the video play button).

13

I was able to get it working here without a pseudo element.
https://jsfiddle.net/8urbx67t/3/

.slide-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-size: cover;
}

.fadeout .slide-wrap {
  opacity: 0;
  transition: opacity 5s;
}

.slide .slide-wrap {
  pointer-events: none;
}
14

If I was using display: block to fade the play image with the background image, What are the only properties that I would need?

This is the other version.

https://jsfiddle.net/47qw1cs2/1/


.fadeout .slide-wrap {
  opacity: 0;
  transition: opacity 5s;
}

.slide .slide-wrap {
  pointer-events: none;
}


.fadeout {
  opacity: 1;
  transition: opacity 5s;
}

.hide.fadeout {
  display: block;
  opacity: 0;
  pointer-events: none;
}
15

That’s a step backwards isn’t it?

Why use a div when you can do it without extra html? Or did you mean something else.

Sorry you lost me. :slight_smile:

Display:block doesn’t have anything to do with fading the image. It’s there to counter the display:none you had on .hide.

Also why do you add the fadeout class in your js? You are already adding a class of slide so that can be used as a trigger to start the fade effect.

16

I have fadeout in the js so I know what it is being used for. Slide was just for the curtains. Just as a way of knowing.

17

When you click on this one, there is no fade on the play image.

It disappears right away.

https://jsfiddle.net/t50g261p/

On here there is, I was trying to remove the fade on this one.
https://jsfiddle.net/jc7ydgzw/

18

Just get rid of it.

.hide .play{display:none;}

19

If I do that, then the fade is removed from the background.

I was just trying to remove it from the play image.

20

No it isn’t. The background is on .jacket not on .play?

21

How is z-index removed?

By rearranging the html?

https://jsfiddle.net/zvefyxd9/1/

.hide.fadeout {
  display: block;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.hide .play {
  display: none;
}