Página inicial Explorar Ajuda
Registrar Entrar
marx
/
alucho
1
0
Fork 0
Arquivos Issues 13 Pull Requests 0 Wiki
Ver código fonte

Include eye client offset in logo animation

Danilo Gómez Gómez 5 anos atrás
pai
da0322925a
commit
e863adc0a6
2 arquivos alterados com 8 adições e 6 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 2 2
      layout/_base.html
  2. 6 4
      static/js/eye.js

+ 2 - 2
layout/_base.html
Ver arquivo 

@@ -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
Ver arquivo 

@@ -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);