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 