Vanilla JavaScript Effects - JavaScript Animation With Web Animation API
YouTube Tutorial
Run on codepen
Download resources
tree , field , cloud 1 , cloud 2 , fog 1 , fog 2 , way , car
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<!-- <div class="tree" ><img src="img/tree.png" alt=""></div>
<div class="tree" ><img src="img/tree.png" alt=""></div> -->
<div class="field_tree">
<div class="tree">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
</div>
<div class="field"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/field.png"></div>
</div>
<div class="clouds">
<div class="cloud_one" id="cloud_one"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/cloud_1.png" alt=""></div>
<div class="cloud_two" id="cloud_two"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/cloud_2.png" alt=""></div>
</div>
<div class="fogs">
<div class="fog_one"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog.png"></div>
<div class="fog_two">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog_2.png" id="fog_one">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog_2.png" id="fog_two">
</div>
</div>
<div class="car_way">
<div class="way">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/way.png">
</div>
<div class="car" id="car">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/car.png" alt="">
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<!-- <div class="tree" ><img src="img/tree.png" alt=""></div>
<div class="tree" ><img src="img/tree.png" alt=""></div> -->
<div class="field_tree">
<div class="tree">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/tree.png">
</div>
<div class="field"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/field.png"></div>
</div>
<div class="clouds">
<div class="cloud_one" id="cloud_one"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/cloud_1.png" alt=""></div>
<div class="cloud_two" id="cloud_two"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/cloud_2.png" alt=""></div>
</div>
<div class="fogs">
<div class="fog_one"><img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog.png"></div>
<div class="fog_two">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog_2.png" id="fog_one">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/fog_2.png" id="fog_two">
</div>
</div>
<div class="car_way">
<div class="way">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/way.png">
</div>
<div class="car" id="car">
<img src="https://raw.githubusercontent.com/MdSamsuzzohaShayon/Javascript-basic-referance/9_web_animation_js/img/car.png" alt="">
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
body{
background: rgb(52, 112, 224);
height: 100vh;
width: 100vw;
overflow: hidden;
}
.wrapper{
width: 100%;
/* height: 100vh;
width: 100vw; */
overflow: hidden;
}
.field_tree{
}
.tree img{
position: relative;
/* height: 600px; */
left: 200px;
top: 300px;
}
.field img{
/* position: relative; */
/* bottom: 300px; */
width: 100%;
}
.clouds{
position: absolute;
top: 0;
}
.cloud_one img{
width: 700px;
position: relative;
left: 200px;;
}
.cloud_two img{
position: relative;
top: -300px;
left: 1000px;
width: 500px;
}
.fogs{
position: absolute;
bottom: 0;
}
.fog_one img{
position: relative;
bottom: -850px;
}
.fog_two img{
width: 800px;
position: relative;
bottom: -100px;
}
.car_way{
position: absolute;
}
.way img{
position: relative;
bottom: 260px;
width: 100vw;
height: 200px
}
.car img{
position: relative;
bottom: 450px;
width: 350px;
}
margin: 0;
padding: 0;
}
body{
background: rgb(52, 112, 224);
height: 100vh;
width: 100vw;
overflow: hidden;
}
.wrapper{
width: 100%;
/* height: 100vh;
width: 100vw; */
overflow: hidden;
}
.field_tree{
}
.tree img{
position: relative;
/* height: 600px; */
left: 200px;
top: 300px;
}
.field img{
/* position: relative; */
/* bottom: 300px; */
width: 100%;
}
.clouds{
position: absolute;
top: 0;
}
.cloud_one img{
width: 700px;
position: relative;
left: 200px;;
}
.cloud_two img{
position: relative;
top: -300px;
left: 1000px;
width: 500px;
}
.fogs{
position: absolute;
bottom: 0;
}
.fog_one img{
position: relative;
bottom: -850px;
}
.fog_two img{
width: 800px;
position: relative;
bottom: -100px;
}
.car_way{
position: absolute;
}
.way img{
position: relative;
bottom: 260px;
width: 100vw;
height: 200px
}
.car img{
position: relative;
bottom: 450px;
width: 350px;
}
main.js
// https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
const car = document.getElementById("car");
const cloud_one = document.getElementById("cloud_one");
const cloud_two = document.getElementById("cloud_two");
const fog_one = document.getElementById("fog_one");
const fog_two = document.getElementById("fog_two");
// CAR ANIMATION
class CarAnimate {
// car = document.getElementById("car");
constructor(tXStart, tXStop, tYStart, tYStop, startOpacity, stopOpacity) {
this.tXStart = tXStart;
this.tXStop = tXStop;
this.tYStart = tYStart;
this.tYStop = tYStop;
this.startOpacity = startOpacity;
this.stopOpacity = stopOpacity;
}
start(id, dur, ite) {
let carRightKeyframes = new KeyframeEffect(
id,
[{
// transform: 'translateY(' + this.tYStart + '%)',
transform: 'translateX(' + this.tXStart + '%) translateY('+this.tYStart+'%)',
opacity: this.startOpacity
},
{
// transform: 'translateY(' + this.tYStop + '%)',
transform: 'translateX(' + this.tXStop+ '%) translateY('+this.tYStop+'%)',
opacity: this.stopOpacity
}
], {
duration: dur,
fill: 'forwards',
iterations: ite
},
);
let carRightAnimation = new Animation(carRightKeyframes, document.timeline);
carRightAnimation.play(dur, ite);
}
}
// CAR ANIMATION
const carAnimate = new CarAnimate('0', '100', '0', '0', 1, 1);
carAnimate.start(car, 2000, Infinity);
// CLOUDS ANIMATION
const cloudAnimate = new CarAnimate('0', '100', '0', '0', 0.2, 1);
cloudAnimate.start(cloud_one, 10000, Infinity);
const cloud2Animate = new CarAnimate('0', '130', '0', '0', 0.2, 1);
cloud2Animate.start(cloud_two, 15000, Infinity);
// FOG ANIMATION
const fogAnimate = new CarAnimate('0', '150', '0', '-10', 0, 1);
fogAnimate.start(fog_one, 10000, Infinity);
const fog2Animate = new CarAnimate('0', '-40', '0', '-20', 1, 0.5);
fog2Animate.start(fog_two, 5000, Infinity);
const car = document.getElementById("car");
const cloud_one = document.getElementById("cloud_one");
const cloud_two = document.getElementById("cloud_two");
const fog_one = document.getElementById("fog_one");
const fog_two = document.getElementById("fog_two");
// CAR ANIMATION
class CarAnimate {
// car = document.getElementById("car");
constructor(tXStart, tXStop, tYStart, tYStop, startOpacity, stopOpacity) {
this.tXStart = tXStart;
this.tXStop = tXStop;
this.tYStart = tYStart;
this.tYStop = tYStop;
this.startOpacity = startOpacity;
this.stopOpacity = stopOpacity;
}
start(id, dur, ite) {
let carRightKeyframes = new KeyframeEffect(
id,
[{
// transform: 'translateY(' + this.tYStart + '%)',
transform: 'translateX(' + this.tXStart + '%) translateY('+this.tYStart+'%)',
opacity: this.startOpacity
},
{
// transform: 'translateY(' + this.tYStop + '%)',
transform: 'translateX(' + this.tXStop+ '%) translateY('+this.tYStop+'%)',
opacity: this.stopOpacity
}
], {
duration: dur,
fill: 'forwards',
iterations: ite
},
);
let carRightAnimation = new Animation(carRightKeyframes, document.timeline);
carRightAnimation.play(dur, ite);
}
}
// CAR ANIMATION
const carAnimate = new CarAnimate('0', '100', '0', '0', 1, 1);
carAnimate.start(car, 2000, Infinity);
// CLOUDS ANIMATION
const cloudAnimate = new CarAnimate('0', '100', '0', '0', 0.2, 1);
cloudAnimate.start(cloud_one, 10000, Infinity);
const cloud2Animate = new CarAnimate('0', '130', '0', '0', 0.2, 1);
cloud2Animate.start(cloud_two, 15000, Infinity);
// FOG ANIMATION
const fogAnimate = new CarAnimate('0', '150', '0', '-10', 0, 1);
fogAnimate.start(fog_one, 10000, Infinity);
const fog2Animate = new CarAnimate('0', '-40', '0', '-20', 1, 0.5);
fog2Animate.start(fog_two, 5000, Infinity);
No comments: