I have three separate files: st1.html , st2.js, st3.css:
(They are from this youtube video: https://www.youtube.com/watch?v=4HonA-hFFs0&feature=em-comments)
An amazing css animation, but the given code is not working:
st1.html:
<!DOCTYPE html>
<html>
<head>
<title>Stars</title>
<link href="st3.css" rel="stylesheet" />
</head>
<body>
<main class="scene left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<form>
<button id="hyper" type="button">Go Hyper</button>
<div class="range">
<label for="range">Go Hyper</label>
<input type="text" id="hyper-range" min="0" max="2" step=".2" value="0" name="">
</div>
</form>
<script src="st2.js"></script>
</body>
</html>
st2.js:
const stars = document.querySelectorAll('div');
const hyper = document.getElementById('hyper');
const hyperScale = document.getElementById('hyper-range');
stars.forEach((star,i) => {
let x = `${Math.random() * 200}vmax`
let y = `${Math.random() * 200}vh`
let z = `${Math.random() * 200 - 100}vmin`
let rx = `${Math.random() * 360}deg`
star.style.setProperty('--x', x)
star.style.setProperty('--y', y)
star.style.setProperty('--z', z)
star.style.setProperty('--rx', rx)
});
hyper && hyper.addEventListener('click', e =>{
if(document.documentElement.classList.contains('hyper')){
stars.forEach((star,i) => {
star.style.animationName = null;
});
hyper.textContent = 'Go Hyper';
} else{
stars.forEach((star, i) => {
let delay = `${Math.random() * 900}ms`;
star.style.animationName = 'hyper';
star.style.animationDelay = delay;
});
hyper.textContent = 'stop hyper';
}
document.documentElement.classList.toggle('hyper');
});
if(document.getAnimations){
stars.forEach((star,i) => {
let delay = `${Math.random() * 900}ms`;
star.style.animationDelay = delay;
star.style.animationName = 'hyper';
});
const animations = document.getAnimations();
animations.forEach(a => a.updatePlaybackRate(0));
if(animations.length && animations[0].updatePlaybackRate){
document.documentElement.classList.add('css-animations')
hyperScale.addEventListener('input', e => {
const value = parseFloat(e.currentTarget.value);
animations.forEach(a => a.updatePlaybackRate(value));
})
}else{
stars.forEach((star,i) => {
star.style.animationName = null;
});
}
}
st3.js:
.scene{
height: 100vh;
width: 100%;
overflow: hidden;
perspective: 10vmin;
}
.scene div{
--unit : 1.5vmin;
width: var(--unit);
height: var(--unit);
--rotate: rotateY(90deg);
transform: translateZ(-100vmin)
var(--rotate)
rotateX(var(--rx))
translateZ(var(--x))
scaleX(1);
position: absolute;
top: 0%;
left: 0%;
}
@keyframes hyper{
0% {
opacity: 1;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
transform:
translateZ(0vmin)
var(--rotate)
rotateX(var(--rx))
translateZ(var(--x))
scaleX(6);
}
}
body{
overflow: hidden;
background: black;
background-image:
radial-gradient(circle at 40% 40%, hsl(343, 80%, 7%) 0%, hsla(343, 80%, 10%, 0) 40%),
radial-gradient(circle at 25% 52%, hsl(243, 80%, 9%) 0%, hsla(243, 80%, 10%, 0) 50%),
radial-gradient(circle at 65% 56%, hsl(143, 80%, 8%) 0%, hsla(143, 80%, 10%, 0) 60%);
background-blend-mode: screen;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
form{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: .5rem;
}
button{
margin: auto;
background: transparent;
border: .25rem solid currentColor;
border-radius: 1rem;
color: hsl(173, 100%, 50%);
font-size: 1.2em;
padding: .7em 1.5rem;
}
.hyper button{
color:hsl(343, 100%, 50%);
}
.range {
display: none;
}
.css-animations .range{
margin: auto;
display: flex;
flex-direction: column;
font-family: system-ui, sans-serif;
background: hsl(173, 100%, 50%);
color: black;
font-size: 1.2em;
padding: .7em 1.5rem;
border-radius: 1rem;
}
How should I change the code to see the animation which is in the video?