Color morphing

Developer
Teo Litto
Size
3,764 Kb
Views
28,336
  1. Color morphing Previews
  2. Color morphing HTML Codes
  3. Color morphing CSS Codes
  4. Color morphing JS Codes

How do I make an color morphing?

What is a color morphing? How do you make a color morphing? This script and codes were developed by Teo Litto on 26 August 2022, Friday.

Color morphing Previews
IQ Test

Color morphing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>color morphing</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> <canvas id="overlayCanv" width="800", height="500"></canvas>
<canvas id="incomingCanv" width="800" height="500"></canvas>
<canvas id="baseCanv" width="800", height="500"></canvas>
<button id="groovy">Groovy</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.js'></script> <script src="js/index.js"></script>
</body>
</html>

Color morphing - Script Codes CSS Codes

html, body { width: 100%; height: 100%; background: #222; overflow-x: hidden;
}
img, #incomingCanv, #maskCanv { position: absolute; left: -9999px;
}
#baseCanv, #overlayCanv { position: absolute; top: 0; left: 0;
}
#overlayCanv { z-index: 9;
}
#groovy { margin-left: 20px; margin-top: 20px; padding: 20px; display: none; z-index: 999; -webkit-transform: translateZ(0); transform: translateZ(0); position: relative;
}

Color morphing - Script Codes JS Codes


//images & loading
var imageSources = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/carRed.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/carPurp.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/carDarkCherry.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/carRed.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/carYellow.jpg", ]
var loadingImages = [];
var loadedImages = [];
//configuration vars
var morphSpeed = 1.3; //transition time in secs
//canvas vars
var baseCanv = document.getElementById('baseCanv');
var baseCtx = baseCanv.getContext('2d');
var overlayCanv = document.getElementById('overlayCanv');
var overlayCtx = overlayCanv.getContext('2d');
var incomingCanv = document.getElementById('incomingCanv');
var incomingCtx = incomingCanv.getContext('2d');
var incomingImageData;
//render vars
var pixelPercentage = (1 / (baseCanv.width-1) ) * 255; //each pixel represents a percentage of the width of the image (-1 because count runs from 0 - width-1)
var alphaShift = {x:-baseCanv.width};
var colCount = 0;
var alphaValue = 0;
var currVal = 0;
var isAnimating = false;
//cycle vars
var nextImg = 1;
//set up stats
stats = new Stats();
stats.setMode(1)
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '30px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
function loadImages() { for (var i = 0; i < imageSources.length; i++) { var def = new $.Deferred(); var img = new Image(); loadingImages[i] = def; //IIFE here to force lexical scope (function(def, img, i){ console.log('loading ', imageSources[i]) img.crossOrigin = "Anonymous"; img.src = imageSources[i]; img.onload = function() { loadedImages[i] = img; def.resolve(); } })(def,img,i) } //when first 2 images are done loading we have enough loaded to init $.when(loadingImages[0],loadingImages[1]).then(function(){ init(); })
}
function init() { console.log('init') //draw image 1 to base canvas baseCtx.drawImage(loadedImages[0],0,0); //draw image 2 to incoming canvas incomingCtx.drawImage(loadedImages[1],0,0); //show our button $('#groovy').show();
}
function changeColor() { //as we init incoming canvas is set to 1, so it's already primed, we grab the px, and kickoff our animation. // when animation is done, we copy overlay canvas to base canvas, iterate image counter (use a func to allow for wrap), put the new image on the incoming canvas, set isAnimating to false. document.getElementById('groovy').disabled = true; incomingImageData = incomingCtx.getImageData(0,0,incomingCanv.width,incomingCanv.height); isAnimating=true; render(); //kickoff the render loop which will run until "isAnimating" becomes false - done by the tween event complete callback; TweenMax.fromTo(alphaShift, morphSpeed, {x: -baseCanv.width}, {x: baseCanv.width, onComplete: function(){ isAnimating = false; incomingCtx.drawImage(loadedImages[++nextImg%loadedImages.length],0,0); baseCtx.drawImage(overlayCanv,0,0); document.getElementById('groovy').disabled = false; }})
}
function render() { stats.begin(); for (var i = 3; i < incomingImageData.data.length; i+=4) { colCount = ((i-3)/4)%overlayCanv.width; currVal = Math.round(colCount * pixelPercentage) + ( alphaShift.x * pixelPercentage ); incomingImageData.data[i] = currVal; } overlayCtx.putImageData(incomingImageData,0,0) if (isAnimating) { window.requestAnimationFrame(render); } stats.end();
}
function linearConvert(OldValue, OldMin, OldMax, NewMin, NewMax) { return (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin
}
//KICKOFF!
$(function(){ loadImages(); $('body').on('click','#groovy', function(){ if (!isAnimating) { changeColor(); } });
});
Color morphing - Script Codes
Color morphing - Script Codes
Home Page Home
Developer Teo Litto
Username teolitto
Uploaded August 26, 2022
Rating 3
Size 3,764 Kb
Views 28,336
Do you need developer help for Color morphing?

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!

Teo Litto (teolitto) Script Codes
Name
Konami Code Easter Egg
Dreamforce.com 2017
Powers Sniffer
WebGL Smoke
Lock Picking in the DOM
Starfall
Depth First Search Connectivity Test
Networked Paint with Patrick
Kitten Sniffer
Parallaxadise - Quick n dirty scrollytelling demo
Create amazing sales emails 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!