Clicking the exit button should split the page in half

asasass · November 3, 2022, 12:05am

I’m confused on how this was done.

Here is my working code: https://jsfiddle.net/84sfxayw/

Here was my attempt: https://jsfiddle.net/84sfxayw/6/

Example of it working in an older code.
https://jsfiddle.net/y8czgxrw/

Only difference is, I’m not splitting the exit button, only the background.

In another code I found this:

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



.curtain2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*.curtain2.slide {
  height: auto;
  min-height: 100%;
}*/

.door-left,
.door-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  top: 0%;
  transition: all 8s linear;
  transition-delay: 300ms;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;

}

.door-left {
  left: 0;
}

.door-right {
  right: 0;
}

.door-left::before,
.door-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: blue;
  /* background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;*/
}

.door-right::before {
  left: -100%;
}

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

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

<div class="curtain2">
  <div class="container1 ">

    <div class="curtain1">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>


        <div class="fan">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <g id="fan">
              <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
            </g>
          </svg>

        </div>
        <div class="cross"></div>

        <div class="panel-left"></div>
        <div class="panel-right"></div>

        <div class="wrap embed-youtube ">

          <div class="video embed-youtube  " data-id="djV11Xbc914">

          </div>

          <button class="playa embed-youtube-play iframe" type="button" aria-label="Open"></button>
        </div>

      </div>

      <div class="exit"></div>
    </div>
  </div>



  <div class="container2 hide">
    <div class="container ">
      <div class="header hide">
        <div class="ratio-keeper2"></div>
      </div>
      <div class="curtain">
        <div class="ratio-keeper">

          <div class="fence">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>

          <div class="fan">
            <svg width="70%" height="70%" viewBox="76 130 381 381">
              <use href="#fan" />
            </svg></div>


          <div class="cross"></div>

          <div class="one-left"></div>
          <div class="one-right"></div>
          <div class=" embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playb embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain">
        <div class="ratio-keeper">

          <div class="fence">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>

          <div class="fan">
            <svg width="70%" height="70%" viewBox="76 130 381 381">
              <use href="#fan" />
            </svg></div>



          <div class="cross"></div>

          <div class="two-left"></div>
          <div class="two-right"></div>
          <div class=" embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playc embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain">
        <div class="ratio-keeper">

          <div class="fence">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>


          <div class="fan">
            <svg width="70%" height="70%" viewBox="76 130 381 381">
              <use href="#fan" />
            </svg></div>


          <div class="cross"></div>


          <div class="three-left"></div>
          <div class="three-right"></div>
          <div class="embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playd embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain">
        <div class="ratio-keeper">

          <div class="fence">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>

          <div class="fan">
            <svg width="70%" height="70%" viewBox="76 130 381 381">
              <use href="#fan" />
            </svg></div>



          <div class="cross"></div>

          <div class="four-left"></div>
          <div class="four-right"></div>
          <div class="embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playe embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain">
        <div class="ratio-keeper">

          <div class="fence">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>

          <div class="fan">
            <svg width="70%" height="70%" viewBox="76 130 381 381">
              <use href="#fan" />
            </svg></div>

          <div class="cross"></div>

          <div class="five-left"></div>
          <div class="five-right"></div>
          <div class="embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playf embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

PaulOB · November 3, 2022, 9:10am

I don’t see any split occurring when the exit button is clicked?

Did you mean the play button?

The page seems to split in half ok. Was the play button also supposed to split in half?

asasass · November 3, 2022, 11:13am

What I wanted to have occur is, clicking the exit button should split the page revealing the other 5 videos.

That was what I was trying to do.

How would that be done?

PaulOB · November 3, 2022, 12:42pm

I wish you would be a but clearer in what you want I’ve just spent the last 30 minutes splitting the play button.

I’m going to post the code for that anyway as you’ll probably ask for it in another thread.

.embed-youtube .embed-youtube-play,
.split-play{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  z-index: 1;
}

.embed-youtube-play::before,
.split-play:before{
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}
.split-play{
  box-sizing:border-box;
  opacity:0;
}
.panel-left .split-play{
  margin:auto -45px auto auto;
}
.panel-right .split-play{
  margin:auto auto auto -45px;
}
.slide .split-play{opacity:1;}

      <div class="panel-left"><span class="split-play"></span></div>
      <div class="panel-right"><span class="split-play"></span></div>

As an aside stop doing things like this.

.four-left,
.four-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  top: 0%;
  transition: all 8s ease;
  transition-delay: 300ms;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.four-left {
  left: 0;
}

.four-right {
  right: 0;
}

.four-left::before,
.four-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: url("https://img.youtube.com/vi/djV11Xbc914/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.four-right::before {
  left: -100%;
}

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

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

.five-left,
.five-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  top: 0%;
  transition: all 8s ease;
  transition-delay: 300ms;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.five-left {
  left: 0;
}

.five-right {
  right: 0;
}

.five-left::before,
.five-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: url("https://img.youtube.com/vi/djV11Xbc914/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.five-right::before {
  left: -100%;
}

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

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

one-left,one-right
two-left,two-right
three-left,three-right
etc.

The rules are all the same as panel-left and panel-right! Why did you duplicate them multiple times? If you need a different image in each then just add a class for the image. Don’t repeat everything all again as that is nonsense and wasteful.

For that to happen there would need to be a background covering the whole page.

You’d need to add a left and right element inside container2 like this.

<div class="container2 hide">
  <div class="body-curtain-left"></div>
  <div class="body-curtain-right"></div>
  <div class="container "> etc...

Then more or less duplicate the curtain code but use position:fixed and a keyframe as the transition won;t work from display:none.

.container2 .body-curtain-left,
.container2 .body-curtain-right {
  position: fixed;
  height: 100%;
  width: calc(50% + 1px);
  top: 0%;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.container2 .body-curtain-left {
  left: 0;
}

.container2 .body-curtain-right {
  right: 0;
}

.container2 .body-curtain-left::before,
.container2 .body-curtain-right::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: url("https://img.youtube.com/vi/djV11Xbc914/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}

.container2 .body-curtain-right::before {
  left: -100%;
}

.container2:not(.hide) .body-curtain-left {
  animation: bodySlide 8s linear forwards;
}

@keyframes bodySlide {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(-100% - 1px));
    opacity: 1;
  }
}

.container2:not(.hide) .body-curtain-right {
  animation: bodySlide2 8s linear forwards;
}

@keyframes bodySlide2 {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(100% + 1px));
    opacity: 1;
  }
}

(Note the above code is different enough to be separate from the original curtain code but of course you could just style differences if you are thorough enough. It’s probably best to keep this one separate.)

asasass · November 3, 2022, 12:57pm

How come the curtain holding the video doesn’t split in half?

PaulOB · November 3, 2022, 1:01pm

You lost me?

I have no idea what that means.

You showed this as an example of what you wanted.

asasass · November 3, 2022, 1:18pm

The background splits as green here: https://jsfiddle.net/crmxw8v6/

The background color behind the 5 videos, how do I change that to a different color?

PaulOB · November 3, 2022, 1:36pm

The videos are contained by ,container so i would assume you change their color there.

.container2 .container{
  background:pink
}

It’s still not clear what you are trying to do?

You can’t just split the container1 video in half (and all its contents) as that is basically splitting everything. You would need a video in the left panel and a video in the right panel (and then all their buttons and associated javascript code) and probably a third vide to overlay the other two half videos as you can’t have two halfs playing at the same time. Then you’d hide the playing video and split the non playing videos (although they wouldn’t be at the same playing place as the whole video). I’m not even sure if any of that is feasible or possible.

asasass · November 3, 2022, 1:45pm

What would be the bare minimal at best that could be achieved?

PaulOB · November 3, 2022, 5:29pm

In what way?

You’d need 3 videos and three sets of html of the same thing to split it in half properly. That would just be too complicated with the js and everything else.

I think its too complicated to do that.

It might be possible instead to use clip-path to blank out the screen but instead of a slide you would have an actual curtain effect.

Here’s proof of concept.

Just click the background to start the effect (view at full size on codepen rather than the window above).

Unfortunately I am out this evening but back tomorrow.

PaulOB · November 4, 2022, 4:29pm

You could also use a circle in the clip-path and reverse the effect to show the content underneath.

I think clip-path is the only way to get a curtain effect without duplicating (or even tripling) masses of code.

system · February 3, 2023, 11:29pm

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