How would I be able to implement that?
Where 1 image fills both left and right panels.
code: https://jsfiddle.net/oyrbp65L/
.panel-left,
.paneldoor-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;
}
Assuming you basically want half an image on each side then I would tackle it like this.
I would use :before to create a pseudo element on both the left and right curtains.
Then I would make this element twice the width of the half curtain (200%). The left and right curtains (the element the pseudo is attached to) would need overflow:hidden added to stop the oversized pseudo elements showing.
Then you would place the same image in both left and right pseudo elements. Those elements will need to be absolutely positioned and fill the height but be twice the width of the half as already mentioned.
The right side pseudo element would need to have a left position of minus 100% to match it up with the left side image. You would now have two half images that should match to produce a whole image.
Remember to remove the original image from the parent.
Luckily I am not near a computer until tomorrow so you will have to try and do this yourself. 
There are other ways if you don’t mind stretching the picture but the pseudo element method is best.
Borrowed a computer for 10 mins so here you go.
This replaces the same section of code in your fiddle.
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
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://picsum.photos/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%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
If this is a full viewport screen curtain then it would be better as a fixed positioned element because when the curtain slides the page suddenly gets ten times as tall and the image then expands and loses its impact. If you covered the viewport with a fixed positioned curtain then the size wouldn’t change when opened.
If I were to just use a gradient, how would that be written?
Would I be setting the code up differently?
i.e., Would pseudo elements be needed for that also, or no?
code: https://jsfiddle.net/5btj3Lrc/1/
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background: linear-gradient(to bottom right, #b968c5, skyblue);
}
If you want a gradient across the whole screen you could probably try something like this.
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background: linear-gradient(to bottom right, #b968c5, skyblue);
}
.panel-left {
left: 0%;
background-position:0 100%;
background-size:200%;
}
.panel-right {
left: 50%;
background-position:100% 0;
background-size:200%;
}
What are your thoughts on how this one is set up?
And is there a way I can improve it, make it work better?
code: https://jsfiddle.net/hzr4wset/1/
.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: 100%;
background-size: 100vw;
background-repeat: no-repeat;
background-position: top;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
background-position: left;
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
background-position: right;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
Is left and right 0, or, 0%?
Did you make a mistake there?
Which one is it supposed to be?
.panel-left {
left: 0%;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
I found this works there: Thoughts?
Is setting it up one way better than the other?
i.e., Does one way make more sense than the other way?
code: https://jsfiddle.net/mhgw5078/2/
.door-left {
left: 0%;
}
.door-right {
left: 50%;
}
vs.
code: https://jsfiddle.net/wo02ju5f/
.door-left {
left: 0%;
}
.door-right {
right: 0%;
}
No you made a mistake there that I forgot to correct
It’s not a mistake as 0% or 0 are the same thing. You don’t need units for zero in CSS (apart from a few exceptions).
left:0 and right:0 are the same as left:0% and right:0% or indeed right:0px and left:0px. All will validate but the unit is unnecessary for zero.
Right:0 ensures the element is at the furthest right it can be. It is a more logical approach and won’t rely on the elements width.
This code works perfectly.
Does pointer-events: none; get used on this one, or no?
What’s the rule of thumb when to use it and when it is not needed?
When it is an image it gets used, and a gradient it doesn’t?
Should it always be used on a slider transition code?
I used pointer events none because I wasn’t sure if you were detecting a click on the window or a specific item and was just making sure the curtains weren’t clickable.
I don’t believe the pointer events none is needed in this example so you should be able to remove it
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.