I am having trouble implementing this.
I’m confused about how to get this to work in the code.
What I want to do here is, after the red play image is clicked, it does it’s fade thing, then the curtain opens after and video plays.
Fade background
Clicking the red play image would cause the fade of the background, which would then unhide the curtain that is around the video which would allow it to slide, then the video plays.
The curtain is hidden, do flex properties need to be added to it, if so, which ones?https://jsitor.com/Gut8NAZI40
https://jsfiddle.net/qe0m49ub/
.curtain {
max-width: 640px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 25px;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://via.placeholder.com/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
<div class="containera hide">
<div class="containera-inner">
<div class="curtain ">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
PaulOB
August 25, 2021, 2:25pm
2
You can’t transition from display:none. I have mentioned that a number of times now
Try this:
.curtain.slide .panel-left {
//transform: translateX(-100%);
animation:curtain1 8s forwards;
animation-delay:3s;
}
@keyframes curtain1 {
to{transform: translateX(-100%)}
}
.curtain.slide .panel-right {
//transform: translateX(100%);
animation:curtain2 8s forwards;
animation-delay:3s
}
@keyframes curtain2 {
to{transform: translateX(100%)}
}
1 Like
The The height there is the whole viewport, it should only be the height of the youtube player.
https://jsfiddle.net/u1h8wn0v/
PaulOB
August 25, 2021, 2:54pm
4
Why should it? What have you done to make it that height?
You either need to set a height that matches the video or stack the left and right panels in relation to the video ratio keeper.
e.g.
<div class="curtain ">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
1 Like
I had them in the wrong spot in the html.
1 Like
Using this as an example of a flex version.https://jsfiddle.net/3ckLg25b/
What did I do wrong here?
Why is the image not split in half?
https://jsfiddle.net/w78yq23p/1/
This one uses slide-wrap
<div class="video video-frame"></div>
</div>
<div class="slide-wrap"></div>
</div></div>
instead of:
<div class="panel-left"></div>
<div class="panel-right"></div>
Does slide-wrap have to use?
background-attachment: fixed;
Is that why?
I think we went over that and the answer is yes.
I changed it to fixed here:
How would I get the left side to move?https://jsfiddle.net/h14073pq/
I got it to move by fixing this:https://jsfiddle.net/82Lc7b4q/1/
Added:
@keyframes curtain1 {
to { transform: translateX(-100%); }
}
To this:
.curtain.slide .slide-wrap::before {
//transform: translateX(-100%);
animation:curtain1 8s forwards;
animation-delay: 3s;
}
@keyframes curtain1 {
to { transform: translateX(-100%); }
}
.curtain.slide .slide-wrap::after {
//transform: translateX(100%);
animation:curtain2 8s forwards;
animation-delay: 3s;
}
@keyframes curtain2 {
to { transform: translateX(100%); }
}
I got this one working:https://jsfiddle.net/sb1anfmu/4/
.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;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
animation: curtain1 8s forwards;
animation-delay: 3s;
}
@keyframes curtain1 {
to { transform: translateX(-100%); }
}
.curtain.slide .panel-right {
animation:curtain2 8s forwards;
animation-delay: 3s;
}
@keyframes curtain2 {
to { transform: translateX(100%); }
}
The flex version has these set to use relative, which is what it is supposed to be set up as, not absolute.
I think that is right.https://jsfiddle.net/3ckLg25b/
.curtain {
position: relative;
min-width: 40%;
max-width: 640px;
margin: auto;
flex: 1 0 0%;
}
.curtain-ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
}
I did that here:
And the curtain is stuck to the top :
How would that be fixed?https://jsfiddle.net/as456wqx/
.curtain {
position: relative;
max-width: 640px;
margin: auto;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
border-radius: 25px;
margin: auto;
overflow: hidden;
}
Changing it back to absolute would look like this:https://jsfiddle.net/9d54qrvm/1/
.curtain {
max-width: 640px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 25px;
overflow: hidden;
}
.ratio-keeper {
position: absolute;
top: 0;
bottom: 0;
height: 0;
padding-top: 56.25%;
width: 100%;
margin: auto;
}
What do I do?
PaulOB
August 25, 2021, 7:59pm
8
asasass:
What do I do?
Yes you need to use absolute because of the ratio technique requiring the use of percentage padding which can’t be obtained if you use flex to center the element. Grid would probably work and I believe we did that a while ago. We seem to be going over the same ground again.
Aren’t the ratio techniques being used here?
This flex version is able to use relative, how come?https://jsfiddle.net/3ckLg25b/
.curtain-ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
}
The other code is using the same thing.
This code is using flex also.https://jsfiddle.net/as456wqx/
and it’s not able to use relative, why not?
PaulOB
August 25, 2021, 8:16pm
10
Ok try this.
Add display:flex to .containera-inner and then add flex:1 0 0% to .curtain. That should with any luck allow the padding percentage to work.
1 Like
That worked:https://jsfiddle.net/d3uprkf5/
.containera-inner{
display: flex;
}
.curtain {
position: relative;
max-width: 640px;
margin: auto;
flex: 1 0 0%;
}
Using absolute causes the curtain along with the video to get squished.
I don’t know how that would’ve been fixed.
https://jsfiddle.net/9d54qrvm/1/
PaulOB
August 25, 2021, 9:17pm
12
The video doesn’t get squished it just goes out the top (and bottom) of the viewport.
Thats one of the problems with centring absolute elements when the viewport is smaller than the element the absolute element still centres and because its not in the flow doesn’t hold the page open. You could add a min-height to the parent but it wouldn’t be exact.
1 Like
system
November 25, 2021, 4:17am
13
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
