4 items
• Download ./*
voidvoid-1.html
2 days ago• 6
{}
<!DOCTYPE html>
<!--
Author: Twily 2022
Website: twily.info
-->
<html>
<head>
<title>Twilys Void</title>
<meta name="viewport" content="width=1920" />
<style type="text/css">
html,body {
background: #000; color: #eee;
font-family: Sans-serif; font-size: 10pt;
width: 100%; height: 100%; overflow: hidden;
}
a:link, a:visited { color: #ee0; text-decoration: none; }
a:hover, a:active { color: #ee0; }
.tbl {
display: table; table-layout: fixed;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.void {
display: inline-block;
/*border: 1px solid #666;*/
/*overflow: hidden;*/
position: absolute;
top: 50%; left:50%;
/*transform-style: preserve-3d;*/
}
#void1 {
width: 100px; height: 100px;
margin-left: -50px; margin-top: -50px;
opacity: 1.0;
}
#void2 {
width: 800px; height: 800px;
margin-left: -400px; margin-top: -400px;
opacity: 0.5;
}
.citem {
width: 10px; height: 10px; font-size: 10px;
text-align: center;
position: absolute; /*transition: .2s ease; glitch effect*/
}
.cimg {
width: 0; height: 0; overflow: visible;
position: relative;
}
.cimg img {
position: absolute; right: 0; top: 0;
filter: hue-rotate(220deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
function rndMinMax(min,max) { // min and max included
return Math.floor(Math.random()*(max-min+1)+min);
}
var void1={};
void1.num=6;
void1.degree=360;
void1.points=Math.round(void1.degree/void1.num)+1;
void1.radius=(100/2)-5;
var void2={};
void2.num=6;
void2.degree=360;
void2.points=Math.round(void2.degree/void2.num)+1;
void2.radius=(800/2)-5;
var huedeg=0;
var huedeg2=0;
var lastDir=true;
var lastDir2=true;
function moveHue() {
//var rnd=rndMinMax(0,1);
//var inrnd=rndMinMax(0,10);
//var dir;
//if(inrnd<=6) dir=lastDir;
//else dir=!lastDir;
//lastDir=rnd;
if(true) {
huedeg+=.5;
} else {
huedeg-=1;
}
if(huedeg>360) huedeg=0;
if(huedeg<0) huedeg=360;
var cimg=$('void1').getElementsByClassName('cimg');
for(var i=0;i<cimg.length;i++) {
var img=cimg[i].getElementsByTagName('img')[0];
img.style.filter="hue-rotate("+huedeg+"deg)";
}
//rnd=rndMinMax(0,1);
//inrnd=rndMinMax(0,10);
//if(inrnd<=6) dir=lastDir2;
//else dir=!lastDir2;
//lastDir2=rnd;
if(true) {
huedeg2+=1;
} else {
huedeg2-=1;
}
if(huedeg2>360) huedeg2=0;
if(huedeg2<0) huedeg2=360;
var cimg=$('void2').getElementsByClassName('cimg');
for(var i=0;i<cimg.length;i++) {
var img=cimg[i].getElementsByTagName('img')[0];
img.style.filter="hue-rotate("+huedeg2+"deg)";
}
}
var radian=(Math.PI/180);
function digits() { // place the digits in position
var mylog=[],itostr="",html="",x,y,orbit=50,cangle;
for(var i=0;i<void1.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && !$('c1i'+itostr)) {
cangle=(i*void1.points-100);
while(cangle>360) cangle-=360; // ex 630deg - 360 == 270deg
while(cangle<0) cangle+=360; // ex -90deg + 360 == 270deg
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
var rnd=rndMinMax(0,1);
//html+="<a onclick=\"cclick(this.id);\" href=\"#\" target=\"_self\" class=\"citem\" id=\"c1i"+itostr+"\" style=\"top: "+(y+void1.radius)+"px; left: "+(x+void1.radius)+"px;\">"+itostr+"</a>";
html+="<div class=\"cimg\" id=\"c1i"+itostr+"\" style=\"top: "+(y+void1.radius)+"px; left: "+(x+void1.radius)+"px;\" data-orbit=\""+orbit+"\" data-dir=\""+rnd+"\"><img src=\"./void.png\"></div>";
}
}
$('void1').innerHTML+=html;
mylog=[],itostr="",html="",x,y,orbit=400,cangle;
for(var i=0;i<void2.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && !$('c2i'+itostr)) {
cangle=(i*void2.points-90);
while(cangle>360) cangle-=360; // ex 630deg - 360 == 270deg
while(cangle<0) cangle+=360; // ex -90deg + 360 == 270deg
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
var rnd=rndMinMax(0,1);
//html+="<a onclick=\"cclick(this.id);\" href=\"#\" target=\"_self\" class=\"citem\" id=\"c1i"+itostr+"\" style=\"top: "+(y+void1.radius)+"px; left: "+(x+void1.radius)+"px;\">"+itostr+"</a>";
html+="<div class=\"cimg\" id=\"c2i"+itostr+"\" style=\"top: "+(y+void2.radius)+"px; left: "+(x+void2.radius)+"px;\" data-orbit=\""+orbit+"\" data-dir=\""+rnd+"\"><img src=\"/img/void3.png\"></div>";
}
}
$('void2').innerHTML+=html;
}
var fps=15;
var spina=90;
var spinb=90;
var spindir=0;
function spin() { // loop and spin the digits around CCW/CW
if(spina>360) spina=0;
if(spina<0) spina=360;
if(spinb>360) spinb=0;
if(spinb<0) spinb=360;
//if(spindir==-1) spina++;
//else if(spindir==1) spina--;
spina-=0.8;
spinb-=1.2;
var mylog=[],itostr="",x,y,orbit=50,cangle;
for(var i=0;i<void1.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && $('c1i'+itostr)) {
cangle=(i*void1.points-spina);
while(cangle>360) cangle-=360;
while(cangle<0) cangle+=360;
orbit=parseInt($('c1i'+itostr).getAttribute('data-orbit'));
var lastodir=$('c1i'+itostr).getAttribute('data-dir');
if(lastodir=="1") {
orbit+=1;
} else {
orbit-=1;
}
if(orbit>100) {
orbit=100;
lastodir="0";
}
if(orbit<0) {
orbit=0;
lastodir="1";
}
$('c1i'+itostr).setAttribute('data-orbit',orbit);
$('c1i'+itostr).setAttribute('data-dir',lastodir);
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
var rad45=cangle-70;
if(rad45<0) {
rad45=360-Math.abs(rad45);
}
$('c1i'+itostr).style.top=(y+void1.radius)+"px";
$('c1i'+itostr).style.left=(x+void1.radius)+"px";
$('c1i'+itostr).style.transform="rotateZ("+(rad45)+"deg)";
}
}
mylog=[],itostr="",x,y,orbit=400,cangle;
for(var i=0;i<void2.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && $('c2i'+itostr)) {
cangle=(i*void2.points-spinb);
while(cangle>360) cangle-=360;
while(cangle<0) cangle+=360;
orbit=parseInt($('c2i'+itostr).getAttribute('data-orbit'));
var lastodir=$('c2i'+itostr).getAttribute('data-dir');
if(lastodir=="1") {
orbit+=1;
} else {
orbit-=1;
}
if(orbit>500) {
orbit=500;
lastodir="0";
}
if(orbit<200) {
orbit=200;
lastodir="1";
}
$('c2i'+itostr).setAttribute('data-orbit',orbit);
$('c2i'+itostr).setAttribute('data-dir',lastodir);
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
var rad45=cangle-70;
if(rad45<0) {
rad45=360-Math.abs(rad45);
}
$('c2i'+itostr).style.top=(y+void2.radius)+"px";
$('c2i'+itostr).style.left=(x+void2.radius)+"px";
$('c2i'+itostr).style.transform="rotateZ("+(rad45)+"deg)";
}
}
moveHue();
}
function windowRez() {
var iw=window.innerWidth;
var ih=window.innerHeight;
//if(iw>ih) {
// $('spacer').style.minWidth="1920px";
// $('spacer').style.width="1920px";
// document.querySelector('meta[name="viewport"]').setAttribute("content","width=1920");
//} else {
// $('spacer').style.minWidth="1080px";
// $('spacer').style.width="1080px";
// document.querySelector('meta[name="viewport"]').setAttribute("content","width=1080");
//}
}
window.onresize=function() {
windowRez();
}
var lastupdate=0;
function init() {
windowRez();
digits();
var iS,spintoggle=false;
if(!spintoggle) {
lastupdate=new Date().getTime();
iS=setInterval(function() { spin(); },1000/fps);
if(spindir==-1 || spindir==0) spindir=1;
else if(spindir==1) spindir=-1;
} else {
clearInterval(iS);
}
spintoggle=!spintoggle;
}
</script>
</head>
<body onload="init();">
<div style="width: 1920px; min-width:1920px;" id="spacer"> </div>
<div class="tbl" style="width: 100%; height: 100%; position: fixed; top:0; left:0;">
<div class="tr">
<div class="td" style="text-align:center; vertical-align:middle;">
<div style="position: relative; display: inline-block;">
<div class="void" id="void1"></div>
<div class="void" id="void2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Top
©twily.info 2013 - 2025
2 461 115 visits