Develop Reference

Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
#media (min-height: 30em) {
.section__content > * {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay),
transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content > * {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
box-sizing:border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y:auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start; height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one" >
<div class="page">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Two things,
Because btn-centering is not wrapped into any position: relative element, so it behaves like position: fixed, It was working for you previously because .outer didn't have overflow, overflow also affects positions
another thing is you have added overflow-y: auto to .outer so it has scroll now and body doesn't, but in jquery, you are trying to scroll the body.
I have added relative to .page element of first .section
I have added z-index: 1 to .nav because the relative element is affecting .nav
I have changed $('html,body').animate to $('.outer').animate
After doing all the above changes the page was scrolling to wrong sections, I found that Jquery will change the offset top when the page scroll is changed, So I also changed target.offset().top to target[0].offsetTop (target[0].offsetTop is supported in all browsers including IE)
html,
body {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
.relative {
position: relative;
}
#media (min-height: 30em) {
.section__content>* {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content>* {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height: 100%;
width: 100%;
box-sizing: border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
z-index: 1;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('.outer').animate({
scrollTop: target[0].offsetTop
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one">
<div class="page relative">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
</div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

How to slide door down on page load, then slide door up on button click

When the webpage loads in, the door goes down, and when the button is pressed, the door should go back up.
The fan and the background should first be seen, then the door should slide down, then clicking on the door raises it.
Is there a way for this to be improved?
code https://jsfiddle.net/jt9vpeyx/
.video-one {
top: -101%;
transition: all 10s ease-in 0s;
transition-delay: 1s;
}
.video-one.slide {
top: 0%;
}
.curtain.slide .video-one {
transition-delay: 3s;
transform: translateY(calc(-100% - 1px));
}
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
videoOne.classList.add("slide");
})
How the code works is, on page load the wall comes down, then on button click the wall goes up.
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
videoOne.classList.add("slide");
})
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"0dgNc5S8cLI",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
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: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
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: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
}
.video-one::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 41.25% 73.33%;
background-repeat: no-repeat;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 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;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.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%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 6s ease forwards;
animation-delay: 6s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
border-color: blue;
animation: fadeInPlay 2s ease-in 2s forwards;
animation-delay: 10s;
opacity: 0;
cursor: default;
pointer-events:none;
}
#keyframes fadeInPlay {
0% {
opacity: 0;
}
99.9% {
opacity: 1;
pointer-events:none;
}
100% {
opacity: 1;
cursor: pointer;
pointer-events:initial;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
border-left-color: blue;
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: -101%;
transition: all 10s ease-in 0s;
transition-delay: 1s;
}
.video-one.slide {
top: 0%;
}
.curtain.slide .video-one {
transition-delay: 3s;
transform: translateY(calc(-100% - 1px));
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

code: https://jsfiddle.net/rn5p9fb4/
What was used:
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
//curtain.classList.add("slide2");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
// videoOne.classList.add("slide");
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"0dgNc5S8cLI",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
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: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
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: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
}
.video-one::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 41.25% 73.33%;
background-repeat: no-repeat;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 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;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.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%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 6s ease forwards;
animation-delay: 6s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
border-color: blue;
animation: fadeInPlay 2s ease-in 2s forwards;
animation-delay: 10s;
opacity: 0;
cursor: default;
pointer-events: none;
}
#keyframes fadeInPlay {
0% {
opacity: 0;
}
99.9% {
opacity: 1;
pointer-events: none;
}
100% {
opacity: 1;
cursor: pointer;
pointer-events: initial;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
border-left-color: blue;
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

Transitions work perfectly if you add a frame before it start.
.video-one {
top: -101%;
}
.video-one.closed {
top: 0%;
}
let v1 = document.querySelector('.video-one')
requestAnimationFrame(() => {
// should be a frame while it's not closed for transition to work
videoOne.classList.toggle('closed', true)
})
document.querySelector(".play").onclick = () => {
// for testing: toggle both directions, you may click it many times
videoOne.classList.toggle('closed', /* false */ )
// for usage: toggle false or classList.remove
// v1.classList.toggle('closed', false)
}
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
// should be a frame while it's not closed for transition to work
videoOne.classList.toggle('closed', true)
})
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
videoOne.classList.toggle('closed', false )
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
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: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
position: absolute;
height: 100%;
width: 100%;
top: 0;
transition: all 8s ease-in 0s;
transition-delay: 1s;
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: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
x-animation: slidedown 8s forwards;
}
#keyframes slidedown {
to {
transform: translateY(calc(+100% + 1px));
}
}
.curtain.slide .video-one {
transform: translateY(calc(-100% - 1px));
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 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;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.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%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 10s ease forwards;
animation-delay: 8.5s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: #f91f6e;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
#keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: #f91f6e;
opacity: 1;
}
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: -101%;
/* for testing: fast */
transition: all 1s ease-in 0s;
transition-delay: 0.5s;
}
.video-one.closed {
top: 0%;
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

How can I make a div follow my mouse inside of a circle?

What would be the best approach to have this face always point towards my mouse? The tricky part for me has been having it skew and scale as if it's rotating around a sphere. (I turned it into a CSS animation to show what I would like it to do)
Thank you so much for your help, and I hope that you have a great day!
const head = document.querySelector('.head');
const face = document.querySelector('.face');
addEventListener('mousemove', e => {
// face follows cursor
// rotates and scales accordingly
});
*,
*::before,
*::after {
box-sizing: border-box;
}
#keyframes move {
0% {
transform: translateX(0) translateY(0px) rotate3d(0, 0, 0, 45deg) scale(1);
}
25% {
transform: translateX(150px) translateY(0px) rotate3d(0, 10, 0, 45deg) scale(0.9);
}
50% {
transform: translateX(0px) translateY(-150px) rotate3d(10, 0, 0, 45deg) scale(0.9);
}
75% {
transform: translateX(-100px) translateY(100px) rotate3d(10, 10, 0, 45deg) scale(0.9);
}
}
.head {
width: 500px;
height: 500px;
border-radius: 50%;
background-image: linear-gradient(120deg, yellow, #c47400);
box-shadow: inset -5px -5px 20px yellow;
position: relative;
}
.head::before {
content: "";
position: absolute;
left: 75px;
top: 75px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: white;
opacity: 0.35;
filter: blur(45px)
}
.eye {
width: 65px;
height: 100px;
margin: 10px;
border-radius: 100px;
display: inline-block;
background-color: #8a6b0c;
}
.mouth {
width: 175px;
height: 50px;
background-color: #8a6b0c;
border-radius: 100px;
}
.container {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.face {
display: inline-block;
animation: move 4s ease infinite;
}
<div>
<div class="head">
<div class="container">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
</div>
</div>

DIV resizes on click but goes behind another DIV [vanilla JS]

I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>

Transparent element on top of visible element

Is there a way to make a transparent element appear on top of a visible element? I want NAV2 that is transparent to be on top of the yellow square like NAV1 does despite being transparent.I need the nav to be transparent and the square that appears when you click on the button to go beneath it.
Thank you!
Here is the code:
buttons = document.querySelectorAll('button');
elements = document.querySelectorAll('.element');
buttons.forEach((button, i) => {
button.addEventListener('click', function() {
elements[i].classList.add('animate-element');
})
});
elements.forEach(element => element.addEventListener('animationend', function() {
element.classList.remove('animate-element');
}))
.nav1, .nav2 {
position: relative;
width: 100vw;
height: 20vh;
color: white;
}
.nav1 {
background: red;
}
.nav2 {
border: 2px solid black;
}
button {
margin-top: 10px;
}
.button1 {
margin-bottom: 120px;
}
.element1, .element2 {
position: absolute;
width: 100px;
height: 80px;
background: yellow;
bottom: -105%;
right: 5%;
opacity: 0;
z-index: -1;
}
.animate-element {
animation: animate 1.2s ease forwards;
}
#keyframes animate {
0% {
transform: scale(0);
opacity: 1;
}
35% {
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1) translateY(-140%);
opacity: 1;
}
}
<div class="nav1">
<div class="element1 element"></div>
NAV1
</div>
<button class="button1">Button1</button>
<div class="nav2">
NAV2
<div class="element2 element"></div>
</div>
<button class="button1">Button2</button>

Do you want to see the page Background? This is not possible. But you can use z-index: n; to move your transparent Element n layers above the others. You can't see this but it's above.