<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Abby Chen is a designer based in New York. This is one of her code snippets. More work at info at http://abbychen.me">
<meta name="author" content="Abby Chen">
<title> ACCS.00004</title>
<!------>
<div id="master_wrapper">
   <svg id="svg_wrapper" class="ltrs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614 800">
     <path id="ltr_p" d="M124.25,0H-.14V799h108V702.75h16.42l18.43-18.43V18.43ZM117,556.09H98.6V145.93H117Z" transform="translate(0.14)"/>
     <g id="moved">
       <path id="ltr_a1" d="M279.87,0H177L158.55,18.43V799h62.19V736.57h18.43V799H298.3V18.43Zm-41,644.61H221.05V145.94h17.82Z" transform="translate(0.14)"/>
       <path id="ltr_a2" d="M279.87,0H177L158.55,18.43V799h62.19V736.57h18.43V799H298.3V18.43Zm-41,644.61H221.05V145.94h17.82Z" transform="translate(0.14)"/>
     </g>
     <polygon id="ltr_s1" points="414.13 300.37 414.13 318.79 457.13 318.79 457.13 780.62 457.13 799.04 314.31 799.04 314.31 520.08 357.31 520.08 357.31 501.65 314.31 501.65 314.31 18.44 314.31 0.01 457.13 0.01 457.13 300.37 414.13 300.37"/>	
     <polygon id="ltr_s2" points="571.28 301.32 571.28 319.75 614.28 319.75 614.28 781.57 614.28 800 471.46 800 471.46 521.03 514.46 521.03 514.46 502.61 471.46 502.61 471.46 19.39 471.46 0.96 614.28 0.96 614.28 301.32 571.28 301.32"/>
  </svg>
  
</div>

body{
  background-color: #faf7f2;
  height: 98vh;
  overflow: hidden;
  cursor: ns-resize;
}
#master_wrapper{
  width: auto;
  margin: auto;
  text-align: center;
}
#svg_wrapper{
  height: 98vh;
  width: auto;
  margin: auto;
  position: relative;
}
.ltrs{
  fill:#fa4f3b;
}
#ltr_a1{
  transform:translateY(0%);
}
#ltr_a2{
  transform:translateY(110%);
}
#moved{
  transform:translateY(0%);
}

window.addEventListener('mousemove', function(e){
			//console.log(e);
			var moveTarget = document.getElementById('moved');
			var windowH = window.innerHeight;
			var mouseY = e.y;	
			var mouseIndex = Math.round((mouseY/windowH)*100);
			var moveIndex = (mouseIndex-100)*1.1;
			var moveString = 'translateY('+moveIndex+'%)';
			moveTarget.style.transform = moveString;			
		});