#codevember #9 Parallax Squares

Developer
Johan Karlsson
Size
2,370 Kb
Views
50,600
  1. #codevember #9 Parallax Squares Previews
  2. #codevember #9 Parallax Squares HTML Codes
  3. #codevember #9 Parallax Squares CSS Codes
  4. #codevember #9 Parallax Squares JS Codes

How do I make an #codevember #9 parallax squares?

What is a #codevember #9 parallax squares? How do you make a #codevember #9 parallax squares? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.

#codevember #9 Parallax Squares Previews
IQ Test

#codevember #9 Parallax Squares - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember #9 Parallax Squares</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<h3 id="instructions"> Move mouse or touch
</h3> <script src="js/index.js"></script>
</body>
</html>

#codevember #9 Parallax Squares - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
* { font-family: 'Noto Sans', sans-serif;
}
html, body { background-color: beige; margin: 0;
}
canvas { display: block;
}
#instructions { color: #333; position: fixed; top: 0; margin-left: 20px;
}

#codevember #9 Parallax Squares - Script Codes JS Codes

/* Johan Karlsson (DonKarlssonSan) All my #codevember Pens: http://codepen.io/collection/XwMkWm/
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var min = Math.min(width, height);
ctx.fillStyle = "rgba(33, 33, 33, 0.3)";
var angle = 0;
var x = 0, y = 0;
function draw() { drawRect(0.1); drawRect(0.15); drawRect(0.2); drawRect(0.25); drawRect(0.3); drawRect(0.35); drawRect(0.4);
}
function drawRect(factor) { ctx.save(); // The offsets become 0 when x and y are center // of screen. // Bigger factor => smaller offset var xOffset = (0.5-x/width)*50/factor; var yOffset = (0.5-y/height)*50/factor; ctx.translate(width/2 + xOffset, height/2 + yOffset); ctx.rotate(angle/factor*0.05); ctx.fillRect(-min*(0.5-factor), -min*(0.5-factor), min*(1-factor*2), min*(1-factor*2)); ctx.restore();
}
function onMove(e) { // Get position from touch or mouse x = e.touches ? e.touches[0].clientX : e.clientX; y = e.touches ? e.touches[0].clientY : e.clientY; // x/width is between 0 and 1 // 0.5 - x/width is between -0.5 and 0.5, so that // we rotate both clockwise and counterclockwise angle = 0.5 - x/width;
}
canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("touchmove", onMove);
function animate() { ctx.clearRect(0, 0, width, height); requestAnimationFrame(animate); draw();
}
animate();
#codevember #9 Parallax Squares - Script Codes
#codevember #9 Parallax Squares - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 26, 2022
Rating 4.5
Size 2,370 Kb
Views 50,600
Do you need developer help for #codevember #9 Parallax Squares?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Phone Case Pattern Animation
Cash by Brownian Motion
Rainbow 6-fold Pentille
Fireflies
Lissajous x Lissajous
Apply Filter Effects to Music
Particle Text
Circuit Board Warper
Random Fractal
Diffusion-Limited Aggregation - Line
Create amazing video scripts 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!