Ir arriba e ir abajo con Efecto Scriptaculous con texto
El Ir arriba y el ir abajo ya lo hemos visto en muchas ocasiones, en muchos sitios web y creo que aquí también. Pero hay un problema: Este efecto siempre es utilizado con una imagen.
Déjenme explicarles a qué me refiero: Si tenemos un blog, ese blog pesa mucho ya que tiene muchas imágenes, las cuales relentizan el blog. Si usamos Scriptaculous, lo relentizamos más ya que es una librería un poco mas pesada.
Ahora, para quizá ahorrarnos unos segundos de tiempo de espera en una página web en la que usamos scriptaculous podemos usar texto.
Déjenme explicarles a qué me refiero: Si tenemos un blog, ese blog pesa mucho ya que tiene muchas imágenes, las cuales relentizan el blog. Si usamos Scriptaculous, lo relentizamos más ya que es una librería un poco mas pesada.
Ahora, para quizá ahorrarnos unos segundos de tiempo de espera en una página web en la que usamos scriptaculous podemos usar texto.
Viendo en Ciudad Blogger, encontré este tutorial y me pregunté si podría hacerse con texto en lugar de imágenes, y lo conseguí y lo comparto con ustedes.
El tutorial:
Primeramente agregamos lo siguiente antes de </head>:
Luego, para poderlo aplicar, dice que apliquemos lo siguiente antes de </body>:
Y ya, ya lo tenemos, pero con imagen. Ahora vamos a hacer lo mismo, pero sin usar ninguna imagen, agregamos esto:
Si se fijan, en lo que está marcado en negrita, en el segundo (por donde dice url de la imagen), lo que hicimos fue cambiar todo lo que contiene la etiqueta img y reemplazarlo por texto.
Pueden ver un ejemplo de este efecto en ésta página.
Eso es todo, si tienen alguna pregunta o duda hagan su comentario.
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
Luego, para poderlo aplicar, dice que apliquemos lo siguiente antes de </body>:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
Y ya, ya lo tenemos, pero con imagen. Ahora vamos a hacer lo mismo, pero sin usar ninguna imagen, agregamos esto:
<a href='#header-wrapper' onclick='new Effect.ScrollTo(" outer-wrapper ",{offset:-140}); return false' style='position:fixed; top:0px; right:0; font-size:50px;' title='Ir arriba'>▲</a>Lo que dice: "▲ y ▼ ", son caracteres unicode, aquí, en vagabundia habla más, los cuales los podemos sustituir por cualquiera de estos, por el que nos plazca.
<a href='#footer-wrapper' onclick='new Effect.ScrollTo(" footer-wrapper ",{offset:-140}); return false' style='position:fixed; bottom:0px; right:0; font-size:50px;' title='Ir abajo'>▼</a>
Si se fijan, en lo que está marcado en negrita, en el segundo (por donde dice url de la imagen), lo que hicimos fue cambiar todo lo que contiene la etiqueta img y reemplazarlo por texto.
Pueden ver un ejemplo de este efecto en ésta página.
Eso es todo, si tienen alguna pregunta o duda hagan su comentario.
