Glitchicken

Developer
Uriuriuriu
Size
2,764 Kb
Views
4,048
  1. Glitchicken Previews
  2. Glitchicken HTML Codes
  3. Glitchicken CSS Codes
  4. Glitchicken JS Codes

How do I make an glitchicken?

This is lamb.. What is a glitchicken? How do you make a glitchicken? This script and codes were developed by Uriuriuriu on 10 January 2023, Tuesday.

Glitchicken Previews
IQ Test

Glitchicken - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glitchicken</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-glitch-src="https://dl.dropboxusercontent.com/u/90712768/img/lambchop_min.jpg"></div>
<div><image src="https://dl.dropboxusercontent.com/u/90712768/img/lambchop_min.jpg"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glitchicken - Script Codes CSS Codes

* { color: #ccc;
}
body { background-color: #222; font-size: 2px; margin: 20px;
}
div { border: solid 10px #fff; float: left; margin: 2px; width: 420px; height: 520px; box-sizing: border-box; cursor: pointer;
}

Glitchicken - Script Codes JS Codes

(function($){ $.fn.glitchBoy=function(options){ var options = $.extend({ FPS : 15, duration: 3000, factor: 5 }, options); /* 一致した要素上で繰り返す */ return this.each(function(){ var $this = $(this); var img = document.createElement('img'); img.crossOrigin = 'anonymous'; var url = $this.data("glitch-src"); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var canvasOrigine = document.createElement('canvas'); var ctxOrigine = canvasOrigine.getContext('2d'); img.onload = function() { var width = canvas.width = canvasOrigine.width = img.width; var height = canvas.height = canvasOrigine.height = img.height; ctxOrigine.drawImage(img, 0, 0); $this.append(canvas); var frm = 0; var timer = setInterval(function () { frm++; var par = (frm * options.FPS) / options.duration; par *= Math.pow(par, options.factor); var imageData = ctxOrigine.getImageData(0,0,width,height); var data = imageData.data; var randR = Math.floor(Math.random()*options.factor); var randG = Math.floor(Math.random()*options.factor)*3; var randB = Math.floor(Math.random()*options.factor); for(var i = 0, len = imageData.width * imageData.height; i<len; i++){ data[i*4 + 0] = data[(i + randR)*4 + 0]; data[i*4 + 1] = data[(i + randG)*4 + 1]; data[i*4 + 2] = data[(i + randB)*4 + 2]; data[i*4 + 3] = 255; } ctx.putImageData(imageData,0,0); if(options.duration <= frm){ clearInterval(timer); } }, 1000 / options.FPS); } img.src = url; return this; }); };
})(jQuery);
$(function(){ $("div").glitchBoy({FPS:10}); $("div").click(function(){ $(this).html("").glitchBoy(); })
});
Glitchicken - Script Codes
Glitchicken - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 3
Size 2,764 Kb
Views 4,048
Do you need developer help for Glitchicken?

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!

Uriuriuriu (uriuriuriu) Script Codes
Name
Three.js ver.2 animation
ClickPanel
AngularJS - first step -
Css action sideBar
Shuffle text word separator
Simple genetic algorithm
Canvas circle gauge
Canvas Gaussian Blur
SANGETUKI separator
Masonry
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!