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>
Related
I'm trying to clone the Flickr homepage and I want the first image to drop in in .3s and then for the images to change every 4 seconds taking 1 second to transition unless ArrowLeft or ArrowRight is pressed, in the case of ArrowLeft the image should have a drop in animation to the previous image in the cycle and in the case of ArrowRight being pressed the image should drop in to the next image in the cycle and in the case of both the images should stay for 4 seconds NOT TRANSITIONING IN LESS TIME IF THE INTERVAL THAT STARTS ON PAGE LOAD IS INTERRUPTED. You can see what I mean on the Flickr homepage.
the following is a distillation of the problem in code.
html document
<!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">
<title>test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js" defer></script>
</head>
<body>
<div id="background"></div>
<div id='grid'>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>
</body>
</html>
css document
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(50, 50, 50);
display: grid;
}
#background {
height: 100vh;
width: 100%;
background-image: url(./test_images/meditation.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-name: slideIn;
transition: background-image 1s;
z-index: 0;
}
#keyframes slideIn {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
#grid {
display: grid;
grid-template-rows: 65px 1fr minmax(65px, auto);
height: 100vh;
width: 100%;
z-index: 1;
}
header {
background-color: rgba(0, 0, 0, .5);
color: white;
}
main {
color: white;
}
footer {
color: white;
background-color: black;
}
#grid, #background {
grid-area: 1 / 1;
}
javascript document
let i = 0;
const backgroundImages = ['meditation.jpg', 'fish.jpg', 'fern.jpg', 'stars.jpg', 'northernLights.jpg', 'forest.jpg', 'mountains.jpg', 'horse.jpg', 'lion.jpg', 'engineer.jpg', 'computers.jpg'];
function changeImages () {
i++;
if (i == backgroundImages.length) {i = 0}
document.getElementById('background').style.backgroundImage = 'url(./test_images/' + backgroundImages[i] + ')';
}
window.onload = function () {
window.setInterval(changeImages, 4000);
}
document.addEventListener('keydown', (event) => {
if (event.key == "ArrowLeft") {
i--;
} else if (event.key == "ArrowRight") {
i++;
}
if (i == -1) {
i = backgroundImages.length - 1;
} else if (i >= backgroundImages.length) {
i = 0;
}
document.getElementById('background').style.backgroundImage = 'url(./test_images/' + backgroundImages[i] + ')';
document.getElementById('background').animate([
{transform: "translateY(-100%)"},
{transform: 'translateY(0%)'}
], {
duration: 300,
iterations: 1
})
window.setInterval(changeImages, 4000);
}, false)
Each time you set a new interval, cancel the old interval using clearInterval:
let intervalId;
window.onload = function () {
intervalId = window.setInterval(changeImages, 4000);
}
document.addEventListener('keydown', (event) => {
.....
clearInterval(intervalId);
intervalId = window.setInterval(changeImages, 4000);
}, false)
I am trying to create an animation like I have created an empty h1 element and filled it with span elements by using javascript (each span element contains an individual letter) and when I hover on span it's rotating (as desired) but in order to rotate span Element I have to give display:inline-block; to the span element but by doing this it removes space between the words. I searched it on the internet but didn't get the right answer.
So any anyone tell me how do I rotate the text with proper spacing around each word?
Here is my code you can experiment by uncommenting the display:inline-block; in CSS
let a = document.querySelector("h1")
let txt = "Hello How are you"
let indletter = Array.from(txt)
//console.log(indletter)
for(let i = 0; i < indletter.length;i++){
let span = document.createElement("span")
span.innerText = indletter[i]
a.appendChild(span)
}
body {
background-color: #eee;
text-align: center;
margin-top: 100px;
font-family:arial;
}
h1{
font-size:0;
}
span{
font-size:2rem;
/* display:inline-block; */
transition:.3s alternate;
}
span:hover{
color:red;
cursor:pointer;
transform:rotate(45deg);
}
<!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">
<title>Document</title>
</head>
<body>
<h1></h1>
</body>
</html>
Since those spans contain only whitespace, they “collapse” when you make them inline-block. Simply adding white-space: pre; can already fix that.
(And you can add it to all of them, don’t need a special class for the space-spans - they all contain one character each only, so this has no negative effect.)
span{
font-size:2rem;
display:inline-block;
white-space:pre;
transition:.3s alternate;
}
You could just test to see if that letter was a space and apply a special class to it.
if (indletter[i]==" ") span.classList.add('spacer');
and the css
.spacer{
padding:0 5px;
}
Also I changed the transition easing to something it would understand and now the tweening works.
transition:.3s ease-in-out;
let a = document.querySelector("h1")
let txt = "Hello How are you"
let indletter = Array.from(txt)
//console.log(indletter)
for(let i = 0; i < indletter.length;i++){
let span = document.createElement("span")
span.innerText = indletter[i]
if (indletter[i]==" ") span.classList.add('spacer');
a.appendChild(span)
}
body {
background-color: #eee;
text-align: center;
margin-top: 100px;
font-family:arial;
}
h1{
font-size:0;
}
span{
font-size:2rem;
position:relative;
display:inline-block;
transition:.3s ease-in-out;
}
.spacer{
padding:0 5px;
}
span:hover{
color:red;
cursor:pointer;
transform:rotate(45deg);
transition:.3s alternate;
}
<!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">
<title>Document</title>
</head>
<body>
<h1></h1>
</body>
</html>
Use for space
let a = document.querySelector("h1")
let txt = "Hello I am SHAYAN"
let indletter = Array.from(txt)
//console.log(indletter)
for (let i = 0; i < indletter.length; i++) {
let span = document.createElement("span")
span.innerHTML = indletter[i] === ' ' ? ' ' : indletter[i];
a.appendChild(span)
}
body {
background-color: #eee;
text-align: center;
margin-top: 100px;
font-family: arial;
}
h1 {
font-size: 0;
}
span {
font-size: 2rem;
display: inline-block;
transition: .3s alternate;
}
span:hover {
color: red;
cursor: pointer;
transform: rotate(45deg);
}
<!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">
<title>Document</title>
</head>
<body>
<h1></h1>
</body>
</html>
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!
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>