Yes you should.
Try to close it without using your mouse or a touch device.
1 Like
This is all that is needed:
<button class="home" aria-label="Close"></button>
1 Like
When you added the void code, you might have not added it to the code correctly.
https://jsfiddle.net/4m7yborc/
If itās able to be removed, and the code still works, thatās what I am thinking.
void theBody.offsetWidth;
Maybe you forgot to remove the void code when providing the suggestion.
and the void code was part of a different code that you did not post.
Which begs the question, how would it have worked in the code to begin with?
It would have worked like this:
body {
background: #353198;
/* animation: fade 2s ease 0s forwards;*/
}
.fade{
animation: fade 2s ease forwards;
}
@keyframes fade {
0% {
opacity: 0;
background:green
}
100% {
background:pink;
opacity: 1;
}
}
/* Don't need this now.
@keyframes fade2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
*/
The js would look like this:
function showHome() {
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");
});
theBody.classList.remove("fade");
void theBody.offsetWidth; //restart animation
theBody.classList.add("fade");
//theBody.classList.toggle("bodytoggle");
}
And then add a class manually to the body element by default
<body class="fade">
etc...
If you run that and see what happens you will see the fade effect when you click home. If you remove the void js then there is no fade effect. (I changed the colors just to show better what was going on.)
I believe thatās what I had in place before I changed to the two keyframe versions.and could have then removed the void js.
1 Like
I did that here:
And it works.
https://jsfiddle.net/58xydqbk/
<body class="fade">
<div class="outer">
<div class="container with-curtain">
<button class="playa thePlay" pointer-events="none">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
</button>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
<button class="home" aria-label="Close"></button>
</div>
</div>
<div class="container with-curtain">
<button class="playb thePlay">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
<button class="home" aria-label="Close"></button>
</div>
</div>
<div class="container with-curtain">
<button class="playc thePlay">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
<button class="home" aria-label="Close"></button>
</div>
</div>
</div>
</body>
Now comment out the js and you will see that it doesnāt work anymore.
// void theBody.offsetWidth; //restart animation
Thatās why I added it in the first place but then I changed to a different method instead.
2 Likes
Would you be able to provide somewhat of an example of how that would work in here?
https://jsfiddle.net/k3oejahn/
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).
I have written the code multiple different ways if that helps with figuring out how to provide an example of that.
One Way: https://jsfiddle.net/ecjhqdkw/
Second Way: https://jsfiddle.net/obgxcsjn/
Third Way: https://jsfiddle.net/k3oejahn/
I havenāt really had time to look at this properly but hereās a quick and dirty fade.
From this fiddle I changed the js to this:
function resetPage() {
document.querySelector("body").classList.add("fadingOut");
setTimeout(function() {
document.querySelector("body").classList.remove("fadingOut");
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".container.hide");
resetButtons(".outer");
}, 4000);
}
Then I added this css.
.fadingOut:before,
.fadingOut .isOpen {
animation:fadingOut 5s ;
}
@keyframes fadingOut{
0%{opacity:1;}
100%{opacity:0;}
}
Its a bit of a hack as it sets a timeout before removing the js classes in order to add a class to do a fade before it resets. The setTimeout should be shorter than the css fade duration so they donāt overlap. It would be better to check for animation end I guess but thatās beyond my payscale.
Of course you will need to refactor your js as I simply popped it in place to show the concept.
1 Like
Thank you for the example, I got it.
https://jsfiddle.net/wrutv0pf/
I think the idea here would be for the code to work without setTimeout being needed in the code.
Do you think that is something that is possible?
.fadingOut:before,
.fadingOut .isOpen {
animation: fadingOut 1s;
}
@keyframes fadingOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
function resetPage() {
document.querySelector("body").classList.add("fadingOut");
setTimeout(function() {
document.querySelector("body").classList.remove("fadingOut");
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".container.hide");
resetButtons(".outer");
}, 1000);
}
I am seeing an issue here for some reason. https://jsfiddle.net/dcramqvb/
No matter which play svg is clicked on, the blue and red background gradient is the code that fades out.
Itās not the gradient background that is seen on the screen.
How would that be fixed?
The main problem is the use of display:none to hide the elements as display:none is instant and and canāt be animated.
It may be possible to hide elements off screen instead but only after the animation has ended. That can be achieved with key frames but it also depends on the showing of the circles to be delayed until the video has faded out.
Iām sure itās possible but would take some testing to get right.
Iām on a mobile at the moment so canāt check but sounds like we should be looking for the active gradient.
Is this better: https://jsitor.com/P_nHiPuk-z
Meaning, youāre able to see better on a mobile.
body.bg1::before,
body.bg1 .play2::before,
body.bg1 .play3::before,
body.bg1 .play4::before,
body.bg1 .play5::before,
body.bg1 .play6::before,
body.bg1 .play7::before,
body.bg1 .play8::before,
body.bg1 .play9::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
Arenāt all the other backgrounds hidden except for the one that is clicked on?
Update: Removing :root and doing this fixed the issue. https://jsitor.com/CrZepyG6RM
.play1 {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
}
body.bg1 .play1::before,
<div class="container play1 with-curtain">
Yes I assumed that you were going to swap the background each time on body.bg1:before but instead you only added a background to that element for the first item. On play2 you changed the element that had the background to .play2:before and so onā¦ It would have made sense just to add them to the body:before as required or add them all to ,.playx:before (as you have now done). Also you were still adding that first background behind the other various background which is why it kept reverting to fading out the first background.
Now that you have added play1 for the first background you can reduce this rule:
body.bg1 .play1::before,
body.bg1 .play2::before,
body.bg1 .play3::before,
body.bg1 .play4::before,
body.bg1 .play5::before,
body.bg1 .play6::before,
body.bg1 .play7::before,
body.bg1 .play8::before,
body.bg1 .play9::before {
content: "";
position: fixed;
etc..
And just use this,
body.bg1 .with-curtain:before{
content: "";
position: fixed;
etc...
Wherever you see yourself adding multiple comma separated classes for the same set of rules there is always a better way.
1 Like
Thanks, this is much better: https://jsfiddle.net/7yn9ofk8/
body.bg1 .with-curtain:before{
content: "";
position: fixed;
1 Like
Does this remove the hack? https://jsfiddle.net/pw2zLskj/
https://jsitor.com/AA6gtenbbp
function resetPage() {
document.querySelector("body").classList.add("fadingOut");
document.querySelector("body").addEventListener("animationend", function() {
document.querySelector("body").classList.remove("fadingOut");
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".container.hide");
resetButtons(".outer");
});
}
What was the reason why you added: .fadingOut:before?
Is it needed?
/*.fadingOut:before,*/
.fadingOut .isOpen {
animation: fadingOut 1s;
}
The code seems to work without it:
Without timeout
https://jsfiddle.net/17q62phc/
With timeout
https://jsfiddle.net/vw0gzo19/