Develop Reference

Why add and remove function is not working at the same time in a function in JavaScript?

I have started learning JS recently and am stuck here. I have created a dice game where images change themselves randomly when a button is clicked.
The images just get changed from one to another. I want to give a rolling effect to them. So, I have added animation for them that they change angles in both X-axis and Y-axis. It works on the first click but later doesn't.
So I had added classList.add() to give the animation and classList.remove() to remove but the remove function doesn't work.
This is HTML code:
function roll() {
document.querySelectorAll("img")[0].classList.add("rollEffect");
document.querySelectorAll("img")[1].classList.add("rollEffect");
var randomNumber1 = Math.floor(Math.random() * 6 + 1);
var randomNumber2 = Math.floor(Math.random() * 6 + 1);
var randomImage1 = "dice" + randomNumber1 + ".png";
var randomImage2 = "dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
document.querySelectorAll("img")[1].setAttribute("src", randomImage2);
if (randomNumber1 > randomNumber2)
document.querySelector("h1").innerHTML = "Player1 wins!!!";
else
if (randomNumber2 > randomNumber1)
document.querySelector("h1").innerHTML = "Player2 wins!!!";
else
document.querySelector("h1").innerHTML = "DRAW!!!";
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}
.btn {
background-color: #8843F2;
border: 0;
border-radius: 20px;
color: #ffffff;
font-family: 'Indie Flower', cursive;
margin: 0 50px;
padding: 1% 2%;
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
#keyframes rollClick {
9% {
transform: rotateX(30deg) rotateY(30deg)
}
18% {
transform: rotateX(60deg) rotateY(60deg)
}
28% {
transform: rotateX(90deg) rotateY(90deg)
}
37% {
transform: rotateX(120deg) rotateY(120deg)
}
46% {
transform: rotateX(150deg) rotateY(150deg)
}
55% {
transform: rotateX(180deg) rotateY(180deg)
}
65% {
transform: rotateX(210deg) rotateY(210deg)
}
76% {
transform: rotateX(240deg) rotateY(240deg)
}
85% {
transform: rotateX(270deg) rotateY(270deg)
}
90% {
transform: rotateX(300deg) rotateY(300deg)
}
95% {
transform: rotateX(330deg) rotateY(330deg)
}
100% {
transform: rotateX(360deg) rotateY(360deg)
}
}
.rollEffect {
animation-name: rollClick;
animation-duration: 0.1s;
}
body {
background-color: #F9D371;
}
img {
width: 80%;
}
<div class="container">
<h1>Roll us</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="dice6.png">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="dice6.png">
</div>
<button class="btn" onclick="roll()">Roll</button>
</div>

The javascript code that adds the rolling animation class runs separate from any animation durations.
It will run as quickly as the performance of the device allows.
In your js code it will:
add the .rollEffect class to both images.
set a new image url.
set text with the result of the game
remove the .rollEffect class from both images.
This all happens as fast as possible, we're talking micro/nano seconds.
So the animation does get applied, each time, and gets removed each time. so fast you can't even see the animation.
You have to wait a bit before removing the animation class. so the animation has time to run before it's removed.
This can be achived with setTimeout
For example:
setTimeout(() => {
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}, 100); // <--- 100 here will execute the code in the callback after 100ms, the same as the animation time.
function roll() {
document.querySelectorAll("img")[0].classList.add("rollEffect");
document.querySelectorAll("img")[1].classList.add("rollEffect");
var randomNumber1 = Math.floor(Math.random() * 6 + 1);
var randomNumber2 = Math.floor(Math.random() * 6 + 1);
var randomImage1 = `http://placekitten.com/g/${50*randomNumber1}/300`;
var randomImage2 = `http://placekitten.com/g/200/${50*randomNumber2}`;
document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
document.querySelectorAll("img")[1].setAttribute("src", randomImage2);
if (randomNumber1 > randomNumber2)
document.querySelector("h1").innerHTML = "Player1 wins!!!";
else
if (randomNumber2 > randomNumber1)
document.querySelector("h1").innerHTML = "Player2 wins!!!";
else
document.querySelector("h1").innerHTML = "DRAW!!!";
setTimeout(() => {
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}, 100);
}
.btn {
background-color: #8843F2;
border: 0;
border-radius: 20px;
color: #ffffff;
font-family: 'Indie Flower', cursive;
margin: 0 50px;
padding: 1% 2%;
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
#keyframes rollClick {
9% {
transform: rotateX(30deg) rotateY(30deg)
}
18% {
transform: rotateX(60deg) rotateY(60deg)
}
28% {
transform: rotateX(90deg) rotateY(90deg)
}
37% {
transform: rotateX(120deg) rotateY(120deg)
}
46% {
transform: rotateX(150deg) rotateY(150deg)
}
55% {
transform: rotateX(180deg) rotateY(180deg)
}
65% {
transform: rotateX(210deg) rotateY(210deg)
}
76% {
transform: rotateX(240deg) rotateY(240deg)
}
85% {
transform: rotateX(270deg) rotateY(270deg)
}
90% {
transform: rotateX(300deg) rotateY(300deg)
}
95% {
transform: rotateX(330deg) rotateY(330deg)
}
100% {
transform: rotateX(360deg) rotateY(360deg)
}
}
.rollEffect {
animation-name: rollClick;
animation-duration: 0.1s;
}
body {
background-color: #F9D371;
}
img {
width: 150px;
height: 150px;
}
<div class="container">
<h1>Roll us</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="http://placekitten.com/g/200/300">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="http://placekitten.com/g/300/200">
</div>
<button class="btn" onclick="roll()">Roll</button>
</div>

How to update my die animation so that it starts from where it ended after each random roll?

I made a die-rolling animation based on switch statement. The die rotates from a start position (you see the front side - red, num 1) and ends up on a random side with the appropriate number on it from the animation.
I would like to make this animation more fluid upon re-rolls. The animation currently starts over suddenly from the original orientation on re-rolls, but I want it to start from the position it ended on its last roll
I tried to use CSS reverse to this animation just after click before next random number generation, but it didn't work.
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards reverse";
(the code is abbreviated on purpose):
var a = 1;
var cube = document.getElementById("cube");
var num = document.getElementsByClassName("num");
var kindaSpin;
var b; var c; var d; var randomNum; var randomNumStr;
function spin(){
/*RANDOM NUMBER*/
randomNum = Math.floor(Math.random() * 6) + 1;
randomNumStr = randomNum.toString();
for(i = 0; i < num.length; i++)
{num[i].style.animation = "";}
/*SWITCH*/
switch(randomNum) {
case 1:
kindaSpin = 'one';
a = "1";
break;
case 2:
kindaSpin = 'two';
a = "2";
break;
case 3:
kindaSpin = 'three';
a = "3";
break;
case 4:
kindaSpin = 'four';
a = "4";
break;
case 5:
kindaSpin = 'five';
a = "5";
break;
case 6:
kindaSpin = 'six';
a = "6";
break;
}
/*MOVE*/
cube.style.animationDirection = "normal";
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards";
/*NUMBER*/
setTimeout(() => { document.getElementById("num" + a).style.animation = "fadeIn 2s linear forwards";
; }, 2000); }
#import url('https://fonts.googleapis.com/css2?family=Cairo:wght#800&family=Indie+Flower&family=Teko:wght#500;600;700&display=swap');
:root {
--size: 50px;
--half-size: 25px;
--minus-half-size: -25px;
}
* {
box-sizing: border-box;
}
.content {
width: var(--size);
height: var(--size);
margin: 50px auto;
perspective: 1000px;
}
.cube {
position: relative;
transform-style:preserve-3d;
width: var(--size);
height: var(--size);
transform: rotateX(-20deg) rotateY(20deg);
}
/*CUBE SIDES*/
.face {
display: block;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--size);
width: var(--size);
color: aliceblue;
font-family: 'Teko', sans-serif;
}
.one{
background-color: rgba(255, 0, 0, 0.356);
transform: translateZ(var(--half-size)); /*front*/
}
.two {
background-color: rgba(0, 128, 0, 0.349);
transform: translateY(var(--minus-half-size)) rotateX(-270deg) ; /*top*/
}
.three {
background-color: rgba(0, 0, 255, 0.315);
transform: translateX(var(--half-size)) rotateY(90deg); /*right*/
}
.four {
background-color: rgba(255, 255, 0, 0.384);
transform: translateX(var(--minus-half-size)) rotateY(-90deg); /*left*/
}
.five {
background-color: rgba(128, 0, 128, 0.342);
transform: translateY(var(--half-size)) rotateX(270deg); /*bottom*/
}
.six {
background-color: rgba(255, 140, 0, 0.37);
transform: translateZ(var(--minus-half-size)) rotateY(180deg); /*back*/
}
/*NUMBER*/
.num {
position:absolute;
display: block;
opacity: 0%;
}
/*ANIMATION OF ROTATION*/
#keyframes one {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
}
#keyframes two {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
}
#keyframes three {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
}
#keyframes four {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(820deg);}
}
#keyframes five {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
}
#keyframes six {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
}
#keyframes fadeIn {
0%{opacity: 0%;}
100%{opacity: 100%;}
}
<div class="content" onclick="spin()">
<div class="cube" id="cube">
<div class="face one">
<div class="num" id="num1">1</div>
</div>
<div class="face two">
<div class="num" id="num2">2</div>
</div>
<div class="face three">
<div class="num" id="num3">3</div>
</div>
<div class="face four">
<div class="num" id="num4">4</div>
</div>
<div class="face five">
<div class="num" id="num5">5</div>
</div>
<div class="face six">
<div class="num" id="num6">6</div>
</div>
</div>
</div>
Here is how the die looks in the final version with gifs: https://cumclavi.cz/cube/ ...it takes some time to load.

I checked my problem once again... and found a little bit longer but valid solution.
I made #keyframes of every spin in reverse order and call it at begining of roll:
cube.style.animation = `${kindaSpin}-back 2500ms ease-in forwards`;
for
#keyframes one-back
...it also became advantege, because I will be able to create each animation different and make more fluent roll.
anyway. If there will be someone who can explain, why cube.style.animation = `${kindaSpin} 2500ms ease-in reverse forwards`; didnt work? Please write me in comments!
var a = 1;
var cube = document.getElementById("cube");
var num = document.getElementsByClassName("num");
var kindaSpin = "one";
var b; var c; var d; var randomNum; var randomNumStr;
function spin(){
cube.style.animation = kindaSpin + `-back 2500ms ease-in forwards`;
/*RANDOM NUMBER*/
setTimeout(() => {
randomNum = Math.floor(Math.random() * 6) + 1;
randomNumStr = randomNum.toString();
for(i = 0; i < num.length; i++)
{num[i].style.animation = "";}
/*SWITCH*/
switch(randomNum) {
case 1:
kindaSpin = 'one';
a = "1";
break;
case 2:
kindaSpin = 'two';
a = "2";
break;
case 3:
kindaSpin = 'three';
a = "3";
break;
case 4:
kindaSpin = 'four';
a = "4";
break;
case 5:
kindaSpin = 'five';
a = "5";
break;
case 6:
kindaSpin = 'six';
a = "6";
break;
}
/*MOVE*/
cube.style.animationDirection = "normal";
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards";},2500)
/*NUMBER*/
setTimeout(() => {
document.getElementById("num" + a).style.animation = "fadeIn 2s linear forwards";}, 5000);
}
#import url('https://fonts.googleapis.com/css2?family=Cairo:wght#800&family=Indie+Flower&family=Teko:wght#500;600;700&display=swap');
:root {
--size: 50px;
--half-size: 25px;
--minus-half-size: -25px;
}
* {
box-sizing: border-box;
}
.content {
width: var(--size);
height: var(--size);
margin: 50px auto;
perspective: 1000px;
}
.cube {
position: relative;
transform-style:preserve-3d;
width: var(--size);
height: var(--size);
transform: rotateX(-20deg) rotateY(20deg);
}
/*CUBE SIDES*/
.face {
display: block;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--size);
width: var(--size);
color: aliceblue;
font-family: 'Teko', sans-serif;
}
.one{
background-color: rgba(255, 0, 0, 0.356);
transform: translateZ(var(--half-size)); /*front*/
}
.two {
background-color: rgba(0, 128, 0, 0.349);
transform: translateY(var(--minus-half-size)) rotateX(-270deg) ; /*top*/
}
.three {
background-color: rgba(0, 0, 255, 0.315);
transform: translateX(var(--half-size)) rotateY(90deg); /*right*/
}
.four {
background-color: rgba(255, 255, 0, 0.384);
transform: translateX(var(--minus-half-size)) rotateY(-90deg); /*left*/
}
.five {
background-color: rgba(128, 0, 128, 0.342);
transform: translateY(var(--half-size)) rotateX(270deg); /*bottom*/
}
.six {
background-color: rgba(255, 140, 0, 0.37);
transform: translateZ(var(--minus-half-size)) rotateY(180deg); /*back*/
}
/*NUMBER*/
.num {
position:absolute;
display: block;
opacity: 0%;
}
/*ANIMATION OF ROTATION*/
#keyframes one {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
}
#keyframes one-back {
0% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes two {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
}
#keyframes two-back {
0% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes three {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
}
#keyframes three-back {
0% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes four {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(820deg);}
}
#keyframes four-back {
0% {transform: rotateX(700deg) rotateY(820deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes five {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
}
#keyframes five-back {
0% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes six {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
}
#keyframes six-back {
0% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes fadeIn {
0%{opacity: 0%;}
100%{opacity: 100%;}
}
<div class="content" onclick="spin()">
<div class="cube" id="cube">
<div class="face one">
<div class="num" id="num1">1</div>
</div>
<div class="face two">
<div class="num" id="num2">2</div>
</div>
<div class="face three">
<div class="num" id="num3">3</div>
</div>
<div class="face four">
<div class="num" id="num4">4</div>
</div>
<div class="face five">
<div class="num" id="num5">5</div>
</div>
<div class="face six">
<div class="num" id="num6">6</div>
</div>
</div>
</div>

Add Animated Line in Mesh Animation

How could I add animated lines in this sample mesh animation?
HAML / HTML
%div.wrap
-300.times do
%div.c
CSS/SCSS
// best in chrome
$total: 300; // total particles
$orb-size: 100px;
$particle-size: 2px;
$time: 14s;
$base-hue: 0; // change for diff colors (180 is nice)
html, body {
height: 100%;
}
body {
background: black;
overflow: hidden; // no scrollbars..
}
.wrap {
position: relative;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform-style: preserve-3d;
perspective: 1000px;
animation: rotate $time infinite linear; // rotate orb
}
#keyframes rotate {
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
.c {
position: absolute;
width: $particle-size;
height: $particle-size;
border-radius: 50%;
opacity: 0;
}
#for $i from 1 through $total {
$z: (random(360) * 1deg); // random angle to rotateZ
$y: (random(360) * 1deg); // random to rotateX
$hue: ((40/$total * $i) + $base-hue); // set hue
.c:nth-child(#{$i}){ // grab the nth particle
animation: orbit#{$i} $time infinite;
animation-delay: ($i * .01s);
background-color: hsla($hue, 100%, 50%, 1);
}
#keyframes orbit#{$i}{
20% {
opacity: 1; // fade in
}
30% {
transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb
}
80% {
transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80
opacity: 1; // hold opacity 20-80
}
100% {
transform: rotateZ(-$z) rotateY($y) translateX( ($orb-size * 3) ) rotateZ($z); // translateX * 3
}
}
}
https://codepen.io/natewiley/pen/GgONKy
Desired animation:

Non clickable button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
i've been trying to figure this out by myself the entire night and i just can't make my button clickable... i would keep trying but i'm tired and i need to go to sleep really bad.
the code is mostly pasted.
i'm really bad at this kind of stuff
don't judge the the bad code...
but i need this button really bad so i can redirect to my welcome page.
the button code itself works, the problems is its conficting with the other stuff and makes it non clickable.
so... here's the full index page of my site with the button that doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: center;
</style>
</head>
<body>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 0 auto;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<br><br><br><br><br><br><br><br>
<div class="a">
<button onclick= "location.href='welcome'"
button class="button button2">❤
</button>
</div>
<html>
<div class="container">
<div class="text"></div>
</div>
<font face="Sarpanch" color="white" size"10" class="message">
</font>
<font face="Play">
</font>
<font face="Play" class="cn">
</font>
<div class="clouds">
</div>
<iframe width="1" height="1" src="https://www.youtube.com/embed/F2CXCbz3_Nc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
-webkit-#keyframes we-are {
from {scale: 1.1;}
to {scale: 0;}
}
#keyframes we-are {
from {scale: 1.1;}
to {scale: 0;}
}
-webkit-#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-webkit-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-moz-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-ms-keyframes move-clouds-back {
from {background-position: 0;}
to {background-position:10000px 0;}
}
.container {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
}
.text {
font-weight: 100;
font-size: 28px;
color: #FAFAFA;
font-family: Iceland;
text-shadow: 0 0 0.5em cyan, 0 0 0.5em cyan;
}
.dud {
color: #757575;
}
.animation-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.animation-container span {
color: whitesmoke;
display: block;
font-size: 18px;
font-family: 'Helvetica';
text-shadow: 0 0 1px white;
position: absolute;
user-select: none;
pointer-events: none;
cursor: default;
z-index: 1;
opacity: 0;
will-change: transform, opacity;
animation-timing-function: ease-out;
animation-name: move;
}
#keyframes move {
0% {
opacity: 0;
transform: translateY(100vh);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
transform: none;
}
}
.buzz_wrapper{
position:relative;
width:100%;
margin:180px auto;
background-attachment: fixed;
background-position: 0 0;
background-repeat: no-repeat ;
background-size:cover;
overflow : hidden;
overflow:hidden;
padding:100px;
}
.scanline{
width:100%;
display:block;
background:#000;
height:4px;
position:relative;
z-index:3;
margin-bottom:5px;
opacity:0.1;
}
.buzz_wrapper span{
position:absolute;
-webkit-filter: blur(1px);
font-size:30px;
font-family:'Courier new', fixed;
font-weight:bold;
}
.buzz_wrapper span:nth-child(1){
color:red;
margin-left:-2px;
-webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(2){
color:green;
margin-left:2px;
-webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(3){
color:blue;
position:20px 0;
-webkit-filter: blur(1px);
}
.buzz_wrapper span:nth-child(4){
color:#fff;
-webkit-filter: blur(1px);
text-shadow:0 0 50px rgba(255,255,255,0.4);
}
.buzz_wrapper span:nth-child(5){
color:rgba(255,255,255,0.4);
-webkit-filter: blur(15px);
}
.buzz_wrapper span{
-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}
#-webkit-keyframes blur {
0% { -webkit-filter: blur(1px); opacity:0.8;}
50% { -webkit-filter: blur(1px); opacity:1; }
100%{ -webkit-filter: blur(1px); opacity:0.8; }
}
#-webkit-keyframes jerk {
50% { left:1px; }
51% { left:0; }
}
#-webkit-keyframes jerkup {
50% { top:1px; }
51% { top:0; }
}
.buzz_wrapper span:nth-child(3){
-webkit-animation: jerkblue 1s infinite;
}
#-webkit-keyframes jerkblue {
0% { left:0; }
30% { left:0; }
31% { left:10px; }
32% { left:0; }
98% { left:0; }
100% { left:10px; }
}
.buzz_wrapper span:nth-child(2){
-webkit-animation: jerkgreen 1s infinite;
}
#-webkit-keyframes jerkgreen {
0% { left:0; }
30% { left:0; }
31% { left:-10px; }
32% { left:0; }
98% { left:0; }
100% { left:-10px; }
}
.buzz_wrapper .text{
-webkit-animation: jerkwhole 5s infinite;
position:relative;
}
#-webkit-keyframes jerkwhole {
30% { }
40% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(50deg,0);}
42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(-80deg,0);}
43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
65% { }
}
</style>
</head>
</html>
<script language="JavaScript">
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!##$%^&*()_-=+{}:"|<>?,./;'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
const phrases = [
'Click no botão para ir pro nosso site',
'❤',
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 1500)
})
counter = (counter + 1) % phrases.length
}
next()
'use strict';
var app = {
chars: ['lixo','ta de hack','NAO PODE CAPS','PODE NADA NESSE SERVER','esse 1Fawkes ta xitado','TEM ADM?','TEM GENTE JOGANDO GRANADA','panela','server lixo','o que e bipe','ta enxergando muito'],
init: function () {
app.container = document.createElement('div');
app.container.className = 'animation-container';
document.body.appendChild(app.container);
window.setInterval(app.add, 100);
},
add: function () {
var element = document.createElement('span');
app.container.appendChild(element);
app.animate(element);
},
animate: function (element) {
var character = app.chars[Math.floor(Math.random() * app.chars.length)];
var duration = Math.floor(Math.random() * 15) + 1;
var offset = Math.floor(Math.random() * (50 - duration * 2)) + 3;
var size = 10 + (15 - duration);
element.style.cssText = 'right:'+offset+'vw; font-size:'+size+'px;animation-duration:'+duration+'s';
element.innerHTML = character;
window.setTimeout(app.remove, duration * 1000, element);
},
remove: function (element) {
element.parentNode.removeChild(element);
},
};
document.addEventListener('DOMContentLoaded', app.init);
</script>
https://github.com/wizzz3/website/blob/master/site
the site: https://bf4gatserver.com/

If you are talking about the green button with the white heart then it's a small fix.
When you try to click the button you actually clicking the fixed div that contains all the floating text, because the element is in position: fixed; z-index: 1.
The element that holds the button <div class="a">, add to it the following css position: relative; z-index: 2; and your done!
Hope this is what you needed =]

Add pointer-events: none; to the .animation-container.
Final code:
.animation-container {
pointer-events: none;
}
Why it works? Because all the clicks happened on .animation-container that has position fixed and some other styling which make it be across the entire page.

How to translate element to act like a odometer

I've got code:
<div class="wrap2" id="wrap" data-num="0">
<span>0</span><span>1</span>...
CSS:
.wrap2[data-num="0"] {
transfom:translate(0, 0);
}
.wrap2[data-num="1"] {
transform:translate(0, -30px);
}
https://jsfiddle.net/9t4zsuov/2/
But i want to act like a odometer - numbers have to roll only to top, not bottom. Any ideas, how to do that ?

As #codyThompsonDev said, a rollover area is the best way to implement this. Something I think he missed though, is what happens when you go from a rollover number to a non-rollover number.
For example, let's say that the odometer randomly tries to roll to 4, then 3, then 1. The first time, it can roll to 4 no problem. The second time, it has to roll to "13", in the rollover zone. But then, it tries to roll to "11" which is also in the rollover zone, causing it to roll backwards.
To achieve this effect under those circumstances, you must snap the dial back out of the rollover zone, then roll forward again. I would implement this using window.requestAnimationFrame().
I've made a fiddle to demonstrate this: https://jsfiddle.net/tprobinson/8k125fmz/67/
Add the debugBackground class to dupa2 to see the rollover effect visually.
I would recommend generating the CSS classes with a preprocessor like Sass, as writing them by hand can be error prone as well.
document.getElementById("rand").addEventListener("click", randomize);
const debug = document.getElementById("debug");
const dupa = document.getElementById("cipa");
let animationInProgress = null
function setDebug(num) {
debug.textContent = 'Number is really: ' + num
}
function animateOdometer(newNum) {
// Add the smooth class and set the number to let it roll.
dupa.classList.add('smooth')
setDebug(newNum)
dupa.dataset.num = newNum
// In 1000 ms, remove the smooth class
animationInProgress = window.setTimeout(() => {
dupa.classList.remove('smooth')
animationInProgress = null
}, 1000)
}
function randomize() {
let oldNum = Number.parseInt(dupa.dataset.num)
if (oldNum === undefined || oldNum === null) {
oldNum = 0
}
let newNum = Math.floor(Math.random() * 9) + 0;
// If an animation is already in progress, cancel it
if (animationInProgress) {
window.clearTimeout(animationInProgress)
dupa.classList.remove('smooth')
animationInProgress = null
}
// If the new number is before our old number
// we have to force a roll forwards
if (newNum < oldNum) {
newNum += 10
}
if (oldNum > 9) {
// The dial was already rolled over. We need to
// snap the dial back before rolling again.
// Wait for a frame so we can snap the dial back
dupa.dataset.num = oldNum - 10
setDebug(oldNum - 10)
dupa.classList.remove('smooth')
window.requestAnimationFrame(() => {
// Wait for one frame to let the snapback happen
window.requestAnimationFrame(() => {
// Then roll forward
animateOdometer(newNum)
})
})
return
}
// Roll the dial
animateOdometer(newNum)
}
#rand,
#debug {
margin-top: 50px;
}
.dupa1 {
height: 30px;
width: 30px;
border: 1px solid #000;
overflow: hidden;
}
.dupa2.smooth {
transition: all 1s ease;
}
.dupa2 span {
height: 30px;
width: 30px;
display: block;
text-align: center;
line-height: 30px;
}
.dupa2.debugBackground {
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #207cca 51%, #207cca 100%);
}
.dupa2[data-num="0"] {
transform: translate(0, 0);
}
.dupa2[data-num="1"] {
transform: translate(0, -30px);
}
.dupa2[data-num="2"] {
transform: translate(0, -60px);
}
.dupa2[data-num="3"] {
transform: translate(0, -90px);
}
.dupa2[data-num="4"] {
transform: translate(0, -120px);
}
.dupa2[data-num="5"] {
transform: translate(0, -150px);
}
.dupa2[data-num="6"] {
transform: translate(0, -180px);
}
.dupa2[data-num="7"] {
transform: translate(0, -210px);
}
.dupa2[data-num="8"] {
transform: translate(0, -240px);
}
.dupa2[data-num="9"] {
transform: translate(0, -270px);
}
.dupa2[data-num="10"] {
transform: translate(0, -300px);
}
.dupa2[data-num="11"] {
transform: translate(0, -330px);
}
.dupa2[data-num="12"] {
transform: translate(0, -360px);
}
.dupa2[data-num="13"] {
transform: translate(0, -390px);
}
.dupa2[data-num="14"] {
transform: translate(0, -420px);
}
.dupa2[data-num="15"] {
transform: translate(0, -450px);
}
.dupa2[data-num="16"] {
transform: translate(0, -480px);
}
.dupa2[data-num="17"] {
transform: translate(0, -510px);
}
.dupa2[data-num="18"] {
transform: translate(0, -540px);
}
.dupa2[data-num="19"] {
transform: translate(0, -570px);
}
<div class="dupa1">
<div class="dupa2" id="cipa" data-num="0">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div id="debug">
Number is really: 0
</div>
<button id="rand">rand</button>

You can use two sets of numbers and a little bit of extra javascript to achieve this effect.
If the new number is less than the current number, use a second set of numbers (digits 0-9) that are farther down. As the css animation transitions from the first set of numbers to the second, it will appear as if the odometer is "rolling over".
When the animation completes, switch back to the first set of numbers without animating (no transition class).
I've made a working example based off of your original jsfiddle.
NOTE: This makes use of the .classList property of DOM elements, and the tranistionend event. You may have to add vendor prefixes (i.e. webkitTransitionEnd) and implement your own version of .classList, depending on what browsers you need to support.
document.getElementById("rand").addEventListener("click", randomize);
document.getElementById("cipa").addEventListener("transitionend", transitionEnd);
function randomize() {
setNumber(Math.floor(Math.random() * 9));
}
function setNumber(newNumber) {
let dupa = document.getElementById("cipa");
// assumes dupa.dataset.num always be a valid int
let selected = parseInt(dupa.dataset.num);
if (newNumber === selected) return; // if same as existing, don't do anything
// if the new number is less than the old number
// use the second set of numbers to avoid moving "backwards"
if (newNumber < selected) dupa.classList.add("rolledover");
// animate to the new position
dupa.classList.add("transitioning");
dupa.dataset.num = "" + newNumber;
}
function transitionEnd() {
let dupa = document.getElementById("cipa");
// don't animate
dupa.classList.remove("transitioning");
dupa.classList.remove("rolledover");
}
#rand {
margin-top: 50px;
}
.dupa1 {
height: 30px;
width: 30px;
border: 1px solid #000;
overflow: hidden;
}
.dupa2.transitioning {
transition: all 1s ease;
}
.dupa2 span {
height: 30px;
width: 30px;
display: block;
text-align: center;
line-height: 30px;
}
.dupa2[data-num="0"] {
transform: translate(0, 0);
}
.dupa2[data-num="1"] {
transform: translate(0, -30px);
}
.dupa2[data-num="2"] {
transform: translate(0, -60px);
}
.dupa2[data-num="3"] {
transform: translate(0, -90px);
}
.dupa2[data-num="4"] {
transform: translate(0, -120px);
}
.dupa2[data-num="5"] {
transform: translate(0, -150px);
}
.dupa2[data-num="6"] {
transform: translate(0, -180px);
}
.dupa2[data-num="7"] {
transform: translate(0, -210px);
}
.dupa2[data-num="8"] {
transform: translate(0, -240px);
}
.dupa2[data-num="9"] {
transform: translate(0, -270px);
}
.rolledover.dupa2[data-num="0"] {
transform: translate(0, -300px);
}
.rolledover.dupa2[data-num="1"] {
transform: translate(0, -330px);
}
.rolledover.dupa2[data-num="2"] {
transform: translate(0, -360px);
}
.rolledover.dupa2[data-num="3"] {
transform: translate(0, -390px);
}
.rolledover.dupa2[data-num="4"] {
transform: translate(0, -420px);
}
.rolledover.dupa2[data-num="5"] {
transform: translate(0, -450px);
}
.rolledover.dupa2[data-num="6"] {
transform: translate(0, -480px);
}
.rolledover.dupa2[data-num="7"] {
transform: translate(0, -510px);
}
.rolledover.dupa2[data-num="8"] {
transform: translate(0, -540px);
}
.rolledover.dupa2[data-num="9"] {
transform: translate(0, -570px);
}
<div class="dupa1">
<div class="dupa2" id="cipa" data-num="0">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<button id="rand">rand</button>

Thank you a lot.
But I stuck in another problem similar, but with array.
I've made a fiddle for better view to the problem: https://jsfiddle.net/zr2dLbge/
<div class="wrap" id="wrap"></div>
.wrap{
border:1px solid #000;
display: inline-block;
height:30px;
border-right: none;
}
.numbers{
width:30px;
height:30px;
display:inline-block;
overflow: hidden;
border-right: 1px solid #000;
}
.numbers span{
display: block;
width:30px;
height:30px;
line-height: 30px;
text-align: center;
}
.numbers[data-num="0"] div{
transform: translate(0, 0);
transition: all 1s ease;
}
.numbers[data-num="1"] div{
transform: translate(0, -30px);
transition: all 1s ease;
}
.numbers[data-num="2"] div{
transform: translate(0, -60px);
transition: all 1s ease;
}
.numbers[data-num="3"] div{
transform: translate(0, -90px);
transition: all 1s ease;
}
.numbers[data-num="4"] div{
transform: translate(0, -120px);
transition: all 1s ease;
}
.numbers[data-num="5"] div{
transform: translate(0, -150px);
transition: all 1s ease;
}
.numbers[data-num="6"] div{
transform: translate(0, -180px);
transition: all 1s ease;
}
.numbers[data-num="7"] div{
transform: translate(0, -210px);
transition: all 1s ease;
}
.numbers[data-num="8"] div{
transform: translate(0, -240px);
transition: all 1s ease;
}
.numbers[data-num="9"] div{
transform: translate(0, -270px);
transition: all 1s ease;
}
let arr = [];
var numbers = 1234561234;
const wrap = document.getElementById("wrap");
function toArray (val) {
return (val).toString().split('');
}
arr = toArray(numbers);
for (let i = 0; i < arr.length; i++) {
div = document.createElement('div'),
div.className = "numbers";
div.dataset.num = arr[i];
div.dataset.x = i;
div.innerHTML = "<div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>"
wrap.appendChild(div);
}
setInterval(function(){
arr.forEach( (k) => {
arr[k] = Math.floor(Math.random() * 9) + 0;
})
for (let i = 0; i < arr.length; i++) {
document.querySelector('.numbers[data-x="'+i+'"]').dataset.num = arr[i];
}
}, 1000);
unfortunately window.requestAnimationFrame() doesn't work for me in this case