Impress JS Algorhytmic Generator

Developer
Jeff Scott Ward
Size
7,906 Kb
Views
30,360
  1. Impress JS Algorhytmic Generator Previews
  2. Impress JS Algorhytmic Generator HTML Codes
  3. Impress JS Algorhytmic Generator CSS Codes
  4. Impress JS Algorhytmic Generator JS Codes

How do I make an impress js algorhytmic generator?

Use Impress JS syntax via data atrributes in a jade loop to automate creation and positioning. What is a impress js algorhytmic generator? How do you make a impress js algorhytmic generator? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.

Impress JS Algorhytmic Generator Previews
IQ Test

Impress JS Algorhytmic Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Impress JS Algorhytmic Generator</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <span class="advisory">Use the left and right arrows to navigate</span>
<canvas id="c"></canvas>
<div id="impress"> <div class="tile step" data-x="43980" data-y="187300" data-z="46390" data-rotate-x="88.35" data-rotate-y="89.23" data-rotate-z="2.48" data-scale="30.89">0</div> <div class="tile step" data-x="27980" data-y="177280" data-z="21410" data-rotate-x="77.15" data-rotate-y="84.8" data-rotate-z="78.21" data-scale="85.24">1</div> <div class="tile step" data-x="1840" data-y="59880" data-z="70610" data-rotate-x="89.91" data-rotate-y="85.23" data-rotate-z="50.03" data-scale="83.72">2</div> <div class="tile step" data-x="30090" data-y="178540" data-z="11800" data-rotate-x="99.25" data-rotate-y="95.05" data-rotate-z="7.19" data-scale="70.84">3</div> <div class="tile step" data-x="55360" data-y="155540" data-z="81310" data-rotate-x="14.38" data-rotate-y="46.68" data-rotate-z="66.23" data-scale="8.71">4</div> <div class="tile step" data-x="19480" data-y="50960" data-z="59070" data-rotate-x="63.45" data-rotate-y="85.99" data-rotate-z="71.04" data-scale="63.6">5</div> <div class="tile step" data-x="30400" data-y="82160" data-z="58100" data-rotate-x="52.9" data-rotate-y="70.55" data-rotate-z="95.76" data-scale="92.19">6</div> <div class="tile step" data-x="77010" data-y="36360" data-z="49370" data-rotate-x="25.24" data-rotate-y="20.46" data-rotate-z="37.45" data-scale="60.3">7</div> <div class="tile step" data-x="96110" data-y="199140" data-z="78210" data-rotate-x="99.35" data-rotate-y="29.09" data-rotate-z="8.41" data-scale="79.43">8</div> <div class="tile step" data-x="28520" data-y="47280" data-z="72520" data-rotate-x="60.2" data-rotate-y="17.51" data-rotate-z="39.64" data-scale="38.63">9</div> <div class="tile step" data-x="77020" data-y="82000" data-z="40320" data-rotate-x="15.27" data-rotate-y="19.64" data-rotate-z="60.98" data-scale="61.38">10</div> <div class="tile step" data-x="35820" data-y="13280" data-z="95340" data-rotate-x="18.96" data-rotate-y="22.89" data-rotate-z="6.68" data-scale="52.06">11</div> <div class="tile step" data-x="80050" data-y="55400" data-z="5100" data-rotate-x="88.93" data-rotate-y="42.32" data-rotate-z="96.16" data-scale="64.95">12</div> <div class="tile step" data-x="67610" data-y="168460" data-z="86240" data-rotate-x="88.66" data-rotate-y="12.56" data-rotate-z="54.88" data-scale="85.54">13</div> <div class="tile step" data-x="42710" data-y="76380" data-z="54530" data-rotate-x="64.92" data-rotate-y="33.44" data-rotate-z="34.5" data-scale="1.42">14</div> <div class="tile step" data-x="77810" data-y="108520" data-z="88800" data-rotate-x="17.36" data-rotate-y="33.91" data-rotate-z="77.52" data-scale="91.02">15</div> <div class="tile step" data-x="43090" data-y="160080" data-z="87680" data-rotate-x="20.9" data-rotate-y="50.46" data-rotate-z="41.76" data-scale="6.28">16</div> <div class="tile step" data-x="4240" data-y="77980" data-z="4990" data-rotate-x="11.2" data-rotate-y="46.54" data-rotate-z="34.29" data-scale="8.42">17</div> <div class="tile step" data-x="55980" data-y="150560" data-z="65090" data-rotate-x="37.91" data-rotate-y="26.06" data-rotate-z="8.5" data-scale="1.78">18</div> <div class="tile step" data-x="18410" data-y="185940" data-z="41670" data-rotate-x="22.3" data-rotate-y="3.49" data-rotate-z="62.71" data-scale="82.6">19</div> <div class="tile step" data-x="40070" data-y="119580" data-z="25420" data-rotate-x="97.2" data-rotate-y="60.77" data-rotate-z="58.61" data-scale="47.19">20</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>

Impress JS Algorhytmic Generator - Script Codes CSS Codes

body, canvas, impress { height: 100%;
}
body { background: #a8a8a8;
}
.advisory { position: fixed; top: 0; left: 0; font-size: 14px; color: black; background: rgba(255, 255, 255, 0.8); max-width: 320px; padding: 10px;
}
.tile { background: rgba(9, 111, 235, 0.7); padding: 30px; display: inline-block; color: white; font-size: 180px; text-align: center; min-width: 200px;
}

Impress JS Algorhytmic Generator - Script Codes JS Codes

// ImpressJS : https://github.com/bartaz/impress.js/
(function(e,t){"use strict";var n=function(){var t=e.createElement("dummy").style,n="Webkit Moz O ms Khtml".split(" "),r={};return function(e){if(typeof r[e]==="undefined"){var i=e.charAt(0).toUpperCase()+e.substr(1),s=(e+" "+n.join(i+" ")+i).split(" ");r[e]=null;for(var o in s){if(t[s[o]]!==undefined){r[e]=s[o];break}}}return r[e]}}();var r=function(e){return[].slice.call(e)};var i=function(e,t){var r,i;for(r in t){if(t.hasOwnProperty(r)){i=n(r);if(i!==null){e.style[i]=t[r]}}}return e};var s=function(e,t){return isNaN(e)?t||0:Number(e)};var o=function(t){return e.getElementById(t)};var u=function(t,n){n=n||e;return n.querySelector(t)};var a=function(t,n){n=n||e;return r(n.querySelectorAll(t))};var f=function(t,n,r){var i=e.createEvent("CustomEvent");i.initCustomEvent(n,true,true,r);t.dispatchEvent(i)};var l=function(e){return" translate3d("+e.x+"px,"+e.y+"px,"+e.z+"px) "};var c=function(e,t){var n=" rotateX("+e.x+"deg) ",r=" rotateY("+e.y+"deg) ",i=" rotateZ("+e.z+"deg) ";return t?i+r+n:n+r+i};var h=function(e){return" scale("+e+") "};var p=function(e){return" perspective("+e+"px) "};var d=function(){return o(t.location.hash.replace(/^#\/?/,""))};var v=function(e){var n=t.innerHeight/e.height,r=t.innerWidth/e.width,i=n>r?r:n;if(e.maxScale&&i>e.maxScale){i=e.maxScale}if(e.minScale&&i<e.minScale){i=e.minScale}return i};var m=e.body;var g=navigator.userAgent.toLowerCase();var y=n("perspective")!==null&&m.classList&&m.dataset&&g.search(/(iphone)|(ipod)|(android)/)===-1;if(!y){m.className+=" impress-not-supported "}else{m.classList.remove("impress-not-supported");m.classList.add("impress-supported")}var b={};var w={width:1024,height:768,maxScale:1,minScale:0,perspective:1e3,transitionDuration:1e3};var E=function(){return false};var S=t.impress=function(n){if(!y){return{init:E,"goto":E,prev:E,next:E}}n=n||"impress";if(b["impress-root-"+n]){return b["impress-root-"+n]}var g={};var S=null;var x=null;var T=null;var N=null;var C=null;var k=o(n);var L=e.createElement("div");var A=false;var O=null;var M=function(e){if(O!==e){f(e,"impress:stepenter");O=e}};var _=function(e){if(O===e){f(e,"impress:stepleave");O=null}};var D=function(e,t){var n=e.dataset,r={translate:{x:s(n.x),y:s(n.y),z:s(n.z)},rotate:{x:s(n.rotateX),y:s(n.rotateY),z:s(n.rotateZ||n.rotate)},scale:s(n.scale,1),el:e};if(!e.id){e.id="step-"+(t+1)}g["impress-"+e.id]=r;i(e,{position:"absolute",transform:"translate(-50%,-50%)"+l(r.translate)+c(r.rotate)+h(r.scale),transformStyle:"preserve-3d"})};var P=function(){if(A){return}var t=u("meta[name='viewport']")||e.createElement("meta");t.content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";if(t.parentNode!==e.head){t.name="viewport";e.head.appendChild(t)}var o=k.dataset;N={width:s(o.width,w.width),height:s(o.height,w.height),maxScale:s(o.maxScale,w.maxScale),minScale:s(o.minScale,w.minScale),perspective:s(o.perspective,w.perspective),transitionDuration:s(o.transitionDuration,w.transitionDuration)};C=v(N);r(k.childNodes).forEach(function(e){L.appendChild(e)});k.appendChild(L);e.documentElement.style.height="100%";i(m,{height:"100%",overflow:"hidden"});var l={position:"absolute",transformOrigin:"top left",transition:"all 0s ease-in-out",transformStyle:"preserve-3d"};i(k,l);i(k,{top:"50%",left:"50%",transform:p(N.perspective/C)+h(C)});i(L,l);m.classList.remove("impress-disabled");m.classList.add("impress-enabled");T=a(".step",k);T.forEach(D);x={translate:{x:0,y:0,z:0},rotate:{x:0,y:0,z:0},scale:1};A=true;f(k,"impress:init",{api:b["impress-root-"+n]})};var H=function(e){if(typeof e==="number"){e=e<0?T[T.length+e]:T[e]}else if(typeof e==="string"){e=o(e)}return e&&e.id&&g["impress-"+e.id]?e:null};var B=null;var j=function(e,n){if(!A||!(e=H(e))){return false}t.scrollTo(0,0);var r=g["impress-"+e.id];if(S){S.classList.remove("active");m.classList.remove("impress-on-"+S.id)}e.classList.add("active");m.classList.add("impress-on-"+e.id);var o={rotate:{x:-r.rotate.x,y:-r.rotate.y,z:-r.rotate.z},translate:{x:-r.translate.x,y:-r.translate.y,z:-r.translate.z},scale:1/r.scale};var u=o.scale>=x.scale;n=s(n,N.transitionDuration);var a=n/2;if(e===S){C=v(N)}var f=o.scale*C;if(S&&S!==e){_(S)}i(k,{transform:p(N.perspective/f)+h(f),transitionDuration:n+"ms",transitionDelay:(u?a:0)+"ms"});i(L,{transform:c(o.rotate,true)+l(o.translate),transitionDuration:n+"ms",transitionDelay:(u?0:a)+"ms"});if(x.scale===o.scale||x.rotate.x===o.rotate.x&&x.rotate.y===o.rotate.y&&x.rotate.z===o.rotate.z&&x.translate.x===o.translate.x&&x.translate.y===o.translate.y&&x.translate.z===o.translate.z){a=0}x=o;S=e;t.clearTimeout(B);B=t.setTimeout(function(){M(S)},n+a);return e};var F=function(){var e=T.indexOf(S)-1;e=e>=0?T[e]:T[T.length-1];return j(e)};var I=function(){var e=T.indexOf(S)+1;e=e<T.length?T[e]:T[0];return j(e)};k.addEventListener("impress:init",function(){T.forEach(function(e){e.classList.add("future")});k.addEventListener("impress:stepenter",function(e){e.target.classList.remove("past");e.target.classList.remove("future");e.target.classList.add("present")},false);k.addEventListener("impress:stepleave",function(e){e.target.classList.remove("present");e.target.classList.add("past")},false)},false);k.addEventListener("impress:init",function(){var e="";k.addEventListener("impress:stepenter",function(n){t.location.hash=e="#/"+n.target.id},false);t.addEventListener("hashchange",function(){if(t.location.hash!==e){j(d())}},false);j(d()||T[0],0)},false);m.classList.add("impress-disabled");return b["impress-root-"+n]={init:P,"goto":j,next:I,prev:F}};S.supported=y})(document,window);(function(e,t){"use strict";var n=function(e,t){var n=null;return function(){var r=this,i=arguments;clearTimeout(n);n=setTimeout(function(){e.apply(r,i)},t)}};e.addEventListener("impress:init",function(r){var i=r.detail.api;e.addEventListener("keydown",function(e){if(e.keyCode===9||e.keyCode>=32&&e.keyCode<=34||e.keyCode>=37&&e.keyCode<=40){e.preventDefault()}},false);e.addEventListener("keyup",function(e){if(e.keyCode===9||e.keyCode>=32&&e.keyCode<=34||e.keyCode>=37&&e.keyCode<=40){switch(e.keyCode){case 33:case 37:case 38:i.prev();break;case 9:case 32:case 34:case 39:case 40:i.next();break}e.preventDefault()}},false);e.addEventListener("click",function(t){var n=t.target;while(n.tagName!=="A"&&n!==e.documentElement){n=n.parentNode}if(n.tagName==="A"){var r=n.getAttribute("href");if(r&&r[0]==="#"){n=e.getElementById(r.slice(1))}}if(i.goto(n)){t.stopImmediatePropagation();t.preventDefault()}},false);e.addEventListener("click",function(t){var n=t.target;while(!(n.classList.contains("step")&&!n.classList.contains("active"))&&n!==e.documentElement){n=n.parentNode}if(i.goto(n)){t.preventDefault()}},false);e.addEventListener("touchstart",function(e){if(e.touches.length===1){var n=e.touches[0].clientX,r=t.innerWidth*.3,s=null;if(n<r){s=i.prev()}else if(n>t.innerWidth-r){s=i.next()}if(s){e.preventDefault()}}},false);t.addEventListener("resize",n(function(){i.goto(e.querySelector(".step.active"),500)},250),false)},false)})(document,window)
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
// INIT APP
impress().init();
$( document ).ready(function() {	var c = document.getElementById("c");	var ctx = c.getContext("2d");	var fontSize = 15;	initCanvas(c);	var txs = queryTxs();	initLinks(c, txs, fontSize);	$(window).resize( respondCanvas ); function respondCanvas(){	initCanvas(c); }	var txChars = [];	var columns = c.width/fontSize;	var rainingTxs = [];	for(var x = 0; x < columns; x++) {	rainingTxs[x] = c.height;	txChars[x] = txs[x % txs.length].split("");	}	function draw()	{	ctx.fillStyle = "rgba(0, 0, 0, 0.07)";	ctx.fillRect(0, 0, c.width, c.height);	ctx.fillStyle = "rgba(0, 255, 0, 1)";	ctx.font = fontSize + "px courier";	for(var i = 0; i < rainingTxs.length; i++)	{	var character = txChars[i][(rainingTxs[i] -1) % txChars[0].length];	ctx.fillText(character, i*fontSize, rainingTxs[i]*fontSize);	if(rainingTxs[i]*fontSize > c.height && Math.random() > 0.993){	rainingTxs[i] = 0	}	rainingTxs[i]++;	} window.requestAnimFrame(draw);	} draw()
});
function initCanvas(canvas){	canvas.setAttribute('width', window.innerWidth);	canvas.setAttribute('height', window.innerHeight-50);	c.getContext("2d").fillStyle = "rgba(10, 10, 10, 1)";	c.getContext("2d").fillRect(0, 0, c.width, c.height);
}
function queryTxs() {	var txs = reserveTxs;	$.ajax( {	url :"https://mainnet.helloblock.io/v1/transactions/latest?limit=40&cors=true",	async : false,	success: function( data ) {	data.data.transactions.forEach(function(tx){	txs.unshift(tx.txHash);	})}	});	return txs;
}
function initLinks(canvas, txs, fontSize){	canvas.onclick = function(e){	var tx = txs[Math.floor(e.x / fontSize) % txs.length];	window.open('http://blockchain.info/tx/' + tx,'_blank');	};
}
//if the query fails..
var reserveTxs = [	"945692d1dbd08e17a5021add6d61d10d7a994cc9bb2bb3c69c998fe4c696bd9b",	"412cda8f922c384c23ddce2e61465f720eea6911276f928fd5a71ce0a4d49fcf",	"2e54b194a268b716ed8229b91c5065c1265e40771284e106782e80a670f49a7d",	"32f0f9d1f841ba96603ec73ba0c0f4cd0a55550cf62c2eeb0b03cec7b8c2455b",	"c340b331ef68270a0052fbe2533a2a71fd827d720bbbf40055a146b522c9f4aa",	"97c91743d92c996a3f53812b6f532fa66c135d7e9b3f6c0ca76172315f941569",	"53b7347f11441e205338104d6403c1ae88d3aede45b515830cb7b0a53bb35b9c",	"6fb62157a8d0317c65b4284c213b053c80aa1aad2ea7eb2960ed60263393e016",	"12a27398545ab896a4666f043bd898583b6680c9f532f770982c17ded325d93e",	"dbaabb00b2f3cdcb75ea46e3656a6f09b365dc183285d0b9ead2180ed77a2bf8",	"5da9092d4e9d3faa79aa1f91551c151b22e86565bcf076d6876e06cdb7f667ad",	"caced2d30b01dade46339dd919759af01ba3511b5c1328012d5e87a5d2c8c14e",	"335fb99696af726316afe05e596f5f0fc737f1aac16d0eadbd291eedce1dc5f1",	"1b0b48db470624ac1f4fe9ef0a4cbb410bca44ef0eb298b6cf78cd47738af4b5",	"6e07bc9c584d15a28266ff36792b5abb7aebad26d8794ccdc99ecde25c67bd8b",	"0b263beef47427dc64f30de7cfc1b7e36959311f298575d5f54ec9128fa5718a",	"74f2ae7b13ded1594c6da408a0fed642e6289621ee13a0d3cf53ea9171e62b8f",	"752a3de2bfe931b2099a1f434c9a2bdfa97f14baea0f3f7e4cdbaae77b1d33de",	"55533630251342fae863b4f3738a7b0a69a67b28b678be015c6fb044fd00b4fe",	"df784995d9cfdc38ca6fee173ae1c03d9dc571cad9b73dc886d9bcca9970cb1a",	"2530b9a3228235eafe88f47d116e0b6170d519e66f8459a285285bde9c98e90e"
];
Impress JS Algorhytmic Generator - Script Codes
Impress JS Algorhytmic Generator - Script Codes
Home Page Home
Developer Jeff Scott Ward
Username jeffscottward
Uploaded August 28, 2022
Rating 3
Size 7,906 Kb
Views 30,360
Do you need developer help for Impress JS Algorhytmic Generator?

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!

Jeff Scott Ward (jeffscottward) Script Codes
Name
XBOX 360 UI
Object Oriented SASS Framework
Sprite Animation
Brick Breaker
3D Hexagon Text Roller
Panning Wall Tiles
A Pen by Jeff Scott Ward
Iso-Metric Snake
Pure CSS Responsive Slider
Trader Phone APP UI
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!