The curtain is not viewable on the screen,

HTML & CSS
1

Trying to understand what I am forgetting to do. https://jsfiddle.net/wc219mnx/6/

I thought I was doing this right.

.containerB {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
 /* z-index: 99;*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  height: 100vh;
  background:
    repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.outer-containerB.hide {
  display: none;
}

.video-containerC.hide {
  display: none;
}

.video-containerC {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  padding: 1px;
}

.video-containerC::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.video-containerC::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #0059dd;
  z-index: 2;
  pointer-events: none;
  /* just in case*/
}


.curtain-leftE,
.curtain-rightE {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
  transition: all ease 8s;
  transition-delay: 1s;
}

.curtain-leftE {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.curtain-rightE {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.curtain-leftE::before,
.curtain-rightE::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-color: #121212;
  /*background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;*/
}

.curtain-rightE::before {
  left: -100%;
}

.video-containerC.slide .curtain-leftE {
  transform: translateX(-100%);
}

.video-containerC.slide .curtain-rightE {
  transform: translateX(100%);
}

.curtain-leftE p,
.curtain-rightE p {
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  z-index: 1;
  /* adjust to put on top of arrow*/
  font-size: 7.031vw;
  /*1280 60px*/
  white-space: nowrap;
}

.curtain-rightE p {
  left: -100%;

}

html

<div class="outer-containerB hide">

  <div class="containerB">
    <div class="video-containerC">
      <button class="exitE exit" type="button" title="Exit" aria-label="Close"></button>
      <div class="ratio-keeper">

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
          <p>some textB</p>
        </div>
        <div class="curtain-rightE">
          <p>some textB</p>
        </div>

      </div>
      <div class="playk"></div>
    </div>

js:

function resetPage() {
    hideContainer(".containerPageB")
    //showCurtain("-container");
    showContainer(".outer-containerB");
    removePlayer();
    const container = document.querySelector(".video-containerC");
  container.classList.add("slide");
     
  }

  function exitClickHandler() {
    resetPage();
    window.scrollTo(0, 0);

    loadPlayer.add(".playk", {
      videoId: "CHahce95B1g"
    });

  }
  const exitButton = document.querySelector(".exitD");
  exitButton.addEventListener("click", exitClickHandler);

}());
2

It should work the same way as .containerA does, only difference being, it doesn’t open on page load, it opens after clicking .exitD

The curtain is not appearing on the screen, how come?

I have not the slightest idea why.

It should also be opening, but I guess, one thing at a time.

https://jsfiddle.net/5d730syt/2/

I should be seeing this:


I tried different z-indexes, maybe I am not doing them correctly or something.

.containerB {
  z-index: 1;
}

.video-containerC::before {
  z-index: 2;
}

.video-containerC {
  z-index: 3;
}

.video-containerC::after {
  z-index: 4;
}

.curtain-leftE,
.curtain-rightE {
  z-index: 5;
}

.curtain-leftE::before,
.curtain-rightE::before {
  z-index: 6;
}

.curtain-leftE p,
.curtain-rightE p {
  z-index: 7;
}

  <div class="containerB">
    <div class="video-containerC">
      <button class="exitE exit" type="button" title="Exit" aria-label="Close"></button>
      <div class="ratio-keeper">

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
          <p>some textB</p>
        </div>
        <div class="curtain-rightE">
          <p>some textB</p>
        </div>

      </div>
      <div class="playk"></div>
    </div>
3

When you say curtain do you mean the panel with text that says “some text”?

If so its visible on both your examples and indeed also slides open after a few seconds.

I’m not really sure what issue you are asking about?

4

I added a 2nd one, not referring to the 1st one you see on the screen.

<div class="outer-containerB hide">

  <div class="containerB">
    <div class="video-containerC">
      <button class="exitE exit" type="button" title="Exit" aria-label="Close"></button>
      <div class="ratio-keeper">

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
          <p>some textB</p>
        </div>
        <div class="curtain-rightE">
          <p>some textB</p>
        </div>

      </div>
      <div class="playk"></div>
    </div>

    <div class="rContainer hide">
      <div class="rButtonContainer">

        <div class="exitF">
          <a href="" title="Exit" aria-label="Close"></a>
        </div>
      </div>

    </div>
  </div>
</div>

It should appear after clicking on the exit button at the bottom of this:

I am seeing this:

5

I can’t see that you ever actually unhide outer-containerB anywhere?

If I remove the display:none with devtools and use a high z-index with position:absolute then I can see it.

I can’t work out where you were trying to show it as the code is too complicated now and nearly everything is opening and closing with curtains except outer-containerB?

7

Now the text is visible, How do I have the curtain slide?

https://jsfiddle.net/y4oejfbt/4/

  function resetPage() {
    hideContainer(".containerPageB")
    //showCurtain("-container");
    showContainer(".outer-containerB");
    removePlayer();
  //  const container = document.querySelector(".video-containerC");
 // container.classList.add("slide");
     
  }

I had thought this would do it:

const container = document.querySelector(".video-containerC");
container.classList.add("slide");

css

.video-containerC.slide .curtain-leftE {
  transform: translateX(-100%);
}

.video-containerC.slide .curtain-rightE {
  transform: translateX(100%);
}

html

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
          <p>some textB</p>
        </div>
        <div class="curtain-rightE">
          <p>some textB</p>
        </div>

How do I have it slide open?

8

Isn’t this the same issue as before where you are adding a class to an element that is display:none and therefore no transition occurs?

I don’t see that you are adding the slide class anyway but it could have been done without using the slide class by using :not(.hide) on the outer-containerB (if that container was not display:none). You could use a kjeyframe animation instead or add the offset hack that you had before.

1 Like
9

Right now it opens with all of this, but you said it doesn’t need all of this.
https://jsfiddle.net/g0sw6t2n/4/

.outer-containerB.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.outer-containerB:not(.hide)>.curtain-leftE {
  transform: translateX(calc(-100% - 1px));
  pointer-events: initial;
}

.outer-containerB:not(.hide)>..curtain-rightE {
  transform: translateX(calc(100% + 1px));
  pointer-events: initial;
}

.video-containerC.slide .curtain-leftE {
  transform: translateX(-100%);
}

.video-containerC.slide .curtain-rightE {
  transform: translateX(100%);
}

Right now I have this: https://jsfiddle.net/53hkzpuf/2/

If this is what I want to be doing.

Video is now appearing. Adjusted the z-index.

:not(.hide)> is not needed then, or I’m doing/did it wrong?

.outer-containerB.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.video-containerC.slide .curtain-leftE {
  transform: translateX(-100%);
}

.video-containerC.slide .curtain-rightE {
  transform: translateX(100%);
}


/*.outer-containerB:not(.hide)>.curtain-leftE {
  transform: translateX(calc(-100% - 1px));
  pointer-events: initial;
}

.outer-containerB:not(.hide)>.curtain-rightE {
  transform: translateX(calc(100% + 1px));
  pointer-events: initial;
}*/
10

It doesn’t need the :not rules if you are adding the slide class.