Changing from splash-screen to sliding curtain

PaulOB · February 19, 2024, 8:42pm

The css would change to this:


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

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

asasass · February 19, 2024, 10:28pm

First I want to change panel left/right to .panel-container.

Working code: https://jsfiddle.net/Lgumr0a4/

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

My attempt: https://jsfiddle.net/Lgumr0a4/4/

After I click on the 2nd exit button, the sliding curtain is not on the screen.

I am stuck here.

  const panel = document.querySelector('.panel-container');
  
  panel.style.transition = 'none';

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

If this is being used twice in the code, I would state this only once?

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

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

Not like this?

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

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

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

asasass · February 20, 2024, 7:34am

To fix the broken code (My above attempt) something would need to be adjusted in the css, because all I touched was the javascript in my attempt.

Since there are 4 of these, would one set of these be changed to something else?

I’m stuck and confused:

My thinking is:

These go to the first .panel-container

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

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

This would go to the 2nd .panel-container, but would need to be adjusted.

Would that explain why no image is appearing on the screen after the 2nd exit button is clicked?

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

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

Working code: https://jsfiddle.net/Lgumr0a4/

Broken Code: https://jsfiddle.net/Lgumr0a4/4/

Trying to fix the broken code.

PaulOB · February 20, 2024, 1:16pm

When the modal is closed that code will slide open both panel-containers at the same time as it targets both elements.

You can’t extend the logic to the second set of panels because the first set of panels only slide when the modal is not open and that modal only closes once… You would need to use another trigger for the second set of panels when you click the X to go to the next screen and you would also need to hide the second set of panels as they will be on top of stuff unlike the first set of panels which are hidden by the modal code.

.

PaulOB · February 20, 2024, 1:20pm

No they go to both containers and slide them both open the first time the modal closes.

The same code can’t be used for both because it would affect both at the same time.

asasass · February 20, 2024, 1:56pm

I guess this is the best I would be able to do here:

https://jsfiddle.net/sm70ght4/2/

function handleModal2(modalId, panelLeftSelector, panelRightSelector) {
  const panelLeft = document.querySelector(panelLeftSelector);
  const panelRight = document.querySelector(panelRightSelector);

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

function resetPage2() {
  handleModal2("myModal", ".panel-left", ".panel-right");
  hideContainer2(".containerA");
  showContainer(".containerB");
}

asasass · February 21, 2024, 6:07pm

Using the same logic as above, or similar.

Where this would be used twice, but with different images in each?

Is that able to be done?

I tried here: https://jsfiddle.net/ym92wfaL/

Where class="splash-screen2" is used twice, but with different images set in each.

I wasn’t able to figure it out.

<div class="splash-screen2">
    <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>

Maybe this would get changed to something different:

function handleModal2(modalId, panelLeftSelector, panelRightSelector) {
  const panelLeft = document.querySelector(panelLeftSelector);
  const panelRight = document.querySelector(panelRightSelector);

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

My attempt: https://jsfiddle.net/ym92wfaL/3/

Did not work.

function handleModal2(modalId, splashScreenSelector) {
  const splashscreen = document.querySelector(splashScreenSelector);

  //splashscreen.style.transition = 'none';

  const modal = document.getElementById(modalId);
  modal.style.display = 'none';
  modal.classList.add("open");
  modal.offsetWidth = modal.offsetWidth;
  //splashscreen.style.transition = null;
  modal.classList.remove("open");
}

handleModal2("myModal", ".splash-screen2");

asasass · February 22, 2024, 3:53am

I almost have it working: https://jsfiddle.net/hxqnya4o/2/

The images should be different, not the background.

function handleModal2(modalId, splashScreenSelector) {
  const splashscreen = document.querySelector(splashScreenSelector);

  splashscreen.style.background = "none";
  //splashscreen.style.pointerEvents = "auto";
  splashscreen.classList.remove("hide");
  splashscreen.offsetWidth = splashscreen.offsetWidth;
  //window.getComputedStyle(splashscreen).getPropertyValue("width");
  splashscreen.classList.add("hide");

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

  const modal = document.getElementById(modalId);
  modal.style.display = 'none';
  modal.classList.add("open");
  modal.offsetWidth = modal.offsetWidth;
  splashscreen.style.background = null;
  modal.classList.remove("open");
}

after clicking 1st exit:

after clicking 2nd exit:

system · August 3, 2024, 6:25pm

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

Topic		Replies	Views
Removing modal from the code HTML & CSS	40	2334	June 19, 2024
I want to add a curtain that goes up over the player HTML & CSS	21	1903	May 3, 2024
Clicking the exit button should split the page in half HTML & CSS	11	916	February 3, 2023
The curtain is not viewable on the screen, HTML & CSS	9	750	June 17, 2024
How to add another splash screen? HTML & CSS	17	2955	June 7, 2024

Changing from splash-screen to sliding curtain

Related topics