Spotlight Search 404

Developer
Dave DeHaan
Size
3,033 Kb
Views
4,048
  1. Spotlight Search 404 Previews
  2. Spotlight Search 404 HTML Codes
  3. Spotlight Search 404 CSS Codes
  4. Spotlight Search 404 JS Codes

How do I make an spotlight search 404?

Creating a "spotlight" effect on a 404 page.. What is a spotlight search 404? How do you make a spotlight search 404? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.

Spotlight Search 404 Previews
IQ Test

Spotlight Search 404 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spotlight Search 404</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<center> <canvas id="404" height="400" width="800"></canvas>	</center> <script src="js/index.js"></script>
</body>
</html>

Spotlight Search 404 - Script Codes CSS Codes

body { background: #262626;
}

Spotlight Search 404 - Script Codes JS Codes

// Get our canvas & context
var c	= document.getElementById("404");
var ctx = c.getContext("2d");
/* START CONFIG VARS */
// What text should display?
var displayText = '404';
// What color should the text be?
var textColor = '#262626';
// What font should the text use?
var textStyle = "normal normal bold 200px Arial";
// How small should the circles get when away from the center?
var minCircleRadius = 40;
// How small should the circles get when close to the center?
var maxCircleRadius = 140;
// What should the coefficient be for size scaling?
var circleRadiusProximity = 5;
// How opaque should the circles get when away from the center?
var minCircleOpacity = .2;
// How opaque should the circles get when close to the center?
var maxCircleOpacity = .9;
// What should the coefficient be for opacity scaling?
var circleOpacityProximity = 1000;
// What colors should be used? (Adding array pairs here adds beams)
var colors = {	'beam1': '255,255,255',	'beam2': '255,255,255',	'beam3': '255,255,255',
}
/* END CONFIG VARS */
// An array to hold our beam objects.
beams = [];
// Initialize counter
i = 0;
// Loop through our colors
for (color in colors) {	// For each color, create a beam object.	beams[color] = {};	// Set fill color to specified color	beams[color].fillColor	= colors[color];	// Initialize shiftX & moveX to the same random value (in relation to the center point)	beams[color].shiftX = beams[color].moveX = Math.random() * 2 > 1 ? parseInt(Math.random() * c.width / 2) - minCircleRadius : parseInt(Math.random() * c.width / -2) + minCircleRadius;	// Initialize shiftY & moveY to the same random value (in relation to the center point)	beams[color].shiftY = beams[color].moveY = Math.random() * 2 > 1 ? parseInt(Math.random() * c.height / 2) - minCircleRadius : parseInt(Math.random() * c.height / -2) + minCircleRadius;	// Increment counter	i++;
}
// Start our animation interval
setInterval(function() {	// Clear our canvas	c.width = c.width;	// Loop through our beam array	for (beam in beams) {	// To make things more understandable, let's use "currentBeam"	currentBeam = beams[beam];	// If the beams shiftX coord is greater than the moveX coord, decrement shiftX (move it closer)	if (currentBeam.shiftX > currentBeam.moveX) { currentBeam.shiftX--; }	// If the beams shiftX coord is less than the moveX coord, increment shiftX (move it closer)	if (currentBeam.shiftX < currentBeam.moveX) { currentBeam.shiftX++; }	// If the beams shiftY coord is greater than the moveY coord, decrement shiftY (move it closer)	if (currentBeam.shiftY > currentBeam.moveY) { currentBeam.shiftY--; }	// If the beams shiftY coord is less than the moveY coord, increment shiftY (move it closer)	if (currentBeam.shiftY < currentBeam.moveY) { currentBeam.shiftY++; }	// If both the shiftX & shiftY are at the moveX & moveY, generate new moveX & moveY to move to.	if (currentBeam.shiftX == currentBeam.moveX && currentBeam.shiftY == currentBeam.moveY) {	// Regenerate moveX .. 50% chance of being positive, 50% chance of being negative.	// Take into account minCircleradius so it doesn't go off the side of the canvas	currentBeam.moveX	= Math.random() * 2 > 1 ? parseInt(Math.random() * c.width / 2) - minCircleRadius : parseInt(Math.random() * c.width / -2) + minCircleRadius;	// Regenerate moveX .. 50% chance of being positive, 50% chance of being negative.	// Take into account minCircleradius so it doesn't go off the side of the canvas	currentBeam.moveY	= Math.random() * 2 > 1 ? parseInt(Math.random() * c.height / 2) - minCircleRadius : parseInt(Math.random() * c.height / -2) + minCircleRadius;	}	// Calculate circleRadius by finding how far the shiftX & shiftY are from the center, and dividing by the proximity coefficient.	circleRadius = maxCircleRadius - ((Math.abs(currentBeam.shiftX) + Math.abs(currentBeam.shiftY)) / circleRadiusProximity);	// Make sure the circleRadius isn't under the minimum.	if (circleRadius < minCircleRadius) { circleRadius = minCircleRadius; }	// Calculate circleOpacity by finding how far the shiftX & shiftY are from the center, and dividing by the proximity coefficient.	circleOpacity = maxCircleOpacity - ((Math.abs(currentBeam.shiftX) + Math.abs(currentBeam.shiftY)) / circleOpacityProximity);	// Make sure the circleOpacity isn't under the minimum.	if (circleOpacity < minCircleOpacity) { circleOpacity = minCircleOpacity; }	// Set the fill style w/ opacity	ctx.fillStyle = 'rgba('+currentBeam.fillColor+', '+circleOpacity+')';	// Begin our drawing path	ctx.beginPath();	// Draw our circle	ctx.arc(c.width/2 + currentBeam.shiftX, c.height/2 + currentBeam.shiftY, circleRadius, 0, 2*Math.PI);	// Fill our circle	ctx.fill();	}	// Set our text fill style	ctx.fillStyle = textColor;	// Set our font	ctx.font = textStyle;	// Set our text align as center	ctx.textAlign = 'center';	// All our circles are drawn, draw our text over it.	ctx.fillText(displayText, c.width/2, c.height/2 + 40);
// Animate at 60 fps
}, 1000/60);
Spotlight Search 404 - Script Codes
Spotlight Search 404 - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 4
Size 3,033 Kb
Views 4,048
Do you need developer help for Spotlight Search 404?

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
Name
Dynamic Hero Image
Global Composite Operation Test
Asteroids
Yule Logs
Unblur on scroll
Christmas Countdown
HTML5 Logo Tracing
Fun with Lines
Merry Christmas.
Unblur on Page Load
Create amazing sales emails 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!