How to add sliding curtain to the entire viewport?

HTML & CSS
1

Here is the curtain code with the text on it.

This one uses flex.

And it opens on its own.
This part is not changing, when it is covering the entire viewport, it will stay opening on its own.

https://jsfiddle.net/3rstopg5/

How would I remove the sliding panels from on top of the video curtain.

To being instead placed covering the the entire viewport screen?

Like it is here?

This is an old code that does not use flex.

I would want to transfer this code somehow, to the above code, where it would work in the code.

How would this be done?

https://jsfiddle.net/yq5vajfc/1/

864×457 21.8 KB

2

Use position:fixed instead of absolute as the stacking context.

.panel-left,
.panel-right {
  position: fixed;
  z-index:3;/* adjust to suit*/
}

The rest of the css remains the same.

1 Like
3

All of these can be placed into one.

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;

}

.panel-left,
.panel-right {
  position: fixed;
  z-index: 3;
  /* adjust to suit*/
}
4

This did not work, or I did not do it right. https://jsfiddle.net/5sfhk8c4/

Maybe not all of them would be placed into one?

.panel-left,
.panel-right {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 3;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

5

So which is it position absolute or position fixed???

6

You have combined rules which should only apply to either panel-left or panel-right and applied them to both.

1 Like
7

I fixed it here I think. https://jsfiddle.net/ey0rgwt5/

.panel-left,
.panel-right {
  position: fixed;
  z-index: 3;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}
1 Like
8

How would this have been achieved without using z-index?

Last updated code: https://jsfiddle.net/4L86decx/

That may not be possible because of the 1px border that gets in the way.

And I do not really understand how that 1px border gets in the way: https://jsfiddle.net/bs50ankx/

or, maybe I didn’t do it correctly for it to work without z-index being needed.

or maybe it is not possible.

.panel-left,
.panel-right {
  position: fixed;
  /*z-index: 1;*/
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

9

You’d have to move the html for those panels outside of the curtain but that would mean other changes to the css as well.

It’s just not worth the effort.

Let z-index do what is paid to do :slight_smile:

10

What would have worked?

11

I just told you.?

Move the html out of its current position so it’s not nested.

12

Where am I moving this to?

Below container?

Where is it being placed?

		<div class="panel-left">
			<p>Some text here</p>
		</div>
		<div class="panel-right">
			<p>Some text here</p>
		</div>

Like this? https://jsfiddle.net/v8b09r5y/

After that I’m supposed to make certain changes to the css?

What gets changed?

      <div class="video video-frame" data-id=""></div>
    </div>

  </div>
  
  <div class="panel-left">
    <p>Some text here</p>
  </div>
  <div class="panel-right">
    <p>Some text here</p>
  </div>

</div>
13

Does it work ?

No it doesn’t.

What needs to change.?

.curtain .panel-left {

Why won’t that work?

Please use common sense. You’ve been doing this long enough now to spot why something needs to be changed. :slight_smile:

3 Likes
14

https://jsfiddle.net/aoupfbqs/1/

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

.panel-left {
  left: 0;
  animation: slideLeft 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.panel-right {
  right: 0;
  animation: slideRight 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px));
  }
}
1 Like
15

Well done :slight_smile:

See you can do it if you are pushed a little :slight_smile:

1 Like
16

Sometimes I notice, if I leave the tab open, go to a different tab, then come back to this tab, sometimes you can see the curtain flicker in and out fast.

Adding a fade out seems to prevent that from occurring.

And to add a fadeout, I would do this. https://jsfiddle.net/f5zdmkyo/

.panel-left::before,
.panel-right::before,
.panel-left p,
.panel-right p {
  content: "";
  animation: fadeOut 1s ease-in 2s forwards;
}

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

I haven’t seen that happen so can’t comment much.

That should be ok but you can probably add it to the original keyframe instead.

e.g.

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px));
   opacity:0;
  }
}



@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px));
    opacity:0;
  }
}

Try it and see as its less code and if it doesn’t solve the problem then go back to what you had.

1 Like
18

I don’t think that would work because:

The delay would need to be set at 8secs here:
animation: fadeOut 1s ease-in 8s forwards;

The other code has a different delay set:

.panel-right {
  right: 0;
  animation: slideRight 8s forwards;
  animation-delay: 700ms;
}

.panel-left::before,
.panel-right::before,
.panel-left p,
.panel-right p {
  content: "";
  animation: fadeOut 1s ease-in 8s forwards;
}

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

No you can do it all in the original keyframe.

You’d just adjust the keyframes so that the fade-out doesn’t start until when you wanted.

The ‘to’ value in the frame is the same as saying 100% so you could instead change it to 90% with the current rule but use opacity:1 and then at 100% you add opacity:0. That means nothing happens until it’s finished sliding.

The element slides and finishes at 90 % and then the opacity kicks in.

You can change the percentages so that animations can overlap or whatever you need. You’ve done similar before.

I’m typing on a phone at the moment so can’t provide code examples.

1 Like
20

Reading that was confusing to me, you might have to show me when you are able to.

This is what I have right now: https://jsfiddle.net/p7mbgovj/2/

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

.panel-left {
  left: 0;
  animation: slideLeft 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px));
    opacity: 0;
  }
}

.panel-right {
  right: 0;
  animation: slideRight 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px));
    opacity: 0;
  }
}