Canvas Parallax Mountains
How do I make an canvas parallax mountains?
This pen is a modification of my previous Canvas Parallax Skyline pen, only with mountains this time! This one isn't totally optimized yet though. Still having trouble finding exactly when I can reset a point to the end of the canvas, with the least runoff on the edges. Right now I am overshooting both sides a little bit too much.. What is a canvas parallax mountains? How do you make a canvas parallax mountains? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.
Canvas Parallax Mountains - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Parallax Mountains</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ canvas { background: linear-gradient( hsl(200, 50%, 80%) 0%, hsl(200, 30%, 95%) 75%) ; display: block;
}
div { background: url(http://jackrugile.com/images/misc/skyline-texture.png); height: 100%; left: 0; position: fixed; top: 0; width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div></div>
<!--
Canvas Parallax Mountains
-----------------------
Move your mouse to change speed and move up and down.
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Canvas Parallax Mountains - Script Codes CSS Codes
canvas { background: linear-gradient( hsl(200, 50%, 80%) 0%, hsl(200, 30%, 95%) 75%) ; display: block;
}
div { background: url(http://jackrugile.com/images/misc/skyline-texture.png); height: 100%; left: 0; position: fixed; top: 0; width: 100%;
}
Canvas Parallax Mountains - Script Codes JS Codes
(function() { var Mountain, MountainRange, dt, mountainRanges, sketch; sketch = Sketch.create(); sketch.mouse.x = sketch.width / 10; sketch.mouse.y = sketch.height; mountainRanges = []; dt = 1; Mountain = function(config) { return this.reset(config); }; Mountain.prototype.reset = function(config) { this.layer = config.layer; this.x = config.x; this.y = config.y; this.width = config.width; this.height = config.height; return this.color = config.color; }; MountainRange = function(config) { this.x = 0; this.mountains = []; this.layer = config.layer; this.width = { min: config.width.min, max: config.width.max }; this.height = { min: config.height.min, max: config.height.max }; this.speed = config.speed; this.color = config.color; this.populate(); return this; }; MountainRange.prototype.populate = function() { var newHeight, newWidth, results, totalWidth; totalWidth = 0; results = []; while (totalWidth <= sketch.width + (this.width.max * 4)) { newWidth = round(random(this.width.min, this.width.max)); newHeight = round(random(this.height.min, this.height.max)); this.mountains.push(new Mountain({ layer: this.layer, x: this.mountains.length === 0 ? 0 : this.mountains[this.mountains.length - 1].x + this.mountains[this.mountains.length - 1].width, y: sketch.height - newHeight, width: newWidth, height: newHeight, color: this.color })); results.push(totalWidth += newWidth); } return results; }; MountainRange.prototype.update = function() { var firstMountain, lastMountain, newHeight, newWidth; this.x -= (sketch.mouse.x * this.speed) * dt; firstMountain = this.mountains[0]; if (firstMountain.width + firstMountain.x + this.x < -this.width.max) { newWidth = round(random(this.width.min, this.width.max)); newHeight = round(random(this.height.min, this.height.max)); lastMountain = this.mountains[this.mountains.length - 1]; firstMountain.reset({ layer: this.layer, x: lastMountain.x + lastMountain.width, y: sketch.height - newHeight, width: newWidth, height: newHeight, color: this.color }); return this.mountains.push(this.mountains.shift()); } }; MountainRange.prototype.render = function() { var c, d, i, j, pointCount, ref; sketch.save(); sketch.translate(this.x, (sketch.height - sketch.mouse.y) / 20 * this.layer); sketch.beginPath(); pointCount = this.mountains.length; sketch.moveTo(this.mountains[0].x, this.mountains[0].y); for (i = j = 0, ref = pointCount - 2; j <= ref; i = j += 1) { c = (this.mountains[i].x + this.mountains[i + 1].x) / 2; d = (this.mountains[i].y + this.mountains[i + 1].y) / 2; sketch.quadraticCurveTo(this.mountains[i].x, this.mountains[i].y, c, d); } sketch.lineTo(sketch.width - this.x, sketch.height); sketch.lineTo(0 - this.x, sketch.height); sketch.closePath(); sketch.fillStyle = this.color; sketch.fill(); return sketch.restore(); }; sketch.setup = function() { var i, results; i = 5; results = []; while (i--) { results.push(mountainRanges.push(new MountainRange({ layer: i + 1, width: { min: (i + 1) * 50, max: (i + 1) * 70 }, height: { min: 200 - (i * 40), max: 300 - (i * 40) }, speed: (i + 1) * .003, color: 'hsl( 120, ' + (((i + 1) * 1) + 10) + '%, ' + (75 - (i * 13)) + '% )' }))); } return results; }; sketch.clear = function() { return sketch.clearRect(0, 0, sketch.width, sketch.height); }; sketch.update = function() { var i, results; dt = sketch.dt < .1 ? .1 : sketch.dt / 16; dt = dt > 5 ? 5 : dt; i = mountainRanges.length; results = []; while (i--) { results.push(mountainRanges[i].update(i)); } return results; }; sketch.draw = function() { var i, results; i = mountainRanges.length; results = []; while (i--) { results.push(mountainRanges[i].render(i)); } return results; }; $(window).on('mousemove', function(e) { sketch.mouse.x = e.pageX; return sketch.mouse.y = e.pageY; });
}).call(this);
Developer | Jack Rugile |
Username | jackrugile |
Uploaded | August 11, 2022 |
Rating | 4.5 |
Size | 4,573 Kb |
Views | 38,456 |
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 |
Glitchy Loading Indicator | 2,745 Kb |
Rainbow Grid | 2,760 Kb |
Scroll Progress as Canvas to Favicon | 2,407 Kb |
Canvas Sparkle Light Trail | 3,618 Kb |
Rainbow Loader | 2,022 Kb |
Canvas Bokeh Generation | 2,935 Kb |
Snake Game - CSS Renderer | 7,412 Kb |
Bubble Sketch.js Test | 3,437 Kb |
Light Loader | 2,738 Kb |
Rainbow Firestorm | 3,052 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 |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Loading animation with css | Icebob | 2,947 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Contact | GanNichiHa | 2,514 Kb |
Experiment | Toddmoy | 2,849 Kb |
SVG Modified with Query String | Jnowland | 1,663 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
Boxes | H3l1um | 2,563 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 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!