<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;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.