Activate animation when in viewport - javascript

I am trying to use animate to make images transition from zero opacity to full opacity. The keyframes animation code i have used works but i want to delay the start until the image is in view.
I have tried several JS codes which have not worked.
HTML
<div class="item2">
<img src="images/winston-chen-qg8TGmBNdeY-unsplash.jpg" width="950" height="700" alt="wintson cheng unsplash" class="img">
</div>
CSS
#keyframes animate {
from {opacity: 0;}
to {opacity: 1;}
}
.img {
width: 100vw;
height: auto;
animation-name: animate;
animation-duration: 10s;
animation-timing-function: ease-in;
}


You could do it easily with jQuery.
CSS:
img { opacity: 0; } /* this sets the opacity before it comes in so there isn't a jump */
.img {
width: 100vw;
height: auto;
}
.fadein {
animation: animate 10s forwards;
}
jQuery:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Then in scripts file:
$(function() {
$(window).scroll(function() {
var $img = $(".img");
$img.each(function() {
var $y = $(document).scrollTop(),
$wh = $(window).height(),
$t = $(this).offset().top - $wh;
if ($y > $t) {
$(this).addClass("fadein");
}
});
});
});
Every time the .img tag comes into view it adds the fadein class and fades in.

Related

CSS animation only display on first slide image

I want to make few images displaying as slides with fadeIn effect in css. Everything works fine, images are displayed in 3s period with setInterval javascript method, but only first image displays with fadeIn animation.
.slide {
position: absolute;
height: 100vh;
width: 66vw;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">
There is only one jpg added to HTML and javascript code is written to replace file path from
<img class="slide" src="1.JPG">
to "2.jpg", "3.jpg" etc
Only first image has animation, everything displayed later is without animation.
When I check console, all next images still have .slide class and all its properties position/width/height/animation, but they display without animation.
Any ideas ?

Basically, you need to trigger the css animation every time you change the src. You can do it by removing the element class, triggering a DOM reflow, and adding the class again. But you should be careful because triggering reflow can be an expensive operation. Read more about it here.
const images = [
"https://via.placeholder.com/300?text=image1",
"https://via.placeholder.com/300?text=image2",
"https://via.placeholder.com/300?text=image3",
];
const img = document.querySelector(".slide");
let imageIndex = 0;
const imageInterval = setInterval(() => {
imageIndex++;
if (imageIndex >= images.length) {
clearInterval(imageInterval);
} else {
img.src = images[imageIndex];
img.classList.remove("slide");
void img.offsetWidth; // trigger a DOM reflow
img.classList.add("slide");
}
}, 3000);
.slide {
position: absolute;
height: 100vh;
width: 66vw;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<img class="slide" src="https://via.placeholder.com/300?text=image1">

Hard to tell what exactly you want but with pure CSS perhaps something like this
.slide {
position: absolute;
opacity: 0;
height: 100vh;
width: 66vw;
animation: fadeIn 1s forwards;
}
.two {
animation-delay: 3s;
}
.three {
animation-delay: 6s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">
<img class="slide two" src="https://compote.slate.com/images/f063a07e-e5ab-4e04-8093-281d0a28ebe8.jpeg">
<img class="slide three" src="https://i.ytimg.com/vi/nWLUdoK5fSs/maxresdefault.jpg">

How do I get multiple css animations to play in javascript?

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!

How to play animation on div with javascript

Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?

Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'

Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>

You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>

.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)

You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}

There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;

Javascript: Change <img> in a loop with fade effect

I am making an photography website and i am stuck. I am looking for somebody to rescue me.
My problem is the next one : I wanna translate the next code from CSS into javascript.
img#image {
margin: 0px;
background-repeat: none;
background-size: 100% 100%;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
I have'd made until now :
function Rotate(randomImage) {
document.getElementById('image').src = randomImage;
document.getElementById('image').setAttribute("style","height: 100%; width: 100%; position:relative; z-index:-1; -webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;");
}
I need to add #-webkit-keyframes fade and #keyframes fade to my javascript code. Thank you !

There are better ways then using JS, however you can use the following :
<div id ="myImg" style="width:100px;height:100px;background:blue;"></div>
<script>
function fadeIn(from,to,duration) {
var elem = document.getElementById("myImg");
var step = (to-from)/duration;
var opacity = from;
var id = setInterval(frameFade, 5);
function frameFade() {
if (opacity >= to) {
clearInterval(id);
} else {
opacity+=step;
elem.style.opacity = opacity;
elem.innerHtml = opacity;
}
}
}
fadeIn(0.4,1.0,500);
</script>
plunker example

If you need a Dom animation use like this
document.getElementById('image').animation='fade 1.5s'
document.getElementById('image').WebkitAnimation='fade 1.5s'
For changing more number of style Better use with classList.add() for pure javascript
function Rotate(randomImage) {
document.getElementById('image').src = randomImage;
document.getElementById('image').classList.add('animation_class')
}
For jquery addClass()
function Rotate(randomImage){
$('img').attr('src',randomImage).addClass('animation_class')
}
Css
.animation_class {
height: 100%;
width: 100%;
position: relative;
z-index: -1;
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

Immediately reverse CSS3 animation

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

Categories

Resources