I'm trying to make a block of text (h4) become visible after a delay when the page loads.
Do I need to use setTimeout?
I think what you need is to set some css animation:
h4 {
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
#keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
With pure JS and setTimeout this could be one solution.
window.onload = event => {
console.log("page is fully loaded");
setTimeout(function() {
document.getElementById("delayed-3s").style.visibility = "visible";
}, 3000);
};
<h4 id="delayed-3s" style="visibility:hidden;">I am some h4 text</h4>
Related
I'm a bit confused about how to trigger multiple animations for an element using javascript.
I'm trying to get an element (.hud) to fade-in and also bounce when clicked. Currently it will only do one or the other. The second animation class is being added to the element in a on click event. The class gets added but the animation does not play. How would I construct my code for the animation to fade-in and also bounce on click?
<!DOCTYPE html>
<html>
<head>
<style>
.anim {
animation-name: bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
animation-name: fade-in;
animation-duration: .5s;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
</style>
</head>
<body>
<p>This box should fade in and bounce on click</p>
<div class="hud"></div>
<script>
element = document.querySelector('.hud');
console.log(element);
// reset the transition by...
element.addEventListener("click", function(e) {
console.log("clicked");
e.preventDefault;
element.classList.remove("anim");
void element.offsetWidth;
element.classList.add("anim");
}, false);
</script>
</body>
</html>
Was it so necessary for you? In order for the animation in your example to work constantly, a reset function is needed.
element = document.querySelector('#red_box');
console.log(element);
element.addEventListener("click", function(e) {
e.preventDefault;
console.log("clicked");
element.classList.remove("hud");
element.classList.remove("anim");
void element.offsetWidth;
element.classList.add("anim");
}, false);
/*$(".hud").click(function () {
var $this = $(this);
$this = reset($this);
$this.addClass("anim bounceIn_1");
console.log("clicked");
});*/
.anim {
width: 100px;
height: 100px;
background-color: red;
animation-name: bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
animation-name: fade-in;
animation-duration: .5s;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1 {0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>This box should fade in and bounce on click</p>
<div id="red_box" class="hud"></div>
</body>
Have you tried to put a comma in your .anim class?
animation: bounceIn_1 .5s, fade-in .5s
You need to put the 2 animation in the same css class and make sure that the removing and the adding of that class are done in 2 separate frames.
The first issue can be easily solved by putting a comma between the 2 animations which are now in the class .anim.
The second issue is a little bit tricky but the window.requestAnimationFrame() function will solve it !
Here you have the modified code so that you can better understand:
element = document.querySelector('.hud');
console.log(element);
// reset the transition by...
element.addEventListener("click", function(e) {
console.log("clicked");
e.preventDefault;
element.classList.remove("anim");
void element.offsetWidth;
window.requestAnimationFrame(() => element.classList.add("anim")); /* The add() will be done before the next repaint so that we can see the change */
}, false);
.anim {
animation-name: fade-in, bounceIn_1;
animation-duration: .5s;
}
.hud {
width: 100px;
height: 100px;
background-color: red;
//animation-name: fade-in; /* Remove this */
//animation-duration: .5s; /* Remove this */
}
#-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<body>
<p>This box should fade in and bounce on click</p>
<div class="hud"></div>
</body>
Quick tip: with this method you can play as many animation as you want on the same element, just add its name to the .anim animations list and you're done!
I am using jquery and i want to make like toast message.
so, if "show" class append to div, the toast message would be fade in, and after some seconds fade-out.
I have to finished fade-out anim, remove the "show" class.
It is my first code.
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$("toastDiv p").html(msg);
$("toastDiv").addClass("show");
window.timeoutToast = setTimeout(function() {
$("toastDiv").removeClass("show")
}, 3000);
};
I tried call clearTimeoutFunc, and removeClass show class.
but if I clicked multiple fastly, the toastMessage was fade-out, and show in a blink....
Also I tried $("toastDiv").on("animationed webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { ... })
but, when the fade-in anim finished, the function was called.
first, my html code
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
and my css
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
please fix my code...
Edited for JS only solution:
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$(".toastDiv p").html(msg);
$(".toastDiv").addClass("show");
$(".toastDiv").on('animationend', function(event) {
var animation = event.originalEvent.animationName;
if (animation === 'fadeout') {
$(".toastDiv").removeClass("show");
}
});
};
showToast('I am toasted!');
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.toastDiv {
visibility: hidden;
}
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
I want to fade in all boxes at my site . But not like it works already. I want that first the last box fades in and then is moving down by the info box etc. so the boxes appears after each other.
The fadein effect is currently made with:
.content {
-webkit-animation: fadein 3s;
-moz-animation: fadein 3s;
-ms-animation: fadein 3s;
-o-animation: fadein 3s;
animation: fadein 3s;
background: rgba(49,54,59,0.8);
*zoom: 1;
}
#keyframes fadein {
0% { opacity: 0; }
75% { opacity: 0.3; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
It is possible to use jQuery, JavaScript and Css.
I hope you'll ahve a solution.
The jQuery fadeIn function (and most animations) has a "complete" option. You can pass another animation call to it and chain them in order to achieve the proper order.
For instance, you can do:
$( "#box1" ).fadeIn( "slow", function() {
// Animation complete
$( "#box2" ).fadeIn( "slow", function() {
// Animation complete
});
});
You can use animation-delay to delay the animations so the boxes fade one after another.
div {
/* Will cause animation to start after 2 second delay */
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
Best solution:
<script type="text/javascript">
$(document).ready(function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
//nothing
});
});
});
});
</script>
For fading just replace slideDown with fadeIn
You can do this with just css using something like stagger.css
http://digitalfio.github.io/Stagger.css/
Include the css file in your <head>, apply the animation classes to each div then add a timing class to each div in the form of an underscore followed by an incrementing number - e.g.
<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>
so you get something like this: http://output.jsbin.com/cusuz/4
I have an idea for my school project, and I've been searching online how to add this feature in css or java. I just want the title and whole menu to be hidden for around 5 or 6 seconds before appearing on the webpage. I was thinking of using a div to hide these, but I'm not 100% sure if that would work with a menu because of all of its content and links. Any advice or help is appreciated!
Here's a pure CSS example:
DEMO
<div class="content">
<div class="show-after-five">
<h1>Hey! I am here 5 seconds late</h1>
</div>
</div>
.show-after-five {
opacity: 0;
animation-name: fade-in;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;
animation-delay: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: fade-in;
-webkit-animation-iteration-count: infinte;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Let me know if you have any questions.
create a div with display:none style attribute, and put all your menu stuff in there that you want to hide:
<div id="mydiv" style="display:none">
...
</div>
then using jQuery on the bottom of your page:
<script>
setTimeout(function(){
$('#mydiv').fadeIn();
}, 5000);
</script>
This will execute the show method in 5000 milliseconds, or 5 seconds, and will have a nice fade in effect. This is all just based on what you described you wanted.
This is quite easy to do using Javascript (in particular, jQuery).
Place your menu on the DOM:
<div class="menu">Pretend this is a menu</div>
Set its display to none on page load:
.menu {
display: none;
}
Then set a timer when the document is ready to make it appear after 5 seconds:
$(document).ready(function() {
setTimeout(function (event) {
$('.menu').show();
}, 5000);
});
Demo: http://jsfiddle.net/3Grdd/
Yes, it's possible. And there are many ways to do so. Easiest would be jQuery mixed with CSS3.
CSS:
#target_ID{
display: none;
}
jQuery:
$(function() {
$("#target_id").delay(6000).show();
});
You can use the jQuery delay() function to accomplish this.
http://api.jquery.com/delay/
jQuery(document).ready(function ($) {
$('#menu').delay(500).removeClass('.hidden');
});
Instead of removeClass() you can use fadeIn() or any other jQuery transition function.
Some of the other answers suggest using display:none. I would be cautious because that will remove that content from the layout and potentially mess things up depending on how you have the site coded. If you have Jquery loaded, here is a way to do it.
CSS
.menu {opacity:0;}
.title {opacity:0;}
Javscript
setTimeout( function(){
$('.menu , .title').animate({ opacity:1 },3000);
}, 3000);
".menu" and ".title" are your containers. The first '3000' is the animation time of the fade in. The second '3000' is the delay. 3000 = 3 seconds. 5000 = 5 seconds, ect...
When I add the .shown class to my #overlay I would like the opacity to fade in for 2secs, then immediately reverse and fade out for 2 seconds, creating a sort of "flashing" effect.
I tried just removing the class but that doesn't show any animation at all. This is my sample markup/CSS:
HTML:
<div id="outer">
This is some text
<div id="overlay"></div>
</div>
CSS:
#overlay {
...
opacity: 0;
transition: opacity 2s ease-in-out;
}
#overlay.shown {
opacity: 0.3;
}
Attemped JS:
// Wait 2 seconds from page load...
setTimeout(function() {
// Add shown class to trigger animation
document.getElementById("overlay").classList.add("shown");
// Want to remove the class and hoped this would reverse the animation...
// it doesn't
document.getElementById("overlay").classList.remove("shown");
}, 2000);
jsFiddle
use css animation with keyframes
#keyframes myFlash
{
0% {opacity:0;}
50% {opacity:0.3;}
100% {opacity:0;}
}
#-webkit-keyframes myFlash /* Safari and Chrome */
{
0% {opacity:0;}
50% {opacity:0.3;}
100% {opacity:0;}
}
#overlay {
...
opacity: 0;
}
#overlay.shown {
animation:myFlash 2s;
-webkit-animation:myFlash 2s; /* Safari and Chrome */
}
It looks like you could use a second timeout after the first animation completes..
// Wait 2 seconds from page load...
setTimeout(function() {
// Animate Forward
document.getElementById("overlay").classList.add("shown");
setTimeout(function(){
// Animate Back
document.getElementById("overlay").classList.remove("shown");
},2000);
}, 2000);
There are lots of changes i have done to achieve your out put please check following code
Your css
#outer {
width: 100px;
height: 100px;
position: relative;
}
#overlay {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #336699;
opacity: 0;
transition: opacity 2s ease-in-out;
}
#overlay.shown {
display: block;
opacity: 0.5;
}
Your js
setTimeout(function() {
$("#overlay").addClass("shown");
var def = $('#overlay').promise();
def.done(
function () {
$('body').stop().delay(5000).queue(function(){
$("#overlay").removeClass("shown");
});
});
}, 2000);
There was no delay between first and second so how it will show animation which you have done
Please check working demo.....Demo