Publicidad
Ojos que miran el cursor script
Hola otra vez, en este tutorial les voy a enseñar algo muy simple pero divertido, serán unos ojos que miran el cursor siempre, para hacer esto solo utilizaremos un script, y el codigo para los ojos, empezemos:
Lo primero qu tienen que hacer es irse a Blogger - Su blog - Diseño - Editar HTML, y buscan la siguiente linea:
</head>
Justa arriba de ella, agregan el siguiente script:
<script type='text/javascript'>
//<![CDATA[
// Ojos que siguen al cursor
// Script original de Oopstudios.com
// Adaptado por ciudadblogger.com
EYES = {};
EYES.stack = [];
//
EYES.follow = function (eye) {
var el1 = document.getElementById (eye);
var el2 = el1.getElementsByTagName ("IMG");
el2 = el2[0];
el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;
el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";
el1.maxDist = 6 * el1.offsetWidth;
EYES.stack.push ([el1, el2]);
};
EYES.mousemove = function (e) {
if (!EYES.stack.length) {
return;
}
//
var mouseX = mouseY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//
for (var e=0, l=EYES.stack.length; e<l; e++) {
var el = EYES.stack[e];
var elX = elY = 0;
if (el[0].offsetParent) {
obj = el[0];
do {
elX += obj.offsetLeft;
elY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);
el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);
var difX = mouseX - el[0].centreX;
var difY = mouseY - el[0].centreY;
var dTan = Math.atan2 (difX, difY);
var dist = Math.sqrt ((difX * difX) + (difY * difY));
dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));
var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);
var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);
el[1].style.margin = newY + "px 0 0 " + newX + "px";
}
};
if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);
else document.addEventListener ("mousemove", EYES.mousemove, false);
//]]>
</script>
Ya tienen el script, ahora solo falta agregar los ojos, estos los pueden agregar en cualquier parte del blog, una entrada, un gadget etc, bueno para egregarlos, les dejare 4 diferentes diseños, ustedes seleccionan el que mas les guste:

<div style="position:relative; height:150px; margin-bottom:30px;">
<div id="Ojo1" style="width: 170px; height: 140px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCiATYX_K77WZApoU2N4WcVsXIJOwz8kIIc8xtPzyJDDlsl2zCK5JdtXueU4mMvIDKORn5mB3ycDUyHd_lDRAOAG5cK64TquDRIvyZZjQAgEEa1S17KE1RtlkcN29PQ4t-rahWTMQ-Pw/s170/ojo\_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifoRgRY8I_aNNPUodeD2MlRh0rNtruNExSVTfsyNthiHxT0KPxLiEy8RttKKS9GzELwrUSdQe_KFKVgvpwbagdwDK3_6Sfks5oanGVEbqhg15D8c8UhQLKmriZxfL0OJFRnrZgbOvK2M/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWkG3q7X3k3RjqTI5yeIu_DZk89Bzp8dyDOmJ7RWO4eVZD1UiTuM9DJiVNvfX_RSPhRY-hvJSUux6oCfRlWObe4wsm1Fyz8WMtOhiMmtJjsljJ1mDyXUMPIf9_R7ag0qGBE32WIijN_U/s170/ojo\_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifoRgRY8I_aNNPUodeD2MlRh0rNtruNExSVTfsyNthiHxT0KPxLiEy8RttKKS9GzELwrUSdQe_KFKVgvpwbagdwDK3_6Sfks5oanGVEbqhg15D8c8UhQLKmriZxfL0OJFRnrZgbOvK2M/s30/pupila.png" width="23" height="23" /></div>
</div>
<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo3" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ecOA6z564rQmlsUKnGk0Llw9LC4WoAVdL_Y9axRf7wDhe7PB34yTBIUbWhYyE_2gqwa7J4RCgFcSQzkql32WGwqWkcKri_qqba_r1MoWNZu6x0MPjHA1zntxrkKlMZ0KHrS4C1N2oqg/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj589eJHlJCOMWft_6sq0QajfHj4-dthzSzhqWIsOTJ5MiCa-eaDOllB05KDoxbzxMT4IjkpAqEDnHfp-lrtyG7skrgyKHUVRWtdpf4887oEaM1DJaa4WnPRTQQD2njXblNXiCOjiii_Po/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo4" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjT9YPWd0AB2W3MVfOhdMsx26mo97sfBDWTHEAV2uQk7z0J2N_ne6Fi1O-cr8152_uPnd502gydDmYdviy8INW6RlhF3hgsIzYxm1P6o-4jnkOj-KPkZSykg8if0FjKzmGf_DU4V68dfA/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj589eJHlJCOMWft_6sq0QajfHj4-dthzSzhqWIsOTJ5MiCa-eaDOllB05KDoxbzxMT4IjkpAqEDnHfp-lrtyG7skrgyKHUVRWtdpf4887oEaM1DJaa4WnPRTQQD2njXblNXiCOjiii_Po/s34/pupila.png" width="30" height="30" /></div>
</div>
<script type="text/javascript">
EYES.follow ('Ojo3');
EYES.follow ('Ojo4');
</script>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo5" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWy07lPiZY5spfN97jY9Hm2FYHp6nvw6Obxbgy3ze_IuWEKn2dc6oL2Z_RRFm7GHMjtBz4AUVaTWEUXs0RgYNN4aUxsOSsABRcGYCXu-yqMuzr-b-Cp5MTU5ZWVq2umz9ea9rjPpbbA4/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVuFs7SqeapKFTJG7zwIE5LTDvr_ERESRW8HjpRbY2HvHFwZ0-v69Q0tzNzuKVqgrMDGQFQj1tQ-9_1IhaYIWRVpUt1UAtw-17RWipG6shtDfGC-9GZW9iGSxiw1DD1NhIt3quV9MoyL8/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo6" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm4RaKXEiyUJ3OhUbwj44rMUqgk65DPlSU9EZpvR0CpVWwel7vUS7knkZC4Zvhwn8lqhYl-yRRVVyPtKQJHCkDV64x-Yv7Jyn3PzJRpNHxFNuGv52cp1iDC2RQZZvSjO7JBSxwOfA-Fa4/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVuFs7SqeapKFTJG7zwIE5LTDvr_ERESRW8HjpRbY2HvHFwZ0-v69Q0tzNzuKVqgrMDGQFQj1tQ-9_1IhaYIWRVpUt1UAtw-17RWipG6shtDfGC-9GZW9iGSxiw1DD1NhIt3quV9MoyL8/s34/pupila.png" width="30" height="30" /></div>
</div>
<script type="text/javascript">
EYES.follow ('Ojo5');
EYES.follow ('Ojo6');
</script>

<div style="position:relative; height:161px; margin-bottom:30px;">
<div id="Ojo7" style="width: 180px; height: 161px; background: url(http://lh6.googleusercontent.com/-Co\_Tz9uS1og/Tq9Z\_kcMmUI/AAAAAAAAB3I/XT\_s4Dy0GAs/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht22BmbngqqXY7pxovvZooK-n9vmguOJ88vN4ycwj7FLEJ1tWm1i0Ldus04aHjP7XBWj-sjk_C9D07Ml2z669puzwo-S9X9IWSvdxQnWxGyIWrqtF7RMdXOfGt-_WPfg_1HLI8R_bZA1E/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo8" style="width: 180px; height: 161px; background: url(http://lh5.googleusercontent.com/-U0ZSRONSNGM/Tq9Z\_l-nKjI/AAAAAAAAB3M/PruPm2mkezY/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht22BmbngqqXY7pxovvZooK-n9vmguOJ88vN4ycwj7FLEJ1tWm1i0Ldus04aHjP7XBWj-sjk_C9D07Ml2z669puzwo-S9X9IWSvdxQnWxGyIWrqtF7RMdXOfGt-_WPfg_1HLI8R_bZA1E/s71/pupila.png" width="65" height="65" /></div>
</div>
<script type="text/javascript">
EYES.follow ('Ojo7');
EYES.follow ('Ojo8');
</script>
Y eso es todo, en color rojo esta marcada la posicion en que estaran los ojos, si lo quieren cambiar, para que les quede bien, hagan clic derecho sobre el ojo y seleccionen Inspeccionar Elemento y ahi del lado derecho podran cambiar las posiciones, cuando ya lo tengan bien, solo editan el codigo ya ya esta.
El contenido y material publicado así como la asistencia impartida es completamente gratuita. Tu contribución permite que este sitio continue en funcionamiento.
Categorias:
Efectos
Que curioso! Imagino que este recurso al llamarle la atención al usuario, baja el porcentaje de rebote, y mejora el tiempo de estancia en el sitio.
ResponderEliminar