i want to make my animation runs every 5sec using js
this is my html code
<div id="aa"></div>
and this is my css code
#aa{
width: 167px;
height: 169px;
background-image: url("sprite.png");
/*animation: play .2s steps(6) ;*/
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1002px; }
}
jsfiddle
You can play animation in class, then add and remove class of element every 5 second.
setInterval(function(){
$("div").addClass("play");
setTimeout(function(){
$("div").removeClass("play");
}, 1000);
}, 5000);
div {
width: 100px;
height: 100px;
background: green;
}
.play {
animation: play 1s;
}
#keyframes play {
0% { margin-left: 0px; }
50% { margin-left: 200px; }
100% { margin-left: 0px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
It will look like:
function animation()
{
$('#overlay').fadeIn('slow').delay(1000).fadeOut('slow');
}
setInterval(animation,5000);
I made a sample for you, have a look: http://jsfiddle.net/xgnjy8st/
Does this suite you?
<div id="aa"></div>
#aa {
width: 167px;
height: 169px;
background-image: url("http://www.w3schools.com/cssref/pineapple.jpg");
animation: blinker 5s forwards infinite;
}
#keyframes blinker {
50% {
opacity: 0.0;
}
}
https://jsfiddle.net/65t0ye2m/
Or try this one out with js
var img = document.getElementById('aa');
var interval = window.setInterval(function() {
if (img.style.visibility == 'visible') {
img.style.visibility = 'hidden';
} else {
img.style.visibility = 'visible';
}
}, 1000);
https://jsfiddle.net/65t0ye2m/
Related
I got myself a simple script that creates a progressbar which runs for 180 seconds. After that time the progressbar sends the browser to another website. View / run the code below.
I added an onclick event to the progress bar for testing purposes.
What I want; I want to be able to pause, reset and set a new running-time value.
I tried using document.getElementById('progressbar1').style.animationPlayState = 'paused'; to pause the progressbar, but unfortunately nothing is happening.
Do you guys have any clue on how to pause the progressbar?
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
You are selecting the wrong element to stop the animation!
The animation is running on #progressbar1 .inner
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').getElementsByClassName('inner')[0].style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
I'm trying to simulate the animation of flips of a coin with JS & CSS.
I guess the keys are transform-style, backface-visibility, rotateY, animation-fill-mode and transform in CSS as well as Math.random in JS.
If the coin is the heads, everything is OK.
If the coin is tail, clicking the button will flip it to head and then start the expected flipping animation.
How do I make it start flipping animation directly from the tail?
const coin = document.querySelector('#coin');
const button = document.querySelector('#flip');
const status = document.querySelector('#status');
const heads = document.querySelector('#headsCount');
const tails = document.querySelector('#tailsCount');
let headsCount = 0;
let tailsCount = 0;
function deferFn(callback, ms) {
setTimeout(callback, ms);
}
function processResult(result) {
if (result === 'heads') {
headsCount++;
heads.innerText = headsCount;
} else {
tailsCount++;
tails.innerText = tailsCount;
}
status.innerText = result.toUpperCase();
}
function flipCoin() {
coin.setAttribute('class', '');
const random = Math.random();
const result = random < 0.5 ? 'heads' : 'tails';
deferFn(function() {
coin.setAttribute('class', 'animate-' + result);
deferFn(processResult.bind(null, result), 2900);
}, 100);
}
button.addEventListener('click', flipCoin);
h2 {
margin: .25rem;
}
div.container {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 1rem;
background-color: skyblue;
}
#coin {
position: relative;
width: 15rem;
height: 15rem;
margin: 2rem 0rem;
transform-style: preserve-3d;
}
#coin div {
width: 100%;
height: 100%;
border: 2px solid black;
border-radius: 50%;
backface-visibility: hidden;
background-size: contain;
position: absolute;
}
.heads {
background-image: url("https://en.numista.com/catalogue/photos/inde/2311-original.jpg");
}
.animate-heads {
animation: flipHeads 3s;
animation-fill-mode: forwards;
}
#keyframes flipHeads {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1800deg);
}
}
.tails {
background-image: url("https://en.numista.com/catalogue/photos/inde/3165-original.jpg");
transform: rotateY(-180deg);
}
.animate-tails {
animation: flipTails 3s;
animation-fill-mode: forwards;
}
#keyframes flipTails {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1620deg);
}
}
<div class='container'>
<h2>Confused about your life decision? Just flip this coin!</h2>
<h2>Btw, don't forget to assign something to both sides.</h2>
<p>And don't take your life decision based on this stupid coin flip. I was kidding.</p>
<div id="coin" class=''>
<div id="heads" class="heads"></div>
<div id="tails" class="tails"></div>
</div>
<button id="flip">Flip this thing</button>
<p>Heads: <span id="headsCount">0</span> Tails: <span id="tailsCount">0</span></p>
<p><span id="status"></span></p>
</div>
You can use the css property:
animation-fill-mode: forwards;
hi I have a for loop that is counting from 1 till infinity and I would like to change a background of a div and colour of the 'p'every time number is updated. It works when I make loop once (means for a first change but it does not rum animation for a second time. (numbers keep updating)
<div class="section" id="box">
<p id="demo">23375</p>
</div>
my CSS
.section {
background-color: blue;
margin: 1rem;
}
.pargraph-active,
.colorTransition {
animation: colorTransition 2s ease-in-out;
}
#keyframes colorTransition {
0% {
background-color: blue;
50% {
color: white
background-color: red;
}
100% {
background-color: blue;
}
}
and JS
let box = document.querySelector('#box');
let demo = document.querySelector('#demo');
function runAnimation() {
box.classList.add('colorTransition');
demo.classList.add('pargraph-active');
console.log(`Animation started`);
}
function initialState() {
box.classList.remove('colorTransition');
demo.classList.remove('pargraph-active');
console.log(`Initial State`);
}
(function theLoop(i) {
setTimeout(
function() {
demo.innerHTML = i;
if (i++) {
theLoop(i);
}
runAnimation();
},
2000,
initialState()
);
})(1);
You have some error in #keyframe syntax, you are missing } and also ; after color.
I fixed it and it work now, but i suggest that you only use css instead .
something like this would do
animation: colorTransition 2s ease-in-out infinite;
let box = document.querySelector('#box');
let demo = document.querySelector('#demo');
function runAnimation() {
box.classList.add('colorTransition');
demo.classList.add('pargraph-active');
console.log(`Animation started`);
}
function initialState() {
box.classList.remove('colorTransition');
demo.classList.remove('pargraph-active');
console.log(`Initial State`);
}
(function theLoop(i) {
setTimeout(
function() {
demo.innerHTML = i;
if (i++) {
theLoop(i);
}
runAnimation();
},
2000,
initialState()
);
})(1);
.section {
margin: 1rem;
background-color: blue;
}
.pargraph-active,
.colorTransition {
animation: colorTransition 2s ease-in-out;
}
#keyframes colorTransition {
0% {
background-color: blue;
}
50% {
color: white;
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="section " id="box">
<p id="demo">23375</p>
</div>
I want to have the following JavaScript function to transition function between from have none display to block when generate_loading_screen() is called to to when it finishes transition between display block to none. How do I do this?
function generate_loading_screen() {
window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(generate_loading_screen);
};
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loading" id="loading_screen" style="display: none;"></div>
Just extra info: progress_percent is a variable that determines how much of the rest of the web-app has loaded. The grayscale filter does not affect the whole page, just the ID body_of
Thanks in advance
Probably better to use a opacity transition by adding a class when your percent reaches 100.
Codepen for working example or see below.
HTML:
<div class="loading" id="loading_screen"></div>
CSS:
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
opacity: 100%;
transition: opacity 1s ease-in-out;
}
.done_loading {
opacity: 0;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Javascript:
var progress_percent = 25;
var interval;
function generate_loading_screen() {
interval = window.setInterval(function(){
progress_percent += 1; //totest
if (progress_percent > 75) {
document.getElementById("loading_screen").className = "loading done_loading";
//stop_generating_loading();
}
//TESTING
if(progress_percent > 100){
console.log("Reached 100%");
document.getElementById("loading_screen").className = 'loading';
progress_percent = 0;
}
//
}, 50);
};
function stop_generating_loading() {
clearInterval(interval);
};
document.addEventListener('DOMContentLoaded', function(){
generate_loading_screen();
});
Remove all the testing code to get this to work once, you might need to add additional code for your body div. Let me know if you need me to add more to this example!
window.setInterval returns an intervalId which you need to cancel in order to stop the interval
let timer;
function generate_loading_screen() {
timer = window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(timer);
};
i have a div-container with a gif-picture. I want to blinking this gif, but the gif is only show and is not blinking
function blink() {
time2 = time2 - 1;
if (time2 >= 0) {
var ani = setInterval(blinkerle() {
if (document.getElementById(risiko1).style.visibility == "visible") {
document.getElementById(risiko1).style.visibility = "hidden";
} else {
document.getElementById(risiko1).style.visibility = "visible";
}
}, 1000);
}
}
the function is called via blink();
from another place. thanks for your help
You can actually do this with pure CSS:
div {
display: block;
position: relative;
top: 5px;
width: 200px;
height: 50px;
background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png");
background-position: top left;
background-repeat: no-repeat;
text-indent: -999em;
}
/** the blink css is below this comment: **/
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
<div class="blink"></div>
CSS taken from here.
You're missing the function keyword in front of the blinkerle() function. It should be:
var ani = setInterval(function blinkerle(){
Or preferably use an anonymous function:
var ani = setInterval(function() {