Glitch

Developer
Dima
Size
3,368 Kb
Views
52,624
  1. Glitch Previews
  2. Glitch HTML Codes
  3. Glitch CSS Codes
  4. Glitch JS Codes

How do I make an glitch?

What is a glitch? How do you make a glitch? This script and codes were developed by Dima on 17 September 2022, Saturday.

Glitch Previews
IQ Test

Glitch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glitch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="glitch-image"></div>
<canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Glitch - Script Codes CSS Codes

body { margin: 0; background: #373537; height: 100vh; overflow: hidden;
}
.glitch-image { -webkit-animation: flick 80ms linear infinite; animation: flick 80ms linear infinite;
}
.glitch-image #canvas { height: 100vh; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-animation: turnOn 100ms ease-in 500ms forwards; animation: turnOn 100ms ease-in 500ms forwards;
}
@-webkit-keyframes { 0% { opacity: 0.8; } 100% { opacity: 0.9; }
}
@keyframes { 0% { opacity: 0.8; } 100% { opacity: 0.9; }
}
@-webkit-keyframes { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-filter: brightness(5); filter: brightness(5); } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-filter: brightness(1); filter: brightness(1); }
}
@keyframes { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-filter: brightness(5); filter: brightness(5); } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-filter: brightness(1); filter: brightness(1); }
}

Glitch - Script Codes JS Codes

(function() { 'use strict'; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), img = new Image(), currentFrame = 0, totalFrame = 10, offset = .01, width, height, imgData, data, pr = window.devicePixelRatio || 1, w = window.innerWidth, h = window.innerHeight, requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; img.crossOrigin = "Anonymous"; img.src = 'https://zupra.github.io/test/filter.jpg'; img.onload = function() { init(); glitchAnimation(); }; var init = function() { canvas.width = width = w * pr; canvas.height = height = h * pr; //anvas.width = width = img.width; //* .5; offset = width * offset; //canvas.height = height = ~~(img.height * (width - offset * 2) / img.width); //document.querySelector('.glitch-image').style.width = width + 'px'; //document.querySelector('.glitch-image').style.height = height + 'px'; }.bind(this); var glitchAnimation = function() { if (!(currentFrame % totalFrame) || currentFrame > totalFrame) { clearCanvas(); ctx.drawImage(img, 0, 0, img.width, img.height, offset, 0, width - offset * 2, height); imgData = ctx.getImageData(0, 0, width, height); imgData = pixelProcessor(imgData, 4, pixelCooler); ctx.putImageData(imgData, 0, 0); currentFrame = 0; } if (currentFrame === randInt(0, totalFrame)) { imgData = pixelProcessor(imgData, 1, pixelFlick); ctx.putImageData(imgData, 0, 0); drawGlitch(width, height, randInt(3, 10), glitchBlock); drawGlitch(width, height, randInt(3, 30), glitchLine); } currentFrame++; window.requestAnimationFrame(glitchAnimation); }; var pixelFlick = function(i, d) { d[i] = d[i + 16]; }; var pixelCooler = function(i, d) { d[i] = 1; d[i + 1] += randInt(2, 5); d[i + 2] *= randInt(1, 3) + 8; }; var glitchBlock = function(i, x, y) { if (i > 3) { var spliceHeight = 1 + randInt(0, 10); ctx.drawImage(canvas, x, y, x, spliceHeight, randInt(0, x), y, randInt(x, width), spliceHeight); } }; var glitchLine = function(i, x, y) { var spliceHeight = 1 + randInt(1, 50); ctx.drawImage(canvas, offset, y, width - offset * 2, spliceHeight, 1 + randInt(0, offset * 2), //-offset / 3 + randInt(0, offset / 1.5), y + randInt(0, 10), width - offset, spliceHeight); }; var pixelProcessor = function(imageData, step, callback) { var data = imageData.data || [], step = step * 4 || 4; if (data.length) { var rgb = []; for (var i = 0; i < data.length; i += step) { callback && callback(i, data); } return imageData; } else { return imageData; } }; var drawGlitch = function(width, height, amount, callback) { for (var i = 0; i < (amount || 10); i++) { var x = Math.random() * width + 1, y = Math.random() * height + 1; callback(i, x, y); } }; var randInt = function(a, b) { return ~~(Math.random() * (b - a) + a); }; var clearCanvas = function() { ctx.clearRect(0, 0, width, height); };
})();
Glitch - Script Codes
Glitch - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3.5
Size 3,368 Kb
Views 52,624
Do you need developer help for Glitch?

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!

Dima (dimaZubkov) Script Codes
Name
Codrops HoverEffectIdeas
Three js
Vue cart
Ken Burns Effect
Css masonry
Mega menu
Vue radio
Section scroll
Burger nav
Glitch
Create amazing marketing copy 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!