What is the exitSkip button?
My code is based on this fiddle:
There is no exitSkip button and no need for it.
Where did exitSkip come from and what is its purpose?
Why is there a button in the middle of the video?
None of that was in the fiddle that I based my code on. All you needed was the css.
This was an idea I added afterwards.
Clicking the exitSkip button would unhide the group of 9 buttons, which in-turn would hide the exitSkip along with the play button, those two would not be seen again, after getting past that page.
For, if youâve already seen the video and want to skip to the grid of 9 videos.
You can see here how the js version of it works. https://jsfiddle.net/vmnxqbfu/
I take it there is no way to fade in the group of 9 buttons, after the exitSkip is clicked?
Because theyâve already faded in when the page first loads?
Is there some way to add a transition or animation for when the the exitSkip button is clicked, taking you to the buttons?
Is there a way for the code, how it is currently written, could it be adjusted in a way that would allow for the group of 9 buttons to be able to fade in when the exitSkip button is clicked?
Canât transition out of a display: none; state.
.playButtonContainer.initial .cover:not(.initial) {
display: none;
}
Would you know of a way that may work?
What I am trying to do is figure out some way where, when the exitSkip button is pressed, the group of 9 buttons, youâre able to see them fade in.
What would need to be able to occur for that to happen?
How do I add this: https://jsfiddle.net/ajqd3xfe/
When I give it cover, it gets all messed up.
<button class="playa " type="button" data-container="play1">
<div class=" spinner">
<div class="container">
<div class=" outer-circle"></div>
<div class="color-circle"></div>
<div class="color-circle-shadow"></div>
<div class="inner-circle"></div>
</div>
</div>
</button>
Inside here?
<div class="playButtonContainer with-curtain">
<button class="playb cover" type="button" data-container="play2">
</button>
</div>
Of course it does because you have hundreds of rules for .cover!!
You can exclude playa from those rules using the :not selector.
e.g.
.cover:not(.playa) {
-webkit-appearance: none;
appearance: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.cover:not(.playa)::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.cover:not(.playa):hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.cover:not(.playa):focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.played:not(.playa) {
border-color: green;
}
.played:not(.playa)::before {
border-left-color: green;
}
.playa{
-webkit-appearance: none;
appearance: none;
border:none;
padding:0;
margin:0;
background:transparent;
}
.spinner {
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
position: relative;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
-webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
transform-origin: 50% 55%;
transform: perspective(90px) rotateX(30deg);
animation: spinner-wiggle 5.2s infinite;
}
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid red;
transform: translateX(4px);
z-index: 1;
}
@keyframes spinner-wiggle {
30% {
transform: perspective(90px) rotateX(10deg);
}
40% {
transform: perspective(90px) rotateX(7deg);
}
50% {
transform: perspective(90px) rotateX(10deg);
}
60% {
transform: perspective(90px) rotateX(8deg);
}
}
.spinner:hover .color-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(34, 204, 0, 0.9)), color-stop(100%, #55ff00));
border-radius: 50%;
cursor: pointer;
}
.color-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
transform-origin: 50% 50%;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #25d8fb), color-stop(100%, #4f66bb));
border-radius: 50%;
z-index: 0;
}
.color-circle-shadow {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
background: transparent;
border-radius: 50%;
box-shadow: inset 0 24px 18px -10px rgba(0, 0, 140, 0.3), inset 0 0 22px -2px rgba(0, 0, 0, 0.4);
z-index: 0;
}
.inner-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #353198;
z-index: 0;
}
.container:hover .color-circle {
animation: spin 1.7s infinite linear;
}
@-webkit-keyframes spin {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
<button class="playa cover " type="button" data-container="play1">
<div class=" spinner">
<div class="container">
<div class=" outer-circle"></div>
<div class="color-circle"></div>
<div class="color-circle-shadow"></div>
<div class="inner-circle"></div>
</div>
</div>
</button>
Note that your button code is invalid as you canât have divs inside a button. Only phrasing content such as spans etc are allowed. That also seems a lot of code for such a small effect and it probably could be done with half that html.
Also you will run into issues as you have used a class of container and if you put that into your full page it will clash with the container classes you have there and most likely the JS,
I would do this then?
<div class="playButtonContainer with-curtain">
<button class="playa cover" type="button" data-container="play1"></button>
<div class="spinner">
<div class="container">
<div class=" outer-circle"></div>
<div class="color-circle"></div>
<div class="color-circle-shadow"></div>
<div class="inner-circle"></div>
</div>
</div>
<button class="playb cover" type="button" data-container="play2">
</button>
</div>
Yes try it and see 
I would do that again from the demo in this fiddle.
The exit Skip button would go here next to playa.
<div class="playButtonContainer with-curtain">
<button class="playa cover" type="button" data-container="play1"></button>
<button class="exitSkip" type="button"></button>
<button class="playb cover" type="button" data-container="play2"></button>
etc..
The css would be this:
.cover:not(.playa) {
animation: hide-cover 0s forwards;
}
@keyframes hide-cover {
to {
pointer-events: none;
opacity: 0;
position: absolute;
}
}
.playa.played {
animation: hide-cover 0s forwards;
}
.playa.played~.cover {
animation: show-cover 3s forwards;
}
@keyframes show-cover {
from {
opacity: 0;
}
to {
pointer-events: initial;
opacity: 1;
position: relative;
}
}
.exitSkip {
position: absolute;
top: calc(50% + 55px);
display: flex;
justify-content: center;
align-items: center;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid blue;
box-sizing: border-box;
clip-path: circle(50%);
}
.exitSkip::before,
.exitSkip::after {
content: "";
background-color: blue;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exitSkip::before {
transform: rotate(45deg);
}
.exitSkip::after {
transform: rotate(-45deg);
}
.playa.played ~ .exitSkip{
display:none;
}
The js would be this:
const exitSkipButton = document.querySelector(".exitSkip");
exitSkipButton.addEventListener("click", exitSkipClickHandler);
function exitSkipClickHandler() {
document.querySelector(".playa").classList.add('played');
exitSkipButton.remove();
}
Html changes only here::
<div class="playButtonContainer with-curtain">
<button class="playa cover" type="button" data-container="play1"></button>
<button class="exitSkip" type="button"></button>
<button class="playb cover" type="button" data-container="play2"></button>
<button class="playc cover" type="button" data-container="play3"></button>
<button class="playd cover" type="button" data-container="play4"></button>
<button class="playe cover" type="button" data-container="play5"></button>
<button class="playf cover" type="button" data-container="play6"></button>
<button class="playg cover" type="button" data-container="play7"></button>
<button class="playh cover" type="button" data-container="play8"></button>
<button class="playi cover" type="button" data-container="play9"></button>
</div>
Full code below for js and css:
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
const manageCover = (function makeManageCover() {
const config = {};
const body = document.body;
let currentPlayButton = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function hideButton(button) {
button.classList.add("isOpen");
}
allButtons.forEach(hideButton);
}
function resetPage() {
resetBackground("body");
resetButtons(".container");
}
function markAsPlayed(played) {
played.classList.add("played");
}
/*function showCover(playButton) {
hideAll(config.containers);
resetPage();
markAsPlayed(playButton);
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}*/
function showCover(playButton) {
hideAll(config.containers);
resetPage();
markAsPlayed(playButton);
const playButtonContainer = playButton.parentElement;
const container = document.getElementsByClassName(playButton.dataset.container)[0];
playButtonContainer.classList.add("active");
container.classList.add("active");
show(playButtonContainer);
show(container);
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
showCover(currentPlayButton);
}
}
function coverClickHandler(evt) {
currentPlayButton = evt.currentTarget;
body.classList.add("initial-fade");
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
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);
body.addEventListener("animationend", animationEndHandler);
}
return {
addCoverHandler,
init
};
}());
const manageUI = (function makeManageUI() {
const body = document.body;
const players = [];
function findPlayers() {
const allCovers = document.querySelectorAll(".cover");
const allWrappers = document.querySelectorAll(".wrap");
allCovers.forEach(function addToPlayers(cover, index) {
players.push({
"cover": cover,
"wrapper": allWrappers[index]
});
});
}
// inline arrow function, direct return
function getWrapper(cover) {
const index = players.findIndex(
(player) => player.cover === cover
);
return players[index].wrapper;
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function showBackground(background) {
background.classList.remove("bg1");
}
allBackgrounds.forEach(showBackground);
}
function resetCurtains(curtainSelector) {
const allCurtains = document.querySelectorAll(curtainSelector);
function showCurtain(curtain) {
curtain.classList.remove("active");
}
allCurtains.forEach(showCurtain);
}
function showAllButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("hide");
}
allButtons.forEach(showButton);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("isOpen");
}
allButtons.forEach(showButton);
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
console.log(animationName);
if (animationName === "fadingOut") {
fadeReset();
}
}
function fadeReset() {
body.classList.remove("fadingOut");
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".hide");
resetButtons(".container");
}
function resetPage() {
body.classList.add("fadingOut");
}
function exitClickHandler() {
resetPage();
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
const exitSkipButton = document.querySelector(".exitSkip");
exitSkipButton.addEventListener("click", exitSkipClickHandler);
function exitSkipClickHandler() {
document.querySelector(".playa").classList.add('played');
exitSkipButton.remove();
}
function init() {
findPlayers();
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
body.addEventListener("animationend", animationEndHandler);
}
return {
addExitHandlers,
getWrapper,
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
}
function onPlayerStateChange(event) {
const player = event.target;
return player;
}
function addPlayer(video, playerOptions) {
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
const player = new YT.Player(video, playerOptions);
return player;
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function show(el) {
el.classList.remove("hide");
}
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;
}
function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}
function playerAdder(wrapper, playerOptions) {
return function addPlayerCallback() {
initPlayer(wrapper, playerOptions);
};
}
function removePlayer(wrapper) {
wrapper.player.destroy();
delete wrapper.player;
console.log("removePlayer");
}
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrapper = container.querySelector(".wrap");
if (wrapper.player) {
return removePlayer(wrapper);
}
}
function initPlayer(wrapper, playerOptions) {
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
}
return {
adder: playerAdder,
removePlayerHandler
};
}());
const players = (function coverUIPlayerFacade() {
function addPlayer(coverSelector, playerOptions) {
const cover = document.querySelector(coverSelector);
const wrapper = manageUI.getWrapper(cover);
const callback = managePlayer.adder(wrapper, playerOptions);
manageCover.addCoverHandler(coverSelector, callback);
}
function init() {
manageCover.init({
container: ".container",
playButton: ".cover"
});
manageUI.init({});
manageUI.addExitHandlers(managePlayer.removePlayerHandler);
}
return {
add: addPlayer,
init
};
}());
players.init();
function onYouTubeIframeAPIReady() {
players.add(".playa", {});
players.add(".playb", {});
players.add(".playc", {});
players.add(".playd", {});
players.add(".playe", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
players.add(".playf", {});
players.add(".playg", {});
players.add(".playh", {});
players.add(".playi", {});
}
.play1 {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
}
.play2 {
--color-a: purple;
--color-b: black;
--color-c: purple;
--color-d: black;
}
.play3 {
--color-a: green;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play4 {
--color-a: orange;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play5 {
--color-a: yellow;
--color-b: black;
--color-c: yellow;
--color-d: black;
}
.play6 {
--color-a: blue;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play7 {
--color-a: red;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play8 {
--color-a: white;
--color-b: black;
--color-c: white;
--color-d: black;
}
.play9 {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
/* animation: fadeInBody1 0s ease forwards;*/
}
/*@keyframes fadeInBody1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
/*body.*/
.initial-fade {
animation: initial-fade 500ms ease forwards;
}
@keyframes initial-fade {
to {
opacity: 0;
}
}
.initial-fade,
.fadingOut {
cursor: default;
}
.initial-fade .cover,
.initial-fade .cover * {
pointer-events: none !important;
}
.container {
display: flex;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
/*body.*/
.bg1 {
animation: fadeInBody 5s ease 0s forwards;
animation-delay: 0s;
opacity: 0;
}
@keyframes fadeInBody {
100% {
opacity: 1;
}
}
/*body.*/
.bg1 .with-curtain:before {
content: "";
position: fixed;
/*z-index: 1;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
}
.playButtonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
width: 290px;
gap: 10px;
animation: fadeInButtons 3s ease 0s forwards;
}
@keyframes fadeInButtons {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadingOut .isOpen {
animation: fadingOut 1s;
animation-delay: 10.3s;
}
@keyframes fadingOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.inner-container {
display: none;
}
/* when container is active hide the cssPlay and show the inner container*/
.playButtonContainer.active {
display: none;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
.cover {
-webkit-appearance: none;
appearance: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.cover::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.cover:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.cover:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.played {
border-color: green;
}
.played::before {
border-left-color: green;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 642px;
/*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
border: 20px solid black;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background-image: 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;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
animation: fade 8s linear;
}
@keyframes fade {
0% {
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: green;
}
.fence>div:nth-child(1) {
top: 10%;
}
.fence>div:nth-child(2) {
top: 20%;
}
.fence>div:nth-child(3) {
top: 30%;
}
.fence>div:nth-child(4) {
top: 40%;
}
.fence>div:nth-child(5) {
top: 50%;
}
.fence>div:nth-child(6) {
top: 60%;
}
.fence>div:nth-child(7) {
top: 70%;
}
.fence>div:nth-child(8) {
top: 80%;
}
.fence>div:nth-child(9) {
top: 90%;
}
.fadingOut .fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
animation: fan-spin 2.5s ease 0.8s forwards;
}
@keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cross::before,
.cross::after {
content: "";
background: black;
}
.cross::before {
/*horizontal*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 100%;*/
/*height: 10px;*/
height: 2.8%;
clip-path: circle(29% at center);
}
.cross::after {
/*vertical*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/*width: 10px;*/
width: 1.5%;
/*height: 100%;*/
clip-path: circle(51% at center);
}
.fadingOut .off {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
height: 100%;
width: 100%;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation-name: tv-static, shutdown;
animation-duration: 1s, 1s;
animation-delay: 0s, 1s;
animation-fill-mode: forwards;
}
@keyframes tv-static {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
@keyframes shutdown {
68% {
width: 100%;
height: 1px;
}
99% {
width: 0px;
height: 1px;
}
100% {
width: 0px;
height: 0px;
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
user-select: none;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.panel-right::before {
left: -100%;
}
.container.active .curtain .panel-left {
animation: curtain1-open 8s forwards 520ms;
}
@keyframes curtain1-open {
to {
transform: translateX(calc(-100% - 1px));
}
}
.container.active .curtain .panel-right {
animation: curtain2-open 8s forwards 520ms;
}
@keyframes curtain2-open {
to {
transform: translateX(calc(100% + 1px));
}
}
.fadingOut .container.active .curtain .panel-left {
animation: curtain1-close 8s ease forwards;
transform: translateX(calc(-100% - 1px));
animation-delay: 3.3s;
}
@keyframes curtain1-close {
to {
transform: translateX(0);
}
}
.fadingOut .container.active .curtain .panel-right {
animation: curtain2-close 8s ease forwards;
transform: translateX(calc(100% + 1px));
animation-delay: 3.3s;
}
@keyframes curtain2-close {
to {
transform: translateX(0);
}
}
.exit {
position: absolute;
top: auto;
bottom: -47px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
background: black;
border-radius: 50%;
border: 5px solid red;
animation: fadeInExit 1s forwards;
opacity: 0;
pointer-events: none;
}
.exit::before,
.exit::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
transition: all 1s ease;
}
.exit::after {
transform: rotate(-45deg);
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.fadingOut .exit::after {
background: green;
}
.fadingOut .exit {
animation: fadeOutExit 8s forwards;
pointer-events: none;
opacity: 1;
}
@keyframes fadeOutExit {
to {
opacity: 0;
}
}
.hide {
display: none;
}
.cover:not(.playa) {
animation: hide-cover 0s forwards;
}
@keyframes hide-cover {
to {
pointer-events: none;
opacity: 0;
position: absolute;
}
}
.playa.played {
animation: hide-cover 0s forwards;
}
.playa.played~.cover {
animation: show-cover 3s forwards;
}
@keyframes show-cover {
from {
opacity: 0;
}
to {
pointer-events: initial;
opacity: 1;
position: relative;
}
}
.exitSkip {
position: absolute;
top: calc(50% + 55px);
display: flex;
justify-content: center;
align-items: center;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid blue;
box-sizing: border-box;
clip-path: circle(50%);
}
.exitSkip::before,
.exitSkip::after {
content: "";
background-color: blue;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exitSkip::before {
transform: rotate(45deg);
}
.exitSkip::after {
transform: rotate(-45deg);
}
.playa.played ~ .exitSkip{
display:none;
}
Valid code and about a tenth of the html.
<button class="playa cover spinner" type="button" data-container="play1">
<span class="color-circle"></span>
</button>
How do you prevent the red play from spinning on hover?
I assumed you wanted it to spin as that makes sense but you can stop it spinning by moving the arrow out of the animation.
Pen above updated so no spin on arrow.
How would I be able to add a fade out to the .exitSkip button?
https://jsfiddle.net/f8ueL1aw/
An example would be.
The same kind of fadeout you get when you click on this exit button.
Try this:
.playa.played~.exitSkip {
/*display: none;*/
animation:hide-cover 3s ease forwards;
opacity:1;
}
function exitSkipClickHandler() {
document.querySelector(".playa").classList.add('played');
// exitSkipButton.remove();
}
Was I supposed to notice a difference?
What was that code you gave me, what was it supposed to do?
Would I be able to do this?
.fadingOut .exitSkip
Yes the exit button fades out slowly instead of disappearing straight away.
If you want it to take longer then delay the cover fading in at the same time.
e.g. I added a 2s delay here and set opacity to zero.
.playa.played~.cover {
animation: show-cover 3s ease-in 2s forwards;
opacity:0;
}
That doesnât have any bearing on the task in hand as far as I can see.
How you you delay the exitSkip button from disappearing?
This?
display: block;
With the code I gave you.
Did you add the js as I instructed and did you comment out the display:none?.
I was doing it wrong before.
That is better.
Now I see the fadeout of the exit. https://jsfiddle.net/je02198u/
There is an issue. https://jsfiddle.net/je02198u/
To reproduce:
First click the blue X
Then click a play button
Then click the red exit button
The blue exitSkip button has returned.
It seems it was never removed fully the first time.
I tried to add a fade in to playa: https://jsfiddle.net/aostnzwf/1/
Maybe I put the code in wrong, or forgot to do something?
.playa {
animation: fadeInPlaya 3s ease-in 0s forwards;
}
@keyframes fadeInPlaya {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Then this stopped working.
@keyframes spinner-wiggle {
30% {
transform: perspective(90px) rotateX(10deg);
}
40% {
transform: perspective(90px) rotateX(7deg);
}
50% {
transform: perspective(90px) rotateX(10deg);
}
60% {
transform: perspective(90px) rotateX(8deg);
}
}
Iâm on a mobile at the moment so canât check. It probably just needs to be hidden for good when coming back to that page. Iâll look at it tomorrow some time.
That will replace the previous animation completely.
You need to use a comma separated list when you have more than one animation to run.
I.e put a comma after forwards in that rule and enter the second animation name and values.