Canvas Image Glitch Effect - Vaderman

Developer
Sabin Tudor
Size
4,740 Kb
Views
6,072
  1. Canvas Image Glitch Effect - Vaderman Previews
  2. Canvas Image Glitch Effect - Vaderman HTML Codes
  3. Canvas Image Glitch Effect - Vaderman CSS Codes
  4. Canvas Image Glitch Effect - Vaderman JS Codes

How do I make an canvas image glitch effect - vaderman?

Image glitch hover effect by 'corrupting' the encoded base64 chars of dynamic loaded images. <3 Canvas base64!. What is a canvas image glitch effect - vaderman? How do you make a canvas image glitch effect - vaderman? This script and codes were developed by Sabin Tudor on 03 January 2023, Tuesday.

Canvas Image Glitch Effect - Vaderman Previews
IQ Test

Canvas Image Glitch Effect - Vaderman - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Image Glitch Effect - Vaderman</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap"> <div class="panel"> <h1 class="cta">Vader<span>Man</span></h1> <img class="vaderman" /> </div>
</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>

Canvas Image Glitch Effect - Vaderman - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Exo:300,400,500,600,700);
html, body { height: 100%;
}
body { font-family: 'Exo', sans-serif; overflow: hidden; background: -webkit-linear-gradient(#8b9da9, #fff6e4) transparent; background: linear-gradient(#8b9da9, #fff6e4) transparent;
}
#wrap { height: 100%; -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
img { width: 100%; height: auto;
}
.cta { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0%; padding: 10px; margin: 0 auto; background: transparent; opacity: 0; border: 1px solid #fff; border-left: 0; border-right: 0; text-align: center; color: #fff; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), width 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color 1s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), width 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color 1s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), width 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color 1s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), width 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color 1s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translate3d(-50%, 500%, 0); transform: translate3d(-50%, 500%, 0);
}
.cta span { font-weight: 300;
}
.panel { position: absolute; top: 50%; left: 50%; width: 640px; height: 480px; border-radius: 10px; overflow: hidden; cursor: pointer; background: transparent no-repeat center center; background-size: cover; box-shadow: 0px 16px 30px -10px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-transition: border-radius 0.3s ease, -webkit-transform 2s ease; transition: border-radius 0.3s ease, -webkit-transform 2s ease; transition: transform 2s ease, border-radius 0.3s ease; transition: transform 2s ease, border-radius 0.3s ease, -webkit-transform 2s ease; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate3d(-50%, -50%, -400px) rotateX(-20deg) rotateY(40deg); transform: translate3d(-50%, -50%, -400px) rotateX(-20deg) rotateY(40deg);
}
.panel:hover, .panel.active { -webkit-transform: translate3d(-50%, -50%, 40px) rotateX(10deg) rotateY(-20deg); transform: translate3d(-50%, -50%, 40px) rotateX(10deg) rotateY(-20deg);
}
.panel:hover .cta, .panel.active .cta { opacity: 1; width: 100%; background: rgba(0, 0, 0, 0.3); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}

Canvas Image Glitch Effect - Vaderman - Script Codes JS Codes

// DOM ready
$(function(){ // image URL to use on card + glitch effect var imageCardURL = '//cdn.pbrd.co/images/OOeMq4n.jpg'; // animation settings var useRAF = true; // use requestAnimFrame for updater? steroids mode! var updateDelay = 100; // if RAF true, this will be ignored var maxErrors = 130; // max image glitch errors // image corruptor settings var imgPrefix = "data:image/jpeg;base64,"; var imageData = null; var updateTimer = null; // selectorz var $img = $(".vaderman"); var $panel = $('.panel'); // // INIT // var _init = function() { // load image and convert loadImage(imageCardURL); // hover magic $panel.hover(function() { console.log('>> in'); if (useRAF) { update(); } else { updateTimer = setInterval(function() { update(); }, updateDelay); } }, function() { console.log('<< out'); if (useRAF) { cancelRequestAnimFrame(updateTimer); } else { clearInterval(updateTimer); } updateTimer = null; }); }; // // image loader+covertor to base64 // var loadImage = function(imageUrl) { var imageFormat = 'image/jpeg'; var imageQuality = 0.8; convertImgToBase64(imageUrl, function(base64img) { // set panel bg $panel.css('background-image', 'url(' + base64img + ')'); // store image encoded data imageData = base64img.replace(imgPrefix, ''); }, imageFormat, imageQuality); }; // // image 'corruptor' magic // var update = function() { // request another frame? if (useRAF) { updateTimer = requestAnimFrame(update); } var corrupted = imageData; if (Math.random() > 0.8) { var errors = Math.round(Math.random() * maxErrors); for(var i = 0; i < errors; i++){ var l = 1000 + Math.round(Math.random() * (corrupted.length - 1002)); corrupted = corrupted.substr(0,l) + corrupted.charAt(l+1) + corrupted.charAt(l) + corrupted.substr(l+2); } } $img.attr('src', imgPrefix + corrupted); } // ...and call it _init();
});
/** * Convert an image * to a base64 url * @param {String} url * @param {Function} callback * @param {String} [outputFormat=image/png] */
convertImgToBase64 = function(url, callback, outputFormat, outputQuality) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function(){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); // convert to base64 dataURL = canvas.toDataURL(outputFormat, outputQuality); callback(dataURL); canvas = null; }; img.src = url;
}
// RAF polyfills
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( callback ) { window.setTimeout( callback, 16.6 ); // up to 60 FPS (1000/60) };
})();
window.cancelRequestAnimFrame = ( function() { return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout
} )();
Canvas Image Glitch Effect - Vaderman - Script Codes
Canvas Image Glitch Effect - Vaderman - Script Codes
Home Page Home
Developer Sabin Tudor
Username NyX
Uploaded January 03, 2023
Rating 4
Size 4,740 Kb
Views 6,072
Do you need developer help for Canvas Image Glitch Effect - Vaderman?

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!

Sabin Tudor (NyX) Script Codes
Name
SVG low-poly background anim
Meet Squiggly - a SVG goo guy
Infinity Wall
Toggle switch with both states visible
Bits particle
Infinity glowline CSS circles
Strings
Round Calendar
Parallax landing test
A Pen by Sabin Tudor
Create amazing web content 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!