Changing from splash-screen to sliding curtain

[asasass]

Here it is working: where both are identical: https://jsfiddle.net/sunepr5b/

What if each held different images?

Seen here: https://jsfiddle.net/r40u76h8/

<div class="slide panel-left">
	<div class="inner">
		<div class="container2">
			<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 1">
			<div>
				<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 2">
				<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 3">
				<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 4">
      </div>
				<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 5">
    </div>
			</div>
		</div>

		<div class="slide panel-right">
			<div class="inner">
				<div class="slide container2">
					<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 1">
					<div>
						<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 2">
						<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 3">
						<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 4">
      </div>
						<img src="https://i.imgur.com/2NcDQ1H.png" alt="Image 5">
    </div>
					</div>
				</div>


				<div class="slide curtain-left hide">
					<div class="inner">
						<div class="container2">
							<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
							<div>
								<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
								<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
								<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
								<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
							</div>
						</div>

						<div class="slide curtain-right hide">
							<div class="inner">
								<div class="slide container2">
									<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
									<div>
										<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
										<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
										<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
										<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
									</div>
								</div>

This part here would need to be adjusted:

 const curtainLeft = document.querySelector('.curtain-left');
  const curtainRight = document.querySelector('.curtain-right');
  
  curtainLeft.style.transition = 'none';
  curtainRight.style.transition = 'none';
  
  const modal = document.getElementById('myModal');
  modal.style.display = 'none';
  modal.classList.add("open");
  modal.offsetWidth = modal.offsetWidth;
  curtainLeft.style.transition = null;
  curtainRight.style.transition = null;
  modal.classList.remove("open");
}

[PaulOB]

@asasass

What if each held different images?

It’s unclear what you want. Are you talking about the green blocks?

If so how does that make sense in that section where you split the cross in half? You will have two half images cut off in the middle. Or you going to have two crosses one on each side?

If its not one seamless block across both panels then you don’t need to stretch across both panels anyway and the whole css should be changed.

Too many variables there to make any suggestions at all.

@asasass

This part here would need to be adjusted:

Why would the js need to be adjusted if you are just changing the appearance.? What does that js have to do with how the images look?

[asasass]

5 pictures are assigned to this: <div class="slide panel-left"> <div class="slide panel-right">

After clicking the 1st exit button.

5 different pictures are assigned to this: <div class="slide curtain-left hide"> <div class="slide curtain-right hide">

How do I unhide that one after the 2nd exit button is clicked?

[PaulOB]

Sorry, I haven’t grasped what you are trying to do here.

You have two split panels which open after a delay. They are 2 half width screens. Inside those panels are the cross shapes. The cross shape only moves when the panel slides. Both sides move at the same time. The cross shape is stretched to double width so that you get half on each side.

I don’t see how any of that fits in with what you just asked?

[asasass]

One cross set of 5 images to be presented after the 1st exit button is clicked,

Another cross set of 5 different images to be presented after 2nd exit button is clicked.

That is what I was trying to have occur in the code.

[PaulOB]

@asasass

Another cross set of 5 different images to be presented after 2nd exit button is clicked.

That makes no sense because you have two sets of 5 images on each side. If you wanted to change those then you would need another set of 5 images on each side. Basically duplicate the html and then hide/show each as required.

I still can’t visualise this so I feel you actually have something else in mind.

[asasass]

Click exit button 1) see the 5 images of what is on the videos.
one sliding panel.

Click exit button 2) see the 5 images of what is on the videos.
another sliding panel.

The code here: https://jsfiddle.net/sunepr5b/

These 5 images appear after clicking both exit buttons.

If I want the images shown to be different after clicking the 2nd exit button, I would need to add a 2nd sliding curtain.

[PaulOB]

@asasass

If I want the images shown to be different after clicking the 2nd exit button, I would need to add a 2nd sliding curtain.

Yes you’d probably need to duplicate the html and choose the second version. Or at least have a duplicated inner section in which you show one set first and then next time show the other set.

[asasass]

This was my attempt: https://jsfiddle.net/1wz94hvm/2/

After clicking 2nd exit button, the first one gets hidden, which I probably didn’t need to do, but a 2nd curtain can’t be seen on the screen.

const curtainLeft = document.querySelector('.curtain-left');
  const curtainRight = document.querySelector('.curtain-right');
  const panelLeft = document.querySelector('.panel-left');
  const panelRight = document.querySelector('.panel-right');


  //curtainLeft.style.transition = 'none';
  // curtainRight.style.transition = 'none';
  // const modal = document.getElementById('myModal');
  //  modal.style.display = 'none';
  //modal.classList.add("open");
  //  modal.offsetWidth = modal.offsetWidth;
  //curtainLeft.style.transition = null;
  // curtainRight.style.transition = null;
  curtainLeft.classList.remove("hide");
  curtainRight.classList.remove("hide");
  curtainLeft.offsetWidth = curtainLeft.offsetWidth;
  curtainRight.offsetWidth = curtainLeft.offsetWidth;
  panelLeft.classList.add("hide");
  panelRight.classList.add("hide");
  //modal.classList.remove("open");
}

At the code here: https://jsfiddle.net/1wz94hvm/3/

A 2nd curtain can be seen on the screen.

 .slide .curtain-left {
    transform: translateX(calc(-100% - 1px));
  }

 .slide .curtain-right {
    transform: translateX(calc(100% + 1px));
  }

After clicking the 2nd exit button I am seeing this:

Is it supposed to be this:

.modal:not(.open)~.curtain-left {
    transform: translateX(calc(-100% - 1px));
  }

 .modal:not(.open)~.curtain-right {
    transform: translateX(calc(100% + 1px));
  }

or this:

 .slide .curtain-left {
    transform: translateX(calc(-100% - 1px));
  }

 .slide .curtain-right {
    transform: translateX(calc(100% + 1px));
  }

or something different?

[PaulOB]

@asasass

After clicking the 2nd exit button I am seeing this:

The curtain-right .inner element should have a left:-100% applied the same as the panel-right .inner.

[asasass]

I did that here: https://jsfiddle.net/cxnz3q04/

But it is not splitting in half, how do I have that occur?

[asasass]

Right now, this is what I have and it works: https://jsfiddle.net/5j89Lcgf/1/

Would you have written this part differently?

const curtainLeft = document.querySelector('.curtain-left');
  const curtainRight = document.querySelector('.curtain-right');
  //const panelLeft = document.querySelector('.panel-left');
  //const panelRight = document.querySelector('.panel-right');

  //curtainLeft.style.transition = 'none';
  // curtainRight.style.transition = 'none';
  const modal = document.getElementById('myModal');
  modal.style.display = 'none';
  modal.classList.add("open");
  modal.offsetWidth = modal.offsetWidth;
  //curtainLeft.style.transition = null;
  // curtainRight.style.transition = null;
  curtainLeft.classList.remove("hide");
  curtainRight.classList.remove("hide");
  curtainLeft.offsetWidth = curtainLeft.offsetWidth;
  curtainRight.offsetWidth = curtainLeft.offsetWidth;
 //panelLeft.classList.add("hide");
  //panelRight.classList.add("hide");
  modal.classList.remove("open");
  console.log("what")
}

[asasass]

I’m confused on how to do this:

Starting from here: https://jsfiddle.net/5j89Lcgf/1/

Putting this inside a container, assuming I am doing that right, what gets changed in the css and the js?

I would be doing:

<div class="curtain-container ">

or this?

<div class="slide curtain-container hide">

<div class="slide curtain-left hide">
					<div class="inner">
						<div class="container2">
							<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
							<div>
								<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
								<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
								<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
								<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
							</div>
						</div>

						<div class="slide curtain-right hide">
							<div class="inner">
								<div class="slide container2">
									<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
									<div>
										<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
										<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
										<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
										<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
									</div>
								</div>

Putting the above into a container would look like what?

Like this?

or is this wrong?

<div class="curtain-container ">
				<div class="slide curtain-left hide">
					<div class="inner">
						<div class="container2">
							<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
							<div>
								<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
								<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
								<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
								<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
							</div>
						</div>

						<div class="slide curtain-right hide">
							<div class="inner">
								<div class="slide container2">
									<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
									<div>
										<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
										<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
										<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
										<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
									</div>
								</div></div>

The javascript would look like this:

 const curtain = document.querySelector('.curtain-container');

  const modal = document.getElementById('myModal');
  modal.style.display = 'none';
  modal.classList.add("open");
  modal.offsetWidth = modal.offsetWidth;
  curtain.classList.remove("hide");
  curtain.offsetWidth = curtain.offsetWidth;
  modal.classList.remove("open");
}

[asasass]

Question

If I was using .curtain-container in the html,

Would I be able to replace:

  const curtainLeft = document.querySelector(curtainLeftSelector);
  const curtainRight = document.querySelector(curtainRightSelector);

with:

const curtain = document.querySelector(curtainSelector);

In here?

Am I able to do that, will it work?

Working code here: https://jsfiddle.net/fj9ewgu0/7/

function showCurtain(curtainLeftSelector, curtainRightSelector) {
  const curtainLeft = document.querySelector(curtainLeftSelector);
  const curtainRight = document.querySelector(curtainRightSelector);

  curtainLeft.classList.remove("hide");
  curtainRight.classList.remove("hide");

 /* curtainLeft.addEventListener("transitionend", function() {
    curtainLeft.style.pointerEvents = "none";
  });

  curtainRight.addEventListener("transitionend", function() {
    curtainRight.style.pointerEvents = "none";
  });*/
}


function resetPage2() {
  hideContainer2(".containerA");
  showCurtain(".curtain-left", ".curtain-right");
  showContainer(".containerB");
}

[asasass]

It’s not splitting in half after the 2nd exit button is clicked.

I almost got it here: https://jsfiddle.net/5bmuvryk/

	<div class="curtain-container hide">
	  <div class="slide curtain-left "></div>

	  <div class="slide curtain-right "> </div> </div>

.curtain-container.hide {
    display: none;
  }

function showCurtain(curtainSelector) {
  const curtain = document.querySelector(curtainSelector);
  curtain.classList.remove("hide");
  curtain.addEventListener("transitionend", function() {
    curtain.style.pointerEvents = "none";
  });
}

function resetPage2() {
  hideContainer2(".containerA");
  showCurtain(".curtain-container");
  showContainer(".containerB");
}

In the working code: https://jsfiddle.net/3ecytb5a/1/

This was changed:

.modal:not(.open)~.curtain-left {
    transform: translateX(calc(-100% - 1px));
  }
  
.modal:not(.open)~.curtain-right {
    transform: translateX(calc(100% + 1px));
  }

.slide .curtain-left {
    transform: translateX(calc(-100% - 1px));
  }

 .slide .curtain-right {
    transform: translateX(calc(100% + 1px));
  }

to this:

.modal:not(.open)~.curtain-left,
.slide .curtain-left {
  transform: translateX(calc(-100% - 1px));
}

.modal:not(.open)~.curtain-right,
.slide .curtain-right {
  transform: translateX(calc(100% + 1px));
}

What I need help with:

After clicking 2nd exit button, image is not splitting in half.

Broken Code: https://jsfiddle.net/wu69an0v/

Working Code: https://jsfiddle.net/y0njq7tr/

Trying to fix the broken code.

How the code works: Exit button appears on the screen after curtain goes up.

Click that, image splits in half.

Scroll down to the bottom, click 2nd exit button, image should split in half again.

I am stuck, trying to figure out how to fix the broken code.

[PaulOB]

@asasass

I am stuck, trying to figure out how to fix the broken code.

You are making the same mistake again in using display:none to hide the element. When you remove the hide class there is no transition because the element was display:none. You can’t use display:none for transitions.

Also you are targeting the wrong element with the sibling selector when you should be using the child selector.

This is the code you need.

.curtain-container.hide{
 display:block;
 opacity:0;
 pointer-events:none;
}

.curtain-container:not(.hide) > .curtain-left {
  transform: translateX(calc(-100% - 1px));
  opacity:1;
  pointer-events:initial;
}

.curtain-container:not(.hide)  > .curtain-right {
  transform: translateX(calc(100% + 1px));
  opacity:1;
  pointer-events:initial;
}

[asasass]

What if I used visibility: visible; instead of opacity?

Then I don’t need to use pointer events.

Does it make a difference? https://jsfiddle.net/ytm3w6og/2/

.curtain-container:not(.hide) > .curtain-left {
  transform: translateX(calc(-100% - 1px));
  visibility: visible;
  /*pointer-events:initial;*/
}

.curtain-container:not(.hide)  > .curtain-right {
  transform: translateX(calc(100% + 1px));
    visibility: visible;
  /*pointer-events:initial;*/
}

[asasass]

I did that here: https://jsfiddle.net/xq384op6/1/

Am I supposed to do anything else?

These get shown after clicking the **2nd ** exit button:

<div class="slide panel-left">
	<div class="inner">
		<div class="container2">
			<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
			<div>
				<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
				<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
				<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
				<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
			</div>
		</div>

		<div class="slide panel-right">
			<div class="inner">
				<div class="slide container2">
					<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
					<div>
						<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
						<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
						<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
						<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
					</div>
				</div>

These get shown after clicking the 1st exit button:

        <div class="slide panel-left">
	<div class="inner">
		<div class="container2">
			<img src="https://i.imgur.com/LWpqwIZ.png" alt="Image 1">
			<div>
				<img src="https://i.imgur.com/Jc0kai9.png" alt="Image 2">
				<img src="https://i.imgur.com/z77uJ5D.png" alt="Image 3">
				<img src="https://i.imgur.com/3OBXxef.png" alt="Image 4">
      </div>
				<img src="https://i.imgur.com/9P6nYTI.png" alt="Image 5">
    </div>
	</div>
</div>

<div class="slide panel-right">
	<div class="inner">
		<div class="container2">
			<img src="https://i.imgur.com/LWpqwIZ.png" alt="Image 1">
			<div>
				<img src="https://i.imgur.com/Jc0kai9.png" alt="Image 2">
				<img src="https://i.imgur.com/z77uJ5D.png" alt="Image 3">
				<img src="https://i.imgur.com/3OBXxef.png" alt="Image 4">
      </div>
				<img src="https://i.imgur.com/9P6nYTI.png" alt="Image 5">
    </div>
	</div>
</div>

[PaulOB]

It seems to be working ok.

[asasass]

At the code here:

Working Code: https://jsfiddle.net/pxfm2bzr/

Curtain opens and exit button fades in,

function showExit(panelSelector, exitSelector) {
  const panel = document.querySelector(panelSelector);
  const closeButton = document.querySelector(exitSelector);
  panel.addEventListener("transitionend", function() {
    closeButton.classList.add("visible");
  });
 }


function resetPage() {
  showExit(".panel-left",".exit");
}

If I want to replace, .panel-left with .panel-container, how do I do that?

After clicking the first exit button, it is not opening: https://jsfiddle.net/pxfm2bzr/1/

function resetPage() {
  showExit(".panel-container",".exit");
  hideContainer(".containerB");
  removeModal("#myModal");
}

<div class="panel-container">
<div class="slide panel-left">