I have a button triggering this function on click:
<button onclick="showAdvice()">Advice!</button>
<p id="text"></p>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
document.getElementById("text").innerHTML = advices[choose];
}
</script>
The onclick action generates advices in "text" paragraph, they appear in random order. I want them to have a transition in between - opacity, fade out/fade in. How can I achieve this in CSS/JavaScript?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
#pContainer {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
#pContainer > p {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s linear;
}
#pContainer > p.show {
opacity: 1;
}
#pContainer > p.hide {
opacity: 0;
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<button onclick="showAdvice()">Advice!</button>
<div id="pContainer">
<p id="text" class="show"></p>
<p id="text02" class="hide"></p>
</div>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
$('#pContainer p.hide')
.text(advices[choose])
.removeClass('hide')
.addClass('show')
.siblings('p')
.removeClass('show')
.addClass('hide');
}
</script>
</body>
</html>
You can use jquery to create animations.
function showAdvice() {
$("#text").hide();
var advices = ["1", "2", "3"];
var choose = Math.floor(Math.random() * advices.length);
document.getElementById("text").innerHTML = advices[choose];
$("#text").fadeIn();
}
Example:
https://jsfiddle.net/90mxq8bf/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
#pContainer {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
}
#pContainer > p {
position: absolute;
top: 0;
left: 0;
/* transition: opacity 0.5s linear; */
}
#pContainer > p.show {
/* opacity: 1; */
opacity: 1;
-webkit-animation: showP 0.85s linear;
}
#pContainer > p.hide {
/* opacity: 0; */
opacity: 0;
top: -50px;
-webkit-animation: hideP 0.85s linear;
}
#-webkit-keyframes showP {
0%{
opacity: 0;
top: -50px;
}
100%{
opacity: 1;
top: 0px
}
}
#-webkit-keyframes hideP {
0%{
opacity: 1;
top: 0px;
}
80%{
opacity: 0;
}
90%{
top: 105px; /* container height + 5*/
}
100%{
opacity: 0;
top: -50px;
}
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<button onclick="showAdvice()">Advice!</button>
<div id="pContainer">
<p id="text" class="show"></p>
<p id="text02" class="hide"></p>
</div>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
$('#pContainer p.hide')
.text(advices[choose])
.removeClass('hide')
.addClass('show')
.siblings('p')
.removeClass('show')
.addClass('hide');
}
</script>
</body>
</html>
Related
how can I make a counter that counts every time animation restarts?
I tried seconds counter, but it didnt synchronize well with my animation.
However, I am trying to make similar website as tacospin.com, but with jumping dog.
The logic in tacospin is quite simple, everytime degree = 0 it counts. But I cant figure out how to do something like that
My animation code:
var seconds = 0;
var el = document.getElementById('seconds-counter');
function incrementSeconds() {
seconds += 1;
el.innerText = "You have been here for " + seconds + " seconds.";
}
var cancel = setInterval(incrementSeconds, 1350);
#center{
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.centerfloor{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 193px;
width: 30%;
}
#keyframes jump {
0% {transform: translate3d(0,0,0) scale3d(1,1,1);}
40% {transform: translate3d(0,30%,0) scale3d(1,1,1);}
100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .7s linear alternate infinite;
}
/* For demo: */
<!DOCTYPE html>
<html lang="cz">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog jump</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="dogdiv">
<img class="jump" id="center" src="dogie.png" alt="idk">
</div>
<img class="centerfloor" src="floo.png">
</main>
<div id="seconds-counter"></div>
<script src="script.js"></script>
</body>
</html>
You can rely on animationiteration event, it can be bound to any DOM element which is animated via CSS, and it gets fired everytime the animation repeats.
https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event
var seconds = 0;
let animations = 0;
let animFlag = false;
var el = document.getElementById('seconds-counter');
const el2 = document.getElementById('anims-counter');
function incrementSeconds() {
seconds += 1;
el.innerText = "You have been here for " + seconds + " seconds.";
}
var cancel = setInterval(incrementSeconds, 1350);
const animated = document.querySelector('.jump');
animated.addEventListener('animationiteration', () => {
animFlag = !animFlag
if (!animFlag) {
animations++
el2.innerText = "Animation ended. Total: " + animations
}
});
#center{
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.centerfloor{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 193px;
width: 30%;
}
#keyframes jump {
0% {transform: translate3d(0,0,0) scale3d(1,1,1);}
40% {transform: translate3d(0,30%,0) scale3d(1,1,1);}
100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .7s linear alternate infinite;
}
/* For demo: */
<!DOCTYPE html>
<html lang="cz">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog jump</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="dogdiv">
<img class="jump" id="center" src="dogie.png" alt="idk">
</div>
<img class="centerfloor" src="floo.png">
</main>
<div id="seconds-counter"></div>
<div id="anims-counter"></div>
<script src="script.js"></script>
</body>
</html>
hey i try to fade in pause for a sec and fade out a span , im using class add and remove through timeout and interval . i cant figure it out someone can help?
i tried to do it with active class but i didnt make it .
i searched for it on google and found nothing with JS only Jquery that i dont want to use ATM
--------HTML----
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
-----CSS-----
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadein {
animation: fadeIn 1s ease-in;
visibility: visible;
}
.design-kinds.fadeout {
animation: fadeOut 1s ease-out;
visibility: hidden;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
#keyframes fadeOut {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
---JS---
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
let doneOrNot = "not";
function showText() {
const spans = [...textToShow];
if (index === spans.length - 1) {
index = 0;
}
if (doneOrNot === "done") {
doneOrNot = "not";
setTimeout(() => {
spans[index].classList.remove("fadein");
spans[index].classList.add("fadeout");
}, 4000);
index++;
console.log(doneOrNot);
}
if (doneOrNot === "not") {
spans[index].classList.add("fadein");
doneOrNot = "done";
console.log(doneOrNot);
}
}
setInterval(showText, 4000);
THANKS <3
If you want to animate it for a single time, than you don't want to need javascript.
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
position: absolute;
}
.web{
animation: animate1 4s 2s 1 ease-in-out ;
color: black;
opacity: 0;
}
.logo{
animation: animate1 4s 8s 1 ease-in-out ;
opacity: 0;
}
.brand{
animation: animate1 4s 14s 1 ease-in-out ;
opacity: 0;
}
#keyframes animate1{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate2{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate3{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds web">WebSite's</span>
<span class="design-kinds logo">Logos</span>
<span class="design-kinds brand">Brands</span>
</div>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
The given JS checks whether done is set, if it is immediately sets it to not and then checks if it's not and acts on that. This probably needs changing to an if...else combination.
Although you can do the animation by JS you may like to consider doing it with CSS as that should optimise the system's use of for example the GPU as you are only changing an animatable property (opacity).
While the specific example given here could be done entirely by CSS - setting up one set of keyframes which fade in, pause and fadeout a text for 33.3333% of the total animation time of 3*whatever seconds you choose - to be more general it adds a bit of JS which is run just once at the start to set up the keyframes to give the right %s however many texts there are.
This is done by setting CSS variables which are used in CSS calcs to give the overall animation time and the delay times - each text starts its animation offset depending on its index and then it runs forever.
<head>
<style>
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
/*visibility: hidden;*/
position: absolute;
animation: fadeInOut calc(var(--num) * var(--t)) infinite linear;
animation-delay: calc(var(--n) * var(--t));
animation-fill-mode: forwards;
}
</style>
<style id="keyframes">
</style>
</head>
<body>
div class="desgin">
<div class="im__desgin">
<h1>I'm Desgin.</h1>
</div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script>
const showFor = 6; // set this to the number of seconds each text takes to fade in, pause for 1 second and fade out again
const whatDesign = document.querySelector('.what__design');
const designKinds = document.querySelectorAll('.design-kinds');
const len = designKinds.length;
whatDesign.style.setProperty('--num', len);
whatDesign.style.setProperty('--t', showFor + 's');
for (let n = 0; n < len; n++) {
designKinds[n].style.setProperty('--n', n);
}
const pcEachGets = 100 / len; // the percentage of total cycle time each bit of text gets
const pcForOneSecond = pcEachGets / showFor; // the % of total cycle time that equals 1 second - 1 second is the required pause time
const pcFadeInOrOut = (pcEachGets - pcForOneSecond) / 2;
document.querySelector('#keyframes').innerHTML = `#keyframes fadeInOut {
0% {
opacity: 0;
}
` + pcFadeInOrOut + `% {
opacity: 1;
}
` + (pcFadeInOrOut + pcForOneSecond) + `% {
opacity: 1;
}
` + pcEachGets + `% {
opacity: 0;
}
100% {
opacity: 0;
}
}`;
</script>
</body>
I think this will help you.
if you want this animation as a infinite loop.
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
function showText() {
setInterval(() => {
if (index < 2) {
textToShow[index].classList.add("fadeinOut");
index++;
}
else {
textToShow[index].classList.add("fadeinOut");
setTimeout(() => {
textToShow[2].classList.remove("fadeinOut");
}, 4000);
index = 0;
}
if (index > 0) {
setTimeout(() => {
textToShow[index - 1].classList.remove("fadeinOut");
}, 4000);
}
}, 5000);
}
showText();
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadeinOut {
animation: fadeInOut 4s ease-in;
visibility: visible;
}
#keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%,80% {
opacity: 100;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I figure some out but still i have a delay that i doest succeed to manage the delay after the function is done
<div class="im__desgin"><h1>I Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds" id="Kind-1">WebSite's</span>
<span class="design-kinds" id="Kind-2">Logos</span>
<span class="design-kinds" id="Kind-3">Brands</span>
</div>
</div>
.desgin {
text-align: center;
font-size: 40px;
color: aliceblue;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
position: relative;
}
.design-kinds {
text-align: center;
opacity: 0;
position: absolute;
}
.effect {
animation: animate1 4s 2s 1 ease-in-out;
transform: scale(0.5);
opacity: 0;
}
#keyframes animate1 {
0%,
100% {
transform: scale(0.5);
opacity: 0;
}
30%,
50% {
transform: scale(1);
opacity: 10;
}
30% {
transform: scale(1);
opacity: 10;
}
}
const spans = document.querySelectorAll(".design-kinds");
//call function before page load
showText();
//Changing Text
function showText() {
//Kind --1--
$("#Kind-1").addClass("effect");
setTimeout(() => {
$("#Kind-1").removeClass("effect");
}, 6000);
//Kind --2--
setTimeout(() => {
$("#Kind-2").addClass("effect");
}, 3700);
setTimeout(() => {
$("#Kind-2").removeClass("effect");
}, 9800);
//Kind --3--
setTimeout(() => {
$("#Kind-3").addClass("effect");
}, 7700);
setTimeout(() => {
$("#Kind-3").removeClass("effect");
}, 14000);
}
setInterval(showText, 13000);
I have recently created a program which creates new element when someone clicks it. The new element which is created has some specific CSS styling. Now i want it's background to randomly change when the user clicks on button. Like the first time when someone clicks the background is red another time its green and so on like this.. My code is -
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
I want the background color of this box to change randomly..Please help, any help is appreciated..
as you can see from the code, I created a function that randomizes the numbers and puts them in the rgb.
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return bgColor;
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundColor = random_bg_color();
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
For answer your comment :
Generate random image:
var Images = new Array("https://via.placeholder.com/150/0000FF/808080","https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/FFFF00/000000");
function randompic() {
var randomNum = Math.floor(Math.random() * Images.length);
return Images[randomNum];
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundImage = "url('"+randompic()+"')";
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This seems to work:
http://jsfiddle.net/mcuzq9rb/
I included a random color generator and applied it to the style of the floating squares.
Let me know if it's what you wanted.
I would style the box with an rga-value, similar to how you randomly set the size of the bubble:
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
bubbles.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
Here's a little function that uses rando.js to set an element's background color to a random hex string.
function setRandomBackgroundColor(element) {
var hexString = "#";
for (var i = 0; i < 3; i++) {
var hex = rando(255).toString(16);
hexString += hex.length == 1 ? "0" + hex : hex;
}
element.style.backgroundColor = hexString;
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="setRandomBackgroundColor(document.body);">Set random background color</button>
I'm trying to get a looping slideshow to stop looping after 3 times and have it end on the last frame. It's a 300x250 web banner with 3 different frames.
Any help would be appreciated, thank you!
<style>
#frames {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 300px;
height: 250px;
}
#frames a {
position: absolute;
}
#frames a:nth-of-type(1) {
animation-name: fader;
animation-delay: 3s;
animation-duration: 1s;
z-index: 20;
}
#frames a:nth-of-type(2) {
z-index: 10;
}
#frames a:nth-of-type(n+3) {
display: none;
}
#keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
</style>
<div id="frames">
<img src="01.jpg">
<img src="02.jpg">
<img src="03.jpg">
</div>
<script>
window.addEventListener("DOMContentLoaded", function(e) {
var frames = document.getElementById("frames-1");
var fadeComplete = function(e) { frames.appendChild(arr[0]); };
var arr = frames.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
</script>
Hey I made an example how you could animate 3 iterations. Note that I wrote some dummy code that is not refactored or a fully implemented slider at all. But it shows the principle.
What happens is that if you click the button it will 'plan' 3 animation cycles at a 5000ms interval.
Alternatively you could recurse the animations instead of planning them to make the code a bit more flexible.
var currentlySelectedNode = 0;
var nodes = document.querySelectorAll('#container>div');
var nextButton = document.getElementById('next');
function showNode( node ) {
node.classList.add('show');
}
function hideNode( node ) {
node.classList.remove('show');
}
function showNextNode() {
hideNode( nodes[currentlySelectedNode] );
if( currentlySelectedNode < nodes.length - 1 )
currentlySelectedNode++;
else
currentlySelectedNode = 0;
showNode( nodes[currentlySelectedNode] );
}
function showNext3Nodes() {
showNextNode();
window.setTimeout( ()=>{
showNextNode();
}, 5000);
window.setTimeout( ()=>{
showNextNode();
}, 10000);
}
nextButton.addEventListener('click', function() {
showNext3Nodes();
});
showNode(nodes[0]);
#container{
position: relative;
height: 100px;
width: 100px;
}
#container>div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0;
transition: opacity 2s;
}
#container>div.show{
opacity: 1;
}
<div id='container'>
<div class='show' style='background: red'></div>
<div style='background: blue'></div>
<div style='background: green'></div>
<div style='background: yellow'></div>
<div style='background: purple'></div>
<div style='background: orange'></div>
</div>
<button id='next'>Next(3)</button>
Note: You can do the same with css by setting various animation delays to different elements. This would however be quite inflexible.
please add Jquery to your code and use my snippet code.
setTimeout(function(){
$('#frames a').addClass('stop_animation');
},17000);
$('#frames a').click(function(){
$('#frames a').addClass('stop_animation');
});
#frames{
width: 300px;
height: 250px;
overflow:hidden;
position:relative;
}
#frames a{
position:absolute;
animation: fader 6s 3;
-webkit-animation: fader 6s 3;
opacity:0;
width:100%;
height: 100%;
}
#frames a:nth-child(1){-webkit-animation-delay:0s;}
#frames a:nth-child(2){-webkit-animation-delay:2s;}
#frames a:nth-child(3){-webkit-animation-delay:4s;}
#-webkit-keyframes fader{
25%{opacity:1;}
40%{opacity:0;}
}
#frames a.stop_animation{
animation-play-state: paused;
opacity: 1;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Teste</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="frames">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
<img src="http://transativafm.com.br/wp-content/uploads/2018/03/anuncie-300x250.png">
<img src="https://www.portalmongagua.com.br/images/anuncios/54dc18565648636b421710d98b2def02.png">
</div>
</body>
</html>
var Buttons = new Array();
var AnimEnd = new Array();
var Called = new Array();
function Start () {
Buttons = document.getElementsByClassName("google_button-main");
for (var i = 0; i < Buttons.length; i++)
{
Buttons[i].onmousedown = (e) => {
var Animator = e.target.previousElementSibling;
Called[i] = false;
AnimEnd[i] = false;
Animator.setAttribute("Animated", "true");
Animator.ontransitionend = (f) => {
if (Called[i] == false)
{
if (AnimEnd[i] == true)
{
Animator.setAttribute("Animated", "false");
}
}
Called[i] = true;
AnimEnd[i] = true;
}
}
Buttons[i].onmouseup = (e) => {
var Animator = e.target.previousElementSibling;
if (AnimEnd[i] == true)
{
Animator.setAttribute("Animated", "false");
}
AnimEnd[i] = true;
}
}
}
.google_button-main {
height: 100%;
width: 100%;
border: none;
background-color: black;
z-index: -1;
pointer-events: auto;
}
.google_button-animator[animated="false"] {
height: 0px;
width: 0px;
border-radius:50%;
background-color: rgba(255, 255, 255, 0.0);
transition: background-color 0.4s ease, height 0.4s step-end, width 0.4s step-end, border-radius 0.4s step-end;
}
.google_button-animator {
position: absolute;
pointer-events: none;
z-index: 1;
}
.google_button-animator[animated="true"] {
height: 50px;
width: 50px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0%;
transition: height 0.4s ease, width 0.4s ease, border-radius 0.4s ease;
}
.google_button-wrapper {
position: relative;
pointer-events: none;
height: 50px;
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body onload="Start();">
<div class="google_button-wrapper">
<div class="google_button-animator" animated="false">
</div>
<button class="google_button-main">
Knopf
</button>
</div>
</body>
</html>
I wanted to make a button-animation like the Google buttons.
I wanted the animation, to be played on button-down and on button-up, but only when the previous animation is finished. So I added the "AnimEnd"-array.
After that I ran into the issue, that the ontransitionend-function gets called 5 times after the transition is done, so I added the "Called"-array.
My code works, but when I click the button (In the snippet below) very fast the JavaScript-onmouseup stops working.
I tried to resolve it with the console-log, but I couldnt find the issue!