What I am trying to do is have the first page fade back after the home svg is clicked.
https://jsfiddle.net/1dtzhqs2/
It starts out as this: Original Page (First Page)
After a play image is clicked.
There is a fade effect,
And then it becomes this:
After clicking on the home svg, the original page, (the first page) should fade back in.
You would need to do the reverse of what you are doing at the moment and when a home button is clicked remove the active and hide classes to bring the page back to normal although you would also need another animation for the body.to fade back in.
Loop through the home buttons and add a click handler.
When the home button is clicked remove the active class and the hide classes and them toggle an animation class on the body.
Roughly like this bearing in mind I’m in a strange land and on a strange computer using a strange language (js).
const manageCover = (function makeManageCover() {
const config = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function coverClickHandler(evt) {
hideAll(config.containers);
const cover = evt.currentTarget;
showCovers(cover);
}
function homeClickHandler(evt) {
const home = evt.currentTarget;
showHome(home);
}
function showHome(el) {
const theActive = document.querySelector(".with-curtain.active");
const theHides = document.querySelectorAll(".hide");
const theBody = document.querySelector("body");
theActive.classList.remove("active");
theHides.forEach(function(removeHide) {
removeHide.classList.remove("hide");
});
void theBody.offsetWidth; //restart animation
theBody.classList.toggle("bodytoggle");
}
function addClickToButtons(playButtons) {
playButtons.forEach(function addEventHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addClickToHome(goHome) {
goHome.forEach(function addEventHandler(goHome) {
goHome.addEventListener("click", homeClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
const goHome = document.querySelectorAll('.home');
addClickToHome(goHome);
}
return {
addCoverHandler,
init,
show
};
}());
Of course that doesn’t follow all the other Paul’s guidelines so you will have to sort that out yourself.
Then you will need to add some extra css.
body {
background: #353198;
animation: fade 2s ease 0s forwards;
}
.bodytoggle{
animation:fade2 2s ease forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
(formatting has gone weird when copying from your jsSitor panel).
You should really hide the home button until the curtain is open because on my slow connection I can see the home button before the curtain is drawn. You have enough classes in place to do that already using the active class.
Also if you wanted the video and its background to fade out slowly while the body fades in then your out of luck as that would need a complete re-design.but you could do it sequentially withthe video fading out and then when that’s finished the body fading in afterwards (rather than both at the same time). However even that will require more JS and more css animations as you would need to add a class to the video and background and start a slow fade out with a new css animation (a bit like I just did for the body).
That all seems a bit complex for me and I don’t have the energy to do that while away especially when yoiu may change your mind in the next second 
Back in a few days 
That worked:
https://jsitor.com/CHvpsWwTf
About hiding the home button, I never noticed that, but will look into your suggestion.
Also if you wanted the video and its background to fade out slowly while the body fades in.
I never thought about that, that seems interesting, I like that idea.
There’s also an issue with having the svg over the iframe.
pointer-events: none; would need to be in place, or it interferes with the YouTube video.
The issue with using:
svg.home {
pointer-events: none;
}
While that works with the svg not interfering,
it also disables being able to click on the svg.
I don’t think there is a solution for that.
other than coming up with a different idea on how to transition back to the previous page.
Would I be able to move the svg off the video without affecting the position of the video?
Meaning, If place the svg in the top right, it won’t push the video down?
I found this code, where there would be an X at the top right of the screen, maybe I would add a colored square over it so it is visible, so it stands out.
That would be clicked which would exit out of the page.
I seem to like this idea.
I’m not sure how it would be implemented in my code.
Will I be able to use a js close button?
https://jsfiddle.net/cn5bq23h/
The code that you did, can that be edited for it to be able to do that?
https://jsitor.com/CHvpsWwTf
backup copy of the jsitor
https://jsfiddle.net/vx06e91t/
I was looking at this:
You can just used fixed positoining on it.
e.g.
.home {
position: fixed;
top: 20px;
right:20px;
width: 50px;
height: 50px;
fill: green;
cursor: pointer;
}
Using this:
<div class="home"><button class="home" aria-label="Close"></button></div>
How would I get an X?
https://jsitor.com/3xcTBuZFO
Like there is here?
https://jsitor.com/Wwhfm4uFP
Right now I’m seeing this:
This is used I see:
.bc-modal__close-button::before {
transform: rotate(45deg);
}
.bc-modal__close-button::after {
transform: rotate(-45deg);
}
Something like this:
.home {
position: fixed;
top: 20px;
right:20px;
cursor: pointer;
width: 32px;
height: 30px;
background:rgba(255,255,255,0.5);
border:none;
-webkit-appearance:none;
appearance:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.home::before,
.home:after {
content: "";
background-color: #d4001e;
width: 18px;
height: 3px;
position: absolute;
top: 14px;
left: 8px;
right: 0;
bottom: 0;
}
.home::before {
transform: rotate(45deg);
}
.home::after {
transform: rotate(-45deg);
}
Sorry about the spaces it seems to do that when I copy from jSitor.
I’m not seeing a red X
Like there is here:
https://jsitor.com/Wwhfm4uFP
This is from the other code:
<div class="bc-modal__body"><button class="bc-modal__close-button" aria-label="Close"></button></div>
.bc-modal__close-button {
z-index: 2;
width: 32px;
height: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
top: -13px;
background: transparent;
border: none;
}
.bc-modal__close-button::before,
.bc-modal__close-button::after {
content: "";
background-color: #d4001e;
background-color: var(--bc-modal-color, #d4001e);
width: 18px;
height: 3px;
position: absolute;
top: 0;
left: 7px;
right: 0;
bottom: 0;
margin-top: 11px;
}
.bc-modal__close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bc-modal__close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
What would this be changed to?
https://jsitor.com/BgUMIh7uk
<div class="home"><button class="home" aria-label="Close"></button></div>
.home {
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
width: 32px;
height: 30px;
background: red;
border: none;
-webkit-appearance: none;
appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.home::before {
-webkit-transform: rotate(-45deg);
transform: rotate(45deg);
}
.home::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
I see the red X now.
https://jsitor.com/OPK-PvTgi
https://jsfiddle.net/2r9qa6s3/
There’s this error when it is clicked.
Uncaught TypeError: Cannot read properties of null (reading ‘classList’) at line 38 col 15
The error comes up when clicking on the red svg.
After that, then click on the red x.
Why have you got a div around the button with the same class as the button?
Just use the button with a class of home
Trying something different.
Adding active to home got rid of the error:
Actually, the error is still there.
.home.active {
}
But then this happened.
The X moved from the top right of the screen.
https://jsfiddle.net/nm8aw40q/
How is that fixed?
No don’t do that.
You need to replace the svg home code with buttons. You need 3 buttons.
You probably should have this as well.
.home {opacity:0; pointer-events:none;}
.active .home {opacity:1; pointer-events:initial}
I just typed that in on mobile so check for typos.
I can’t do this?
<div class="home"><button class="home" aria-label="Close"></button></div>
<div class="home">
<use href="#home" />
</div>
<div class="home">
<use href="#home" />
</div>
No you can’t.
You can’t refer to an svg that’s not there!
You could probably just use the one button X for all three but it seems you want it all self contained so each button needs to be in the section to which it refers.
I can do this then?
Remove button, error gone.
https://jsfiddle.net/8bcrhz1g/4/
<div class="home"></div>
<div class="home"></div>
<div class="home"></div>
And this is not needed:
.home {opacity:0; pointer-events:none;}
.active .home {opacity:1; pointer-events:initial}
Also, is all this stuff still needed if I am not using button?
border: none;
-webkit-appearance: none;
appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Yes you can do that but ask yourself is it semantic and can users tab to it or focus it?
Html elements usually serve a purpose.
Would you use a div for a link instead of an anchor even if you made it work with JS.
A button element indicates an action.
Tab it to focus it means what?
I should use button instead?
https://jsfiddle.net/tjp4hv58/
https://jsfiddle.net/sqrnj79o/
Would this be better?
https://jsfiddle.net/gv2heq61/1/
<div class="home"><span class="x-1"></span><span class="x-2"></span></div>
.home {
position: fixed;
right: 12px;
top: 12px;
width: 30px;
height: 30px;
cursor: pointer;
background: black;
}
.home span {
background: red;
width: 30px;
height: 6px;
display: block;
position: absolute;
top: 14px;
}
.x-1 {
transform: rotate(45deg);
}
.x-2 {
transform: rotate(-45deg);
}
Than this?
<div class="home"></div>
https://jsfiddle.net/y8gpbmnz/
.home {
position: fixed;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background: black;
}
.home::before,
.home::after {
content: "";
background-color: #d4001e;
width: 40px;
height: 8px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
}
.home::before {
transform: rotate(45deg);
}
.home::after {
transform: rotate(-45deg);
}
No. It’s just as bad.