Impress JS Algorhytmic Generator
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 - 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"
];
Developer | Jeff Scott Ward |
Username | jeffscottward |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 7,906 Kb |
Views | 30,360 |
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!
Name | Size |
Panning Wall Tiles | 2,822 Kb |
3D Hexagon Text Roller | 2,289 Kb |
Lab 49 Logo Animated | 3,749 Kb |
Sprite Animation | 2,669 Kb |
Brick Breaker | 3,547 Kb |
Impress JS Algorhytmic Generator | 7,906 Kb |
Iso-Metric Snake | 5,511 Kb |
Trader Phone APP UI | 6,799 Kb |
Pure CSS Responsive Slider | 5,404 Kb |
A Pen by Jeff Scott Ward | 696,840 Kb |
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!
Name | Username | Size |
Kut D3 | Jellevrswk | 3,687 Kb |
Apple website | Jds317 | 1,835 Kb |
Console fun | Dviate | 1,500 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!