JavaScript animation with setInterval

Developer
Mattia A Fritz
Size
1,982 Kb
Views
34,408
  1. JavaScript animation with setInterval Previews
  2. JavaScript animation with setInterval HTML Codes
  3. JavaScript animation with setInterval CSS Codes
  4. JavaScript animation with setInterval JS Codes

How do I make an javascript animation with setinterval?

What is a javascript animation with setinterval? How do you make a javascript animation with setinterval? This script and codes were developed by Mattia A Fritz on 26 August 2022, Friday.

JavaScript animation with setInterval Previews
IQ Test

JavaScript animation with setInterval - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript animation with setInterval</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>JavaScript animation with setInterval()</h1>
<p> <label>Choose de "frame rate" from the list:</label> <select id="frameRate"> <option value="5">5 fps</option> <option value="15">15 fps</option> <option value="24" selected>24 fps</option> <option value="40">40 fps</option> <option value="60">60 fps</option> </select>
</p>
<p> <label>Choose the distance covered in every frame:</label> <select id="distance"> <option value="1">1px</option> <option value="5" selected>5px</option> <option value="10">10px</option> <option value="25">25px</option> <option value="50">50px</option> </select>
</p>
<div id="box"></div> <script src="js/index.js"></script>
</body>
</html>

JavaScript animation with setInterval - Script Codes CSS Codes

#box { width: 50px; height: 50px; border: 1px solid #000; background-color: darkorange;
}

JavaScript animation with setInterval - Script Codes JS Codes

var box = document.querySelector("#box");
var frameRate = document.querySelector("#frameRate");
var distance = document.querySelector("#distance");
var int;
function animate() { var margin = 0; int = setInterval(function() { margin = (margin > window.innerWidth ? 0 : margin + Number(distance.value)); box.style.marginLeft = margin + "px"; }, 1000 / Number(frameRate.value))
}
animate();
function reset() { clearInterval(int); animate();
}
frameRate.addEventListener("change", reset);
distance.addEvenetListener("change", reset);
JavaScript animation with setInterval - Script Codes
JavaScript animation with setInterval - Script Codes
Home Page Home
Developer Mattia A Fritz
Username mafritz
Uploaded August 26, 2022
Rating 3
Size 1,982 Kb
Views 34,408
Do you need developer help for JavaScript animation with setInterval?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mattia A Fritz (mafritz) Script Codes
Name
Utiliser dynamiquement des classes avec JavaScript
Three.ja animation example
JavaScript animation with requestAnimationFrame
P5.js example redefine draw function
Angular double binding example
Simple animation SVG avec JavaScript
CSS animation
P5.js example
P5.js example with button
Different size of columns according to screen size
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!