caryoscelus
/
caryoscelus-site


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
							<html>
    <head>
        <style type="text/css">
            html, body {
                max-width: 100%;
                overflow: hidden;
            }
            #bg {
                width: 300%;
            }
            #human {
                bottom: -30px;
            }
            * {
                margin: 0;
                padding: 0;
            }
            video {
                margin-left: -10px;
            }
        </style>
    </head>
    <body>
        <script>
        function setX(el, mouse, amount) {
            var width = document.body.clientWidth;
            el.style.position = 'absolute';
            el.style.left = width/2 - amount*(width/2-mouse) - el.clientWidth/2;
        }
        document.onmousemove = function(e) {
            var human = document.getElementById('human');
            var bg = document.getElementById('bg');
            setX(bg, e.pageX, 0.25);
            setX(human, e.pageX, 0.5);
        }
        </script>
        <div>
            <div id="bg">
                <video src="rectface.webm" autoplay loop></video>
                <video src="rectface.webm" autoplay loop></video>
                <video src="rectface.webm" autoplay loop></video>
            </div>
            <video id="human" src="fight.webm" autoplay loop></video>
        </div>
    </body>
</html>