Changing effects in sliding video cover

HTML & CSS
1

After getting the image code perfect, I see a noticeable difference between these 2 codes

gradient code:
https://jsfiddle.net/ny10q69r/8/

After clicking on the gradient code, it magnifies the image.

Question: Would I be able to give the gradient a set width and height of 1920 x 1080?

Is this something that is possible to do?

Compared to the perfect image code:
https://jsfiddle.net/taqbjfu4/

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}
2

Don’t increase the page height until the animation has finished and then the problem goes away.

1 Like
3

I don’t know how that is done.

Is there a specific name for what that is called?

I like that idea.

4

Which would mean, when it is half open, it will be empty like this, right?

Would I be able to put something in there, and then, it would disappear after it is open all the way?

721×257 47.7 KB

5

I have a question about this.

Does transition time mean actual time?

I’m confused about how this works.

For example:

.panel-left,
.panel-right {
 transition: all ease 30s;
]

How come the walls are open in less than 30 seconds?

Would I be using a different transition property to do that?

code https://jsfiddle.net/9g7wjc04/

What would be the css property to use to set a time for how long it will take for the 2 sides to be fully open?

Answer:
I would need to change these back to %.

.curtain.slide .panel-left {
  transform: translateX(-100vw);
}

.curtain.slide .panel-right {
  transform: translateX(100vw);
}
6

That’s the time it takes for the transition to complete it’s journey.

The element is being moved outside the viewport to hide it so some of the transition will be happening outside the viewport.

Assuming the element is perfectly centred then 50vw should hide it. Just test and see. You can’t use percentage here because that won’t refer to the viewport.

1 Like
7

Would adding a fade out transition to the left and right panel, along with the play image, is that something that could be done?

Also, does a fade out transition mean the element gets removed from the page?

8

Yes just transition opacity on them.

No the element is still there but invisible. You can set pointer-events:none on the element after you have clicked it (use the .slide class) and then the element cannot be clicked again. In the example I gave in your other thread I also set width and height to zero after the transition had finished so I believe you have all the tools to do what you need now.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.