Glitch

Developer
Dima
Size
2,843 Kb
Views
40,480
  1. Glitch Previews
  2. Glitch HTML Codes
  3. Glitch CSS Codes
  4. Glitch JS Codes

How do I make an glitch?

Glitch effect. 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>
<canvas id="portrait"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="260" x="0" y="0"> <text class="jelly-text" x="60" y="50%">GLITCH</text>
</svg> <script src="js/index.js"></script>
</body>
</html>

Glitch - Script Codes CSS Codes

body { background: #000;
}
#portrait { position: absolute; z-index: -1; bottom: 0; height: 100%;
}
.jelly-text { font-size: 70px; font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; fill: #fff; stroke: #fff; stroke-width: 2px; stroke-dasharray: 30; stroke-linecap: round; animation: dash 1s linear infinite;
}
@-moz-keyframes dash { to { stroke-dashoffset: 1000; }
}
@-webkit-keyframes dash { to { stroke-dashoffset: 1000; }
}
@-o-keyframes dash { to { stroke-dashoffset: 1000; }
}
@keyframes dash { to { stroke-dashoffset: 1000; }
}

Glitch - Script Codes JS Codes

function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}
var img = new Image();
img.src = 'https://zupra.github.io/test/filter.jpg';
img.onload = function() { draw(this);
};
function draw(img) { var portrait = document.getElementById('portrait'); var canvas = portrait.getContext('2d'); portrait.setAttribute("width", img.width); portrait.setAttribute("height", img.height); var verticalSlices = Math.round(img.height / 3); var maxHorizOffset = 5; function render() { requestAnimationFrame(render); for (var i = 0; i < verticalSlices; i++) { var horizOffset = getRandom(-Math.abs(maxHorizOffset), maxHorizOffset); canvas.drawImage(img, 0, i * verticalSlices, img.width, i * verticalSlices + verticalSlices, horizOffset, i * verticalSlices, img.width, i * verticalSlices + verticalSlices); } } render();
}
Glitch - Script Codes
Glitch - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3
Size 2,843 Kb
Views 40,480
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
Css masonry
Price range slider
Responsive typography harmony
Ken Burns Effect
A Pen by Dima
Scroll animating effect
Ken Burns effect CSS only
Burger nav
Angular T-shirt shop
Mega menu
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!