EasyAnimationFrame.js

Developer
Gianluca Guarini
Size
2,382 Kb
Views
16,192
  1. EasyAnimationFrame.js Previews
  2. EasyAnimationFrame.js HTML Codes
  3. EasyAnimationFrame.js CSS Codes
  4. EasyAnimationFrame.js JS Codes

How do I make an easyanimationframe.js?

Using EasyAnimationFrame.js you can control the framerate of the new requestAnimationFrame API managing easily your loop function. What is a easyanimationframe.js? How do you make a easyanimationframe.js? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

EasyAnimationFrame.js Previews
IQ Test

EasyAnimationFrame.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EasyAnimationFrame.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Using <a target="_blank" href ="https://github.com/GianlucaGuarini/EasyAnimationFrame">EasyAnimationFrame.js</a> you can control the framerate of the new requestAnimationFrame API managing easily your loop function</p>
<div id="demo">0</div> <div style="clear:both;float:left;margin:10px 0 0"> <button id="stop">Stop Animation</button> <button id="start">Start Animation</button> <input style="width:300px" type="text" id="frameDelay" placeholder="Insert a valid number to update the frame delay"/> <p>Current frame delay: <span id="currentFrameDelay"></span></p> <p>Current framerate: <span id="framerate"></span> fps</p> </div> <script src='https://raw.github.com/GianlucaGuarini/EasyAnimationFrame/master/EasyAnimationFrame.js'></script> <script src="js/index.js"></script>
</body>
</html>

EasyAnimationFrame.js - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
body, a { background:#222; color: white; font-family: 'Titillium Web', sans-serif;
}
#demo { color:#fff; font-family: 'Titillium Web', sans-serif; font-size:100px; background:#1a4; float:left;
}

EasyAnimationFrame.js - Script Codes JS Codes

var demo	= document.getElementById('demo'),	start	= document.getElementById('start'),	stop	= document.getElementById('stop'),	frameDelay	= document.getElementById('frameDelay'),	framerate	= document.getElementById('framerate'),	currentFrameDelay	= document.getElementById('currentFrameDelay'),	i	= 0,	animator;
var animate = function () {	i ++;	demo.innerHTML = i;	demo.style.paddingLeft = i + 'px';	framerate.innerHTML = animator.getFramerate();
};
window.onload = function () {	// callback , DOM element to animate , FrameDelay	animator = new EasyAnimationFrame( animate, demo , 150);	//animator.startAnimation(); // autostart	// Ui controllers	stop.onclick = animator.clearAnimation;	start.onclick = animator.startAnimation;	currentFrameDelay.innerHTML = animator.getFrameDelay();	frameDelay.onblur = function () {	animator.updateFrameDelay(this.value);	currentFrameDelay.innerHTML = animator.getFrameDelay();	};
};
EasyAnimationFrame.js - Script Codes
EasyAnimationFrame.js - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3
Size 2,382 Kb
Views 16,192
Do you need developer help for EasyAnimationFrame.js?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
Tocca.js
A Pen by Gianluca Guarini
The 3D Worrying Cubes
Riot simple movies live search
Appletv
CSS3 Breathing Particles
The Milk Glass
Site under construction
Find your mouse cursor
Drunk on Google Maps
Create amazing captions 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!