In this video I’m going show you to animate an image across the screen just using CSS. It’s almost Halloween so lets do something fun and have a scary ghost float around the screen!!
The good news this can all be done using the free version of Elementor!
**Bonus Content** In the Part 3: I will show you how to create a button to toggle the animation!
Timestamps:
- 0:00 Introduction
- 1:20 Part 1: Backend Setup & Simple Animation
- 13:35 Part 2: Advanced CSS Animation
- 18:35 Part 3: JavaScript Toggle Animation Button
CSS transform Property Link:
https://www.w3schools.com/cssref/css3_pr_transform.asp
Fun with Viewport Units Link:
https://css-tricks.com/fun-viewport-units/
CSS Animation Inspiration Credit:
https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen
Part 1 CSS Code:
.ghost > *{
animation: fly 5s linear infinite;
top: 0;
left: 0;
position: fixed;
z-index: 999;
pointer-events: none;
}
@keyframes fly {
0%{
transform: translate(0,110vh);opacity: .50;
}
50%{
transform: translate(110vw,0);opacity: 1;
}
100%{
transform: translate(0,110vh);opacity: .50;
}
}
Part 2 CSS Code:
.ghost > *{
animation: fly 25s linear infinite;
top: 0;
left: 0;
position: fixed;
z-index: 999;
pointer-events: none;
}
@keyframes fly {
0% {
transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
}
12.5% {
transform: translate(120vw,-120%) rotateZ(20deg);
}
25% {
transform: translate(-200%,50vh) scale(1.75) rotateZ(-20deg);
}
37.5% {
transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5;
}
50% {
transform: translate(100vw,50vh) rotateZ(0deg);
}
62.5% {
transform: translate(20vw,100vh) rotateZ(20deg);
}
75% {
transform: translate(200%,100vh) rotateZ(20deg);opacity: .25;
}
87.5% {
transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg);
}
100% {
transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
}
}
Part 3 JavaScript Code:
<script type="text/javascript">
function ShowHideDiv(btnGhost) {
var GhostStyle = document.getElementById("ghostanimation");
if (btnGhost.value == "Hide Ghost") {
GhostStyle.style.display = "none";
btnGhost.value = "Play Ghost";
} else {
GhostStyle.style.display = "block";
btnGhost.value = "Hide Ghost";
}
}
</script>
<input id="btnGhost" type="button" value="Hide Ghost" onclick="ShowHideDiv(this)" />
Music in this video
Gathering Darkness by Kevin MacLeod is licensed under a Creative Commons Attribution 4.0 license.
https://creativecommons.org/licenses/by/4.0/
Source:
http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100849
Artist:
http://incompetech.com/
