浏览代码

Include eye client offset in logo animation

Danilo Gómez Gómez 5 年之前
父节点
当前提交
e863adc0a6
共有 2 个文件被更改,包括 8 次插入6 次删除
  1. 2 2
      layout/_base.html
  2. 6 4
      static/js/eye.js

+ 2 - 2
layout/_base.html

@@ -15,11 +15,11 @@
 	<meta name="theme-color" content="#ffffff">
 	<script src="{{ 'js/eye.js' | static }}"></script>
 </head>
-<body>
+<body id="body">
 	<header>
 		<div class="header-box">
 			<div class="lbox">
-				<div class="vbox">
+				<div id="lang-chooser" class="vbox">
 					<a class="first en {% if en %}selected{% endif %}" href="{{ 'en' | lang_url }}">en</a>
 					<a class="first {% if es %}selected{% endif %}" href="{{ 'es' | lang_url }}">es</a>
 				</div>

+ 6 - 4
static/js/eye.js

@@ -1,9 +1,10 @@
 // nilox (c)
 
 window.onload = function () {
-    var eye = document.getElementById('logo');
-
-    var eyeDoc = eye.contentDocument;
+    const body = document.getElementById('body');
+    const lang = document.getElementById('lang-chooser');
+    const eye = document.getElementById('logo');
+    const eyeDoc = eye.contentDocument;
     const logo = eyeDoc.getElementById('alucho-logo');
     const iris = eyeDoc.getElementById('iris');
     const pupil = eyeDoc.getElementById('pupil');
@@ -20,7 +21,8 @@ window.onload = function () {
     const oY = logo.getAttribute('height') / 2.;
 
     window.onmousemove = function (ev) {
-        const r = ev.clientX / window.innerWidth;
+        const eyeOffset = body.getBoundingClientRect().x + lang.clientWidth + eye.clientWidth / 2;
+        const r = (ev.clientX - eyeOffset) / (window.innerWidth - eyeOffset) / 2 + .5;
 
         const iX = istart + ilength * r;
         iris.setAttribute('cx', iX);