Magic Template

Developer
Nathan Gregg
Size
2,992 Kb
Views
8,096
  1. Magic Template Previews
  2. Magic Template HTML Codes
  3. Magic Template CSS Codes
  4. Magic Template JS Codes

How do I make an magic template?

What is a magic template? How do you make a magic template? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Magic Template Previews
IQ Test

Magic Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Magic Template</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="feedback"> <div>q/w = scale, a/s = rotation, 1-9 = blend</div> <div id="coords1"></div> <div id="coords2"></div> <div id="coords3"></div> <div id="coords4"></div> <div id="coords5"></div> <div id="coords6"></div> <div id="coords7"></div> <div id="coords8"></div>
</div>
<div id="wrapper"> <div id="container"> <!-- <img id="front_template" src="https://image.ibb.co/h4EH0Q/magic_template.png"> --> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Magic Template - Script Codes CSS Codes

#wrapper { position: absolute; top: 0; bottom: 0; width: 100vw; display: flex; justify-content: space-around; align-items: center; align-content: center;
}
#container { position: relative; display: flex; justify-content: center; height: 560px; width: 400px; border: 1px solid grey; z-index: 100; cursor: none;
}
#front_template { mix-blend-mode: color; z-index: 101;
}
img { position: absolute;
}
.inner { opacity: 1; /*filter: invert(100%); /* mix-blend-mode: color;*/
}
/* mix-blend-mode: overlay;
normal; multiply; screen; overlay; darken; lighten; color-dodge; color-burn; hard-light; soft-light; difference; exclusion; hue; saturation; color; luminosity;
*/

Magic Template - Script Codes JS Codes

var scale = 0.5, percX = 50, percY = 25, X = 0, Y = 0, mouse_X = 0, mouse_Y = 0, rotate = 0, blend_mode;
function moveCards() { for (i = 0; i < 51; i++) { var j = i+1, trans_scale = Math.pow(scale, i), trans_rotate = rotate * (i/2), XYscaling = 100/(trans_scale*100); $('#coords5').html("Trans_scale: " + trans_scale.toFixed(6)); $('#coords6').html("Trans_rotate: " + trans_rotate); $('#container img:nth-child(' + j + ')').css({ "transform": "scale(" + trans_scale + ") rotate(" + trans_rotate + "deg)", "transform-origin": percX + "% " + percY + "%", }); };
}
// "filter": "invert(" + ((percX-50)*2) + "%) hue-rotate(" + i*trans_rotate + "deg) opacity(" + percY + "%)"
// blur(" + i + "px)
// opacity(" + percY + "%)
// brightness(" + (i+10)*10 + "%)
// invert(" + percX + "%)
// drop-shadow(" + i + "px " + i + "px 10px black)
// Draw imgs
for (i = 0; i < 50; i++) { var scalexi = (1/i), $img = $('<img class="inner" style="z-index: -' + i + ';" src="https://image.ibb.co/h4EH0Q/magic_template.png">'); $('#container').append($img);
}
$('#container').mousemove(function(e){ var $this = $(this), offset = $this.offset(); mouse_X = (event.clientX - offset.left); mouse_Y = (event.clientY - offset.top); X = mouse_X/400; Y = mouse_Y/560; percX = (X*100).toFixed(0); percY = (Y*100).toFixed(0); $('#coords1').html("Mouse Coords: " + mouse_X.toFixed(0) + ', ' + mouse_Y.toFixed(0)); $('#coords2').html("X, Y Ratio: " + X.toFixed(2) + ", " + Y.toFixed(2)); $('#coords3').html("Perc: " + percX + "%, " + percY + "%"); moveCards();
});
$("body").keydown(function(event){ var key = event.which; switch(key){ case 81: scale = scale + 0.01; break; case 87: scale = scale - 0.01; break; case 65: rotate = rotate - 2; break; case 83: rotate = rotate + 2; break; case 49: blend_mode = "multiply"; break; case 50: blend_mode = "screen"; break; case 51: blend_mode = "overlay"; break; case 52: blend_mode = "darken"; break; case 53: blend_mode = "lighten"; break; case 54: blend_mode = "difference"; break; case 55: blend_mode = "exclusion"; break; case 56: blend_mode = "hue"; break; case 57: blend_mode = "saturation"; break; case 48: blend_mode = "color"; break; case 189: blend_mode = "luminosity"; break; } $(".inner").css({ "mix-blend-mode": blend_mode}); moveCards(); $('#coords4').html("Relative Scale: " + scale.toFixed(2)); $('#coords7').html("Keycode: " + event.which); $('#coords8').html("Blend Mode: " + blend_mode);
});
Magic Template - Script Codes
Magic Template - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 2,992 Kb
Views 8,096
Do you need developer help for Magic Template?

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!

Nathan Gregg (nathansonic) Script Codes
Name
Flexbox filter V2 from array
Matching 2 Arrays
Crappy Fly To Cart - CSS
Artist Page Styling v5
Form and Validation V1
Sort Isotope
Pure CSS filter using Flexbox
Artist Page Styling v7 Isotope
CWB Full V3
HTML5 Audio example
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!