Dynamic Hero Image

Developer
Size
2,435 Kb
Views
10,120

How do I make an dynamic hero image?

Using HTML5 Canvas to create a dynamic hero image. What is a dynamic hero image? How do you make a dynamic hero image? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.

Dynamic Hero Image Previews

Dynamic Hero Image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Hero Image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="header"></canvas> <script src="js/index.js"></script>
</body>
</html>

Dynamic Hero Image - Script Codes CSS Codes

#header { width: 100%; height: 300px; background: url(http://spark.lamplighter.io/img/head_bg.png) center center no-repeat; background-size: cover;
}
body { margin: 0px; background: #FFF;
}

Dynamic Hero Image - Script Codes JS Codes

var colors = {	'green': '#81bf06',	'yellow': '#ffc50c',	'red': '#ff0808',	};	// Set the fill color for under the graph	var fillColor = '#FFF';	// Set our line width	var lineWidth = 4;	// How many points in the array?	var pointCount	= 20;
/** END CONFIG VARIABLES **/
// Point Array
var point	= [];	generateGraph();	setInterval(function() {	shiftGraph();	}, 1000/20);
function shiftGraph() {	var pageWidth = document.width ? document.width : document.documentElement.clientWidth;	canvas.width	= pageWidth;	// Draw the area under the graph	for (var color in colors) {	for (var i = 1; i < pointCount; i++) {	if (point[i][color] > 450) {	point[i][color] = point[i][color] - 1;	} else if (point[i][color] < 450) {	point[i][color] = point[i][color] + 1;	} else {	point[i][color] = Math.floor(Math.random() * 2) ? point[i][color] + Math.floor(Math.random() * 50) : point[i][color] - Math.floor(Math.random() * 50);	}	if (point[i][color] > 500) { point[i][color] = 500; }	if (point[i][color] < 400) { point[i][color] = 400; }	context.lineTo(pageWidth * i/pointCount, point[i][color]);	}	context.lineTo(pageWidth, 450);	context.lineTo(pageWidth, 500);	context.lineTo(0, 500);	context.lineTo(0, 450);	}	// Set fill color	context.fillStyle = fillColor;	context.fill();	// Set our line width	context.lineWidth = lineWidth;	// Draw our lines	for (var color in colors) {	context.beginPath();	// Move to the first point	context.moveTo(0,450);	// Loop through all the points	for (var i = 1; i < pointCount; i++) {	context.lineTo(pageWidth * i/pointCount, point[i][color]);	}	// Line to the last point	context.lineTo(pageWidth, 450);	// Set our color	context.strokeStyle = colors[color];	// Draw the line.	context.stroke();	}
}
function generateGraph() {	var pageWidth = document.width ? document.width : document.documentElement.clientWidth;	// Set up our canvas & context	canvas	= document.getElementById('header');	canvas.width	= pageWidth;	canvas.height	= 500;	context	= canvas.getContext('2d');	// Create our points array with our colors.	for (var i = 0; i < pointCount; i++) {	point[i] = [];	// Get a number between 400 & 500	for (var color in colors) {	point[i][color] = Math.floor(Math.random() * 100) + 400;	}	}	// Draw the area under the graph	for (var color in colors) {	for (var i = 1; i < pointCount; i++) {	context.lineTo(pageWidth * i/pointCount, point[i][color]);	}	context.lineTo(pageWidth, 450);	context.lineTo(pageWidth, 500);	context.lineTo(0, 500);	context.lineTo(0, 450);	}	// Set fill color	context.fillStyle = fillColor;	context.fill();	// Set our line width	context.lineWidth = lineWidth;	// Draw our lines	for (var color in colors) {	context.beginPath();	// Move to the first point	context.moveTo(0,450);	// Loop through all the points	for (var i = 1; i < pointCount; i++) {	context.lineTo(pageWidth * i/pointCount, point[i][color]);	}	// Line to the last point	context.lineTo(pageWidth, 450);	// Set our color	context.strokeStyle = colors[color];	// Draw the line.	context.stroke();	}
}
Dynamic Hero Image - Script Codes
Dynamic Hero Image - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 4
Size 2,435 Kb
Views 10,120
Do you need developer help for Dynamic Hero Image?

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!

Dave DeHaan (davedehaan) Script Codes
Create amazing blog posts 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!