I don’t know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.
I need to call/trigger CSS Animation when the user scrolls the page.
function start() { document.getElementById('logo').style.animation = "anim 2s 2s forward"; document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward"; }
* { margin: 0px; } #logo { position: fixed; top: 200px; height: 200px; width: 1000px; left: 5%; z-index: 4; opacity: 0.8; } #earthlogo { position: fixed; top: 200px; height: 120px; align-self: center; left: 5%; margin-left: 870px; margin-top: 60px; z-index: 4; opacity: 0.9; } @keyframes anim { 50% { filter: blur(10px); transform: rotate(-15deg); box-shadow: 0px 0px 10px 3px; } 100% { height: 100px; width: 500px; left: 10px; top: 10px; box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 1, 0.3); opacity: 0.7; } } @keyframes anim2 { 50% { filter: blur(40px); transform: rotate(-15deg); } 100% { height: 60px; width: 60px; left: 10px; top: 10px; margin-left: 435px; margin-top: 30px; opacity: 0.8; } } #backstar { position: fixed; width: 100%; z-index: 1; } #earth { position: absolute; width: 100%; z-index: 2; top: 300px; }
<img src="logo.png" id="logo" onclick="start();"> <img src="earthlogo.gif" id="earthlogo" onscroll="start();"> <img src="earth.png" id="earth"> <img src="stars.jpg" id="backstar">
Advertisement
Answer
The simplest method to trigger CSS animations is by adding or removing a class – how to do this with pure Javascript you can read here:
How do I add a class to a given element?
If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass
/ removeClass
.
All you have to do then is set a transition to a given element like this:
.el { width:10px; transition: all 2s; }
And then change its state if the element has a class:
.el.addedclass { width:20px; }
Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.
There is a similar question here: Trigger a CSS keyframe animation via scroll