Adding a splash screen after clicking the 2nd exit button
At the code here: https://jsfiddle.net/wust7gdy/
After the curtain goes up, the exit button appears.
How do I add a splash screen after clicking the 2nd exit button?
Currently, I have a splash screen added after the 1st exit button is clicked.
I want to add another splash screen after the 2nd exit button is clicked.
How do I do that?
I don't know how to have this working in the code.
All I am doing is replicating .splash-screen2
I can't seem to figure out how to do this in the code.
.splash-screen3 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -1;
inset: 0 0 0 0;
Background-color: green;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
opacity: 1;
cursor: default;
}
.splash-screen3.hide {
z-index: 1;
opacity: 0;
transition-delay: 3s;
cursor: default;
}
html:
<div class="splash-screen3">
<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>
How the code should work:
1st exit button is clicked:
Then you see this:
That disappears and then you see the videos:
Scroll down and click 2nd exit button:
Then you should see 2nd splash screen:
That disappears and then you see the videos:
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
const splashScreen = document.querySelector('.splash-screen');
splashScreen.classList.add('hide');
const panel = document.querySelector('.panel');
panel.classList.add('slide');
const wrap = document.querySelector('.wrap');
// Add event listener to splashScreen
splashScreen.addEventListener('transitionend', function() {
// Unhide .wrap after splash-screen transition ends
wrap.classList.remove('hide');
});
panel.addEventListener('transitionend', function() {
// panel.style.display = 'none';
const closeButton = document.querySelector('.exitInitial');
//blogPager.classList.remove('hide');
closeButton.classList.add('visible');
});
}
addYoutubeScriptTagToHTML();
const myModal = document.querySelector("#myModal");
const containerA = document.querySelector('.containerA');
const containerB = document.querySelector('.containerB');
const splashScreen2 = document.querySelector('.splash-screen2');
const closeModal = document.querySelector(".exitInitial");
closeModal.addEventListener("click", modalClickHandler);
const players = [];
splashScreen2.addEventListener('transitionend', function(){
splashScreen2.style.pointerEvents = 'none';
});
/*
* EVENT HANDLERS
*/
// This function is automatically called by the YT Player API
// after downloading.
function onYouTubeIframeAPIReady() {
// Load default video
const defaultVideo = {
class: ".playInitial",
options: {
playerVars: {
loop: 1
}
}
};
const parent = document.querySelector(defaultVideo.class).parentElement;
createPlayer(parent, defaultVideo.options);
}
function modalClickHandler() {
if (players[0]) {
players[0].destroy();
// you have to remove the player from our global list now
players.shift(); // this removes first item
}
console.log("hit");
myModal.classList.remove("open");
//containerA.classList.remove('hide'); // Show containerA
containerB.classList.add('hide'); // Hide containerB
splashScreen2.classList.add('hide');
const videosToAddAfterModalClick = [{
class: ".playa",
options: {
}
},
{
class: ".playb",
options: {
videoId: "CHahce95B1g"
}
},
{
class: ".playc",
options: {
videoId: "CHahce95B1g"
}
},
{
class: ".playd",
options: {
videoId: "CHahce95B1g",
playerVars: {
start: "50"
}
}
},
{
class: ".playe",
options: {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
}
},
];
videosToAddAfterModalClick.forEach(function(video) {
const parent = document.querySelector(video.class).parentElement;
createPlayer(parent, video.options);
});
}
//const splashScreen3 = document.querySelector('.splash-screen3');
const exitButton = document.querySelector('.exit');
/*splashScreen3.addEventListener('transitionend', function() {
splashScreen3.style.pointerEvents = 'none';
});*/
exitButton.addEventListener("click", exitClickHandler);
function exitClickHandler() {
players.forEach(function(player) {
player.destroy();
});
containerA.classList.add('hide'); // Hide containerA
containerB.classList.remove('hide'); // Show containerB
//splashScreen3.classList.add('hide');
window.scrollTo(0, 0);
const videosToAddAfterExitButtonClick = [{
class: ".playf",
options: {
}
},
{
class: ".playg",
options: {
videoId: "CHahce95B1g"
}
},
{
class: ".playh",
options: {
videoId: "CHahce95B1g"
}
},
{
class: ".playi",
options: {
videoId: "CHahce95B1g",
playerVars: {
start: "50"
}
}
},
{
class: ".playj",
options: {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
}
},
];
videosToAddAfterExitButtonClick.forEach(function(video) {
const parent = document.querySelector(video.class).parentElement;
createPlayer(parent, video.options);
});
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
if (player === players[0]) {
}
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerStateChange(event) {
const eventPlayer = event.target;
if (eventPlayer !== players[0]) {
if (event.data === 1) {
players.forEach(function pauseOtherVideos(player) {
const hasIframe = player.getIframe();
const isDifferentPlayer = player !== eventPlayer;
const isPlaying = player.getPlayerState() === 1;
if (hasIframe && isDifferentPlayer && isPlaying) {
player.pauseVideo();
console.log("pause");
}
});
}
}
}
function addPlayer(video, playerOptions) {
let id = video.dataset.id;
if (id.startsWith("PL")) {
// Check if id starts with 'PL' which is common in YouTube playlist ids
playerOptions.playerVars = playerOptions.playerVars || {};
playerOptions.playerVars.listType = "playlist";
playerOptions.playerVars.list = id;
} else {
playerOptions.videoId = id;
}
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
players.push(new YT.Player(video, playerOptions));
}
function createPlayer(videoWrapper, playerOptions) {
const playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function combinePlayerOptions(opts1, opts2) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
addPlayer(video, options); // Call addPlayer here
}
function addYoutubeScriptTagToHTML() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} /*:root {
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
}*/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
.modal {
display: none;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/* Enable scroll if needed */
background-color: black;
}
.modal-content {
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;
}
.modal-content::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
pointer-events: none;
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background:
repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: transparent;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
/*body:has(.splash-screen.hide[style]) .modal-content .panel {
transition-delay: 4s;
transform: translateY(calc(-100% - 1px));
}*/
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
/*
All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
transform: translateY(calc(-100% - 1px));
}
window.onload = function() {
const splashScreen = document.querySelector('.splash-screen');
splashScreen.classList.add('hide');
splashScreen.addEventListener('transitionend', function() {
splashScreen.style.display = 'none';
});
};*/
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px;
}
.containerA {
background-color: Red;
}
.container,
.container5 {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
}
.containerB {
background-color: blue;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
/*.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.exitInitial {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
pointer-events: initial;
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exitInitial.visible {
opacity: 1;
pointer-events: auto;
}
.exitInitial::before,
.exitInitial::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitInitial::after {
transform: rotate(-45deg);
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
inset: 0 0 0 0;
background: transparent;
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none;
/*disable mouse clicking */
cursor: default;
}
.splash-screen.hide {
opacity: 0;
transition-delay: 2s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.splash-screen2 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 0;
inset: 0 0 0 0;
Background-color: black;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
opacity: 1;
/* Set transition duration to 1 seconds */
/*disable mouse clicking */
cursor: default;
}
.splash-screen2.hide {
opacity: 0;
transition-delay: 3s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.splash-screen3 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -1;
inset: 0 0 0 0;
Background-color: green;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none;
/*disable mouse clicking */
cursor: default;
}
.splash-screen3.hide {
z-index: 1;
opacity: 0;
transition-delay: 3s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
z-index: 2;
}
.container2 {
max-width: 360px;
border: 1px solid #ccc;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.blog-pager2 {
max-width: 674px;
height: 52px;
box-sizing: border-box;
border: 1px solid #0059dd;
margin: 30px auto;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.exit {
position: relative;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
}
.exit::before,
.exit::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.footer {
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 59px;
}
.footer {
margin: 0 -8px
}
.wrap.hide {
display: none;
}
.containerB.hide {
display: none;
}
.containerA.hide {
display: none;
}<div id="myModal" class="modal open">
<div class="modal-content">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="wrap hide remove">
<div class="video video-frame remove wrap" data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial remove"></div>
</div>
</div>
<!-- end modal -->
<div class="outer-container">
<div class="containerA ">
<div class="container">
<div class="ratio-keeper " >
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager2 ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
<div class="containerB hide">
<div class="container5">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="container5">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="container5">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="container5">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="container5">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj" data-id="AxLxnN6z0Og"></div>
</div><div class="blog-pager2 remove">
<a title="Exit" aria-label="Close"></a>
</div>
</div>
<div class="footer"></div>
</div>
<div class="splash-screen">
<div class="circle">
<svg class="box" width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="var(--color-a)"/>
<rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
<rect x="10" y="10" width="150" height="150" fill="var(--color-c)"/>
<rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
<rect x="20" y="20" width="130" height="130" fill="var(--color-a)"/>
<rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
<rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
<rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
<rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
<rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
<rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
<rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
<rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
<rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
<rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
<rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
<rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
</svg>
</div>
</div>
<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>
<!--<div class="splash-screen3">
<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>-->Solution
The easiest way to achieve this with they way your code works is to do the following:
First, add hide class to splash-screen3, like:
<div class="splash-screen3 hide">
Then you need to remove pointer-events: none; from .splash-screen3 CSS:
...
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none; /* REMOVE THIS */
/*disable mouse clicking */
cursor: default;
}
...
Then add this splash-screen3 selector:
...
const splashScreen2 = document.querySelector('.splash-screen2');
const splashScreen3 = document.querySelector('.splash-screen3'); // ADD THIS
Then add this event listener on splash-screen3 to remove pointer events when the transition has ended:
...
splashScreen3.addEventListener('transitionend', function(){
splashScreen3.style.pointerEvents = 'none';
});
...
Finally, add these lines at the end of exitClickHandler:
...
function exitClickHandler() {
...
splashScreen3.style.pointerEvents = 'auto';
splashScreen3.classList.remove('hide');
splashScreen3.offsetWidth = splashScreen3.offsetWidth;
splashScreen3.classList.add('hide');
}
...
The first line is to reenable the pointer-events CSS, then we remove the hide class to show the splashScreen3 again, then we set the offsetWidth as a dummy so that a reflow is triggered, then finally we add hide class again to the splashScreen3 to hide it again.
- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?