MDesigns Animated Background
How do I make an mdesigns animated background?
Animated background to be used as a hero image on my personal web site and on CodePen's header.. What is a mdesigns animated background? How do you make a mdesigns animated background? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.
MDesigns Animated Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MDesigns Animated Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
MDesigns Animated Background - Script Codes CSS Codes
html, body { margin: 0; padding: 0; height: 100%; background-color: #224154; text-align: center; overflow: hidden;
}
html:after, body:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-foreground.png"); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; z-index: 9;
}
MDesigns Animated Background - Script Codes JS Codes
// creates required vars
var width, height, nParticles, particles, bck, fbck;
function preload() { bck = loadImage('http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-background.png'); //fbck = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-foreground.png');
}
function setup() { width = windowWidth; height = windowHeight; nParticles = 500; // this is how many stars you want to display particles = []; particlesPosition = [];//not in use yet createCanvas(width, height);
}
function draw() { image( bck, 0, 0,width,height ); while ( particles.length < nParticles ) { star = new particle(); particles.push(star); } for (var i = 0; i < particles.length; i++) { particles[i].update(); if (particles[i].x > width || particles[i].y > height || particles[i].x < 0 || particles[i].y < 0 ) { particles.splice(i,1); }
} //image( fbck, 0, 0,width,height );
}
function particle() { this.radius = random(1,10); this.alpha = random(100,150); this.x = random(width,0); this.y = height; this.ySpeed = random(0,-3); this.xSpeed = random(0.3,-0.3); this.update = function() { noStroke(); fill(102,183,255, this.alpha); ellipse(this.x, this.y, this.radius, this.radius); this.alpha = this.alpha-random(0.2,1); this.x = this.x +this.xSpeed; this.y = this.y + this.ySpeed; }
};
function windowResized() { //updates width and height only when you resize the window width = windowWidth; height = windowHeight; resizeCanvas(width, height);
};
Developer | Mario Duarte |
Username | MarioDesigns |
Uploaded | August 04, 2022 |
Rating | 3.5 |
Size | 2,888 Kb |
Views | 80,960 |
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 |
Hero Animated Canvas Background | 6,714 Kb |
Image Comparison Slider | 7,574 Kb |
Relative Mouse Position | 3,539 Kb |
CSS 3D loading | 2,261 Kb |
Diamond - Pure CSS | 3,300 Kb |
Menu Animation - push in | 4,401 Kb |
Floating Particles | 13,587 Kb |
The Dark - CSS animated background | 11,432 Kb |
Colour Game | 0 Kb |
Hamburger Menu Animation | 4,611 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 |
STIKHOI | Denmch | 7,122 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Dice | Fraina | 5,026 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 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!