404 Glitch Effect

Developer
Dave DeHaan
Size
3,495 Kb
Views
14,168
  1. 404 Glitch Effect Previews
  2. 404 Glitch Effect HTML Codes
  3. 404 Glitch Effect CSS Codes
  4. 404 Glitch Effect JS Codes

How do I make an 404 glitch effect?

Fun 404 glitch page.. What is a 404 glitch effect? How do you make a 404 glitch effect? This script and codes were developed by Dave DeHaan on 27 December 2022, Tuesday.

404 Glitch Effect Previews
IQ Test

404 Glitch Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>404 Glitch Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <glitch> <div class="hero"> </div> <h1>404?!</h1> <h2>Sometimes you take the road less travelled &hellip;</h2>	<p> We're not sure how you got here, but you should head <a href="#">home</a>. </p> <p> It's probably our fault that you're here; but if you're having trouble with the site just shoot us an <a href="mailto:[email protected]">email</a>. </p> <!-- Extra spacing! --> <br /> <br /> <br /> <br />
</glitch> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

404 Glitch Effect - Script Codes CSS Codes

.hero { min-height: 300px; width: 100%; overflow: hidden; background: url(https://s-media-cache-ak0.pinimg.com/originals/11/4a/ae/114aae7aedae0793d141c1864aa31952.jpg); background-size: cover;
}
body { margin: 0px; color: #585E62; font-family: Arial;
}
h1 { padding: 10px; margin: 20px 30px 5px 30px; font-size: 40px;
}
h2 { padding: 10px; margin: 0px 30px; font-size: 25px;
}
p { padding: 10px; margin: 0px 30px; font-size: 15px;
}
a { color : #4466FF; text-decoration: none;
}

404 Glitch Effect - Script Codes JS Codes

// Glitch Line Vars
var glitch_lines = 15,	glitch_line_duration_min = 100,	glitch_line_duration_max = 500,	glitch_line_timer_min = 100,	glitch_line_timer_max = 5000,	glitch_line_wait_min = 100,	glitch_line_wait_max = 3000,	glitch_line_height_min = 5,	glitch_line_height_max = 50;
// Glitch Move Vars
var glitch_move_color_1 = '#08FFF2',	glitch_move_color_2 = '#FC0DFF',	glitch_move_original_color = '#585E62',	glitch_move_opacity = .2,	glitch_move_duration_min = 1000,	glitch_move_duration_max = 300,	glitch_move_timer_min = 500,	glitch_move_timer_max = 1500,	glitch_move_wait_min = 1000,	glitch_move_wait_max = 2000,	glitch_move_amount_min = -10,	glitch_move_amount_max = 10;
// Do you want to autostart on page load?
var glitch_autostart = 1;
// Start Glitch on page load.
window.onload = function() {	if (glitch_autostart) {	glitch = new glitch();	glitch.init();	}
}
// Random integer function (Will correctly work w/ negative numbers)
function randomInt(min, max){ return Math.floor(Math.random()*(max-min+1)+min);
}
// Glitch functionality
function glitch() {	// Initialize the glitches	// - Create divs	// - Load divs from <glitch> element	// - Set body to not scroll on x-axis	// - Starts glitch animations	this.init = function() {	page_content = $('glitch').html();	$('body').css('overflow-x', 'hidden');	// Glitch Lines	linecount = 0;	this.glitchlines = [];	while (linecount < glitch_lines) {	$('body').append('<div class="glitch-line-'+linecount+'">'+page_content+'</div>');	$('.glitch-line-'+linecount).css({	'height': '100%',	'width': '100%',	'position': 'absolute',	'top': '0',	'left': '0'	}).hide();	this.glitchline('.glitch-line-'+linecount, linecount);	linecount++;	}	// Glitch Move	$('body').append('<div class="glitch-div-1">'+page_content+'</div>');	$('body').append('<div class="glitch-div-2">'+page_content+'</div>');	$('.glitch-div-1, .glitch-div-2').css({	'height': '100%',	'width': '100%',	'position': 'absolute',	'top': '0',	'left': '0'	});	this.glitchmove();	}	this.glitchline = function(div, id) {	// Store an array of glitchlines	this.glitchlines[id] = new glitchline;	this.glitchlines[id].start(div);	}	this.glitchmove = function() {	glitchmove = new glitchmove;	glitchmove.start();	}
}
// Glitch Move Animation
function glitchmove() {	// Start glitch	this.start = function() {	selfmove = this;	// Create a move on a regular duration	setInterval(function() {	// Wait a random number of ms to execute	setTimeout(function() {	// Create animation	selfmove.move();	}, randomInt(glitch_move_wait_min, glitch_move_wait_max));	}, randomInt(glitch_move_timer_min, glitch_move_timer_max));	}	this.move = function() {	// Move the divs a random number of pixels top & left, change the color & opacity.	$('.glitch-div-1').css({	'left': randomInt(glitch_move_amount_min, glitch_move_amount_max) + 'px',	'top': randomInt(glitch_move_amount_min, glitch_move_amount_max) + 'px',	'opacity': glitch_move_opacity,	'color': glitch_move_color_1	});	$('.glitch-div-2').css({	'left': randomInt(glitch_move_amount_min, glitch_move_amount_max) + 'px',	'top': randomInt(glitch_move_amount_min, glitch_move_amount_max) + 'px',	'opacity': glitch_move_opacity,	'color': glitch_move_color_2	});	// Prepare to move divs back	this.moveback();	}	this.moveback = function() {	// Move the divs back after a random time duration	this.timeout = setTimeout(function() {	// Make sure we set the text back to the original color!	$('.glitch-div-1, .glitch-div-2').css({	'left': '0px',	'top': '0px',	'color': glitch_move_original_color,	'opacity': '1',	});	}, randomInt(glitch_move_duration_min, glitch_move_duration_max));	}
}
function glitchline() {	this.start = function(div) {	selfline = this;	// Hold our timeouts.	this.timeouts = [];	// Create a move on a regular duration	setInterval(function() {	// Wait a random number of ms to execute	setTimeout(function() {	selfline.add(div);	}, randomInt(glitch_line_wait_min, glitch_line_wait_max));	}, randomInt(glitch_line_timer_min, glitch_line_timer_max));	}	this.add = function(div) {	// change the height, width, top, and left using a random number	$(div).css({	'height': randomInt(glitch_line_height_min, glitch_line_height_max) + 'px',	'width': randomInt($(window).width()/2, $(window).width()) + 'px',	'top': randomInt(0, $(window).height()) + 'px',	'left': randomInt(0, $(window).width()/2) + 'px',	'position': 'fixed',	'overflow': 'hidden',	'display': 'block',	'background': '#FFF'	});	// Set random scroll top & scroll left.	$(div).scrollTop(randomInt(0, $(window).height()));	$(div).scrollLeft(randomInt(0, 100));	// Prepare to hide the div	this.remove(div);	}	this.remove = function(div) {	// Hide the div at a random time interval.	this.timeouts[div] = setTimeout(function() {	$(div).hide();	}, randomInt(glitch_line_duration_min, glitch_line_duration_max));	}
}
404 Glitch Effect - Script Codes
404 Glitch Effect - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded December 27, 2022
Rating 4.5
Size 3,495 Kb
Views 14,168
Do you need developer help for 404 Glitch Effect?

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
A Pen by Dave DeHaan
Fun with Lines
Randomly generated canvas clouds
Auto-generating complementary colors
Global Composite Operation Test
HTML5 Logo Tracing
Yule Logs
Unblur on scroll
Tween Bubbles.
Winter
Create amazing love letters 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!