Material Boxes Animation
How do I make an material boxes animation?
What is a material boxes animation? How do you make a material boxes animation? This script and codes were developed by Anwesh Mishra on 08 January 2023, Sunday.
Material Boxes Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Boxes Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c1" width="500px" height="500px">
</canvas> <script src="js/index.js"></script>
</body>
</html>
Material Boxes Animation - Script Codes CSS Codes
#c1 { position:absolute; left:25%; top:10%; border:1px dotted teal;
}
Material Boxes Animation - Script Codes JS Codes
var c1 = document.getElementById('c1')
const size = Math.max(window.innerWidth,window.innerHeight)
c1.width = window.innerWidth
c1.height = window.innerHeight
var context = c1.getContext('2d')
var colors = ["#673AB7","#42A5F5","#e53935","#1DE9B6","#009688"]
class MaterialBox { constructor(color) { this.x = c1.width/2 this.y = c1.height/2 this.w = c1.width/2 this.h = c1.width/2 this.scale = 0 this.dir = 0 this.rot = 0 this.color = color } draw() { context.save() context.translate(this.x,this.y) context.rotate(this.rot*Math.PI/180) context.scale(this.scale,this.scale) context.fillStyle = this.color context.fillRect(-this.w/2,-this.h/2,this.w,this.h) context.restore() } update() { this.rot+=36*this.dir this.scale+=0.1*this.dir if((this.rot >=360 && this.scale>=1) || (this.rot<=0 && this.scale<=0)) { this.dir = 0 this.rot -= this.rot%360 if(this.scale > 1) { this.scale = 1 } if(this.scale < 0) { this.scale = 0 } } } stopped() { return this.dir == 0 } startMoving(dir) { this.dir = dir }
}
var materialBoxes = colors.map((color)=>new MaterialBox(color))
var index = 0
var dir = 1
var startMoving = function() { if(materialBoxes.length > 0 && index<materialBoxes.length){ materialBoxes[index].startMoving(dir) }
}
function draw() { context.clearRect(0,0,1000,600) materialBoxes.forEach((materialBox)=>materialBox.draw()) if(materialBoxes.length>0 && index<materialBoxes.length) { materialBoxes[index].update() if(materialBoxes[index].stopped()) { index+=dir if(index < 0) { index = 0 dir = 1 } if(index >= materialBoxes.length) { dir = -1 index = materialBoxes.length-1 } startMoving() } }
}
startMoving()
setInterval(draw,110)
Developer | Anwesh Mishra |
Username | Anwesh43 |
Uploaded | January 08, 2023 |
Rating | 3 |
Size | 2,257 Kb |
Views | 10,120 |
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!
Name | Size |
Fractal Spirograph | 2,501 Kb |
SeeSaw | 2,195 Kb |
Clapperboard | 2,540 Kb |
SettingButton | 2,255 Kb |
Jumping Triangles | 2,350 Kb |
MovingBall | 2,105 Kb |
EllipticalSwitch | 2,077 Kb |
A Pen by Anwesh Mishra | 1,524 Kb |
Html5CanvasPingPong | 2,033 Kb |
TumblingPins | 2,187 Kb |
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!
Name | Username | Size |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Website Concept | Sagoza | 3,104 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!