https://backwash.online BACKWASH Fri, 26 Mar 2021 13:23:48 +0000 https://backwash.online en https://backwash.online/LANDING Fri, 26 Mar 2021 13:23:48 +0000 BACKWASH https://backwash.online/LANDING &nbsp; <img src="https://freight.cargo.site/t/original/i/aaefaca0182cbecc6cfc2b50d1bce80568b2df0a906478cc8216a50933371020/eyeback.png" class="eye" style="z-index: 1 a"> <img src="https://freight.cargo.site/t/original/i/b91f5cc83deefcd323ae4fd3d14bb696c3aa3b089684f43ef868300c9a3215ad/eye-copy.png" class="eye eye-left" style="z-index: 2; transform: translateY(22.4823px) translateX(35.3632px);"> <img src="https://freight.cargo.site/t/original/i/4ead138bb92935f03015b42b839d5c880bb6a8f6735339c2ebec397eb8450ce7/eyefront.png" class="eye" style="z-index: 3;"> <img src="https://freight.cargo.site/t/original/i/aaefaca0182cbecc6cfc2b50d1bce80568b2df0a906478cc8216a50933371020/eyeback.png" class="eye" style="z-index: 1;"> <img src="https://freight.cargo.site/t/original/i/b91f5cc83deefcd323ae4fd3d14bb696c3aa3b089684f43ef868300c9a3215ad/eye-copy.png" class="eye eye-right" style="z-index: 2; transform: translateY(23.4038px) translateX(34.7602px);"> <img src="https://freight.cargo.site/t/original/i/4ead138bb92935f03015b42b839d5c880bb6a8f6735339c2ebec397eb8450ce7/eyefront.png" class="eye" style="z-index: 3; "> <img class="mouth zoom" src="https://freight.cargo.site/t/original/i/e070809715fe3323e5c530e209a7a4b80f282aad82b192c6abac177f7c0efac5/pixelated-backwash-mouth.png"> .zoom { padding: 20px; transition: transform .2s; /* Animation */ } .zoom:hover { transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } .page-header:after { pointer-events: none; animation: grain 8s steps(10) infinite; background-image: url("https://freight.cargo.site/t/original/i/0d8c26431a571a9d14cfcce5bacd026ad188b0c2a475ba05ec91ce0aa8410668/noiseOverlay.png"); content: ""; height: 300%; left: -50%; opacity: 0.5; position: fixed; top: -100%; width: 300%; } @keyframes grain { 0%, 100% { transform:translate(0, 0) } 10% { transform:translate(-5%, -10%) } 20% { transform:translate(-15%, 5%) } 30% { transform:translate(7%, -25%) } 40% { transform:translate(-5%, 25%) } 50% { transform:translate(-15%, 10%) } 60% { transform:translate(15%, 0%) } 70% { transform:translate(0%, 15%) } 80% { transform:translate(3%, 35%) } 90% { transform:translate(-10%, 10%) } } .eye{ position:absolute; width: 15%; } .mouth{ width: 50%; margin-top: 5%; height: auto; } .eyetable{ margin:auto; width: 50%; height: auto; } .alltable{ width: auto; margin: 50vh auto; position: absolute; top: 0%; -ms-transform: translateY(-50%); transform: translateY(-50%); } if (screen.width { var xVal = evt.pageX var scaleSize = window.innerWidth/1680 var scaledX = xVal/scaleSize; var x_1_val = scaleSize*((55/614)*scaledX-55); if (xVal>scaleSize*614){ x_1_val = scaleSize*(Math.tanh((scaledX-614)/190)*55); } var x_2_val = scaleSize*((90/1042)*scaledX-90); if (xVal55*scaleSize){ var angle1 = Math.atan(y_1_val/x_1_val) x_1_val = 55*scaleSize*Math.cos(angle1)*Math.sign(x_1_val) y_1_val = 55*scaleSize*Math.sin(angle1)*Math.sign(x_1_val) } if ((x_2_val**2 + y_2_val**2)**(0.5)>55*scaleSize){ var angle2 = Math.atan(y_2_val/x_2_val) x_2_val = 55*scaleSize*Math.cos(angle2)*Math.sign(x_2_val) y_2_val = 55*scaleSize*Math.sin(angle2)*Math.sign(x_2_val) } eye1.style.transform = `translateY(${y_1_val}px) translateX(${x_1_val}px)`; eye2.style.transform = `translateY(${y_2_val}px) translateX(${x_2_val}px)`; });