Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (II Efectos)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 32

Visitas el mes pasado: 40

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools2 (XII)

La clase Fx.SmoothScroll

imagen mootools

Introducción

El efecto que se consigue con esta clase está relacionado con los enlaces internos de una página. Recordemos que un enlace interno es un enlace que nos lleva a un sitio contreto de esa misma página.


Los enlaces internos

Recordemos un momento cómo funcionan los enlaces internos. La página debe ser demasiado larga (o ancha), de manera que no cabe en la pantalla. Por tanto tenemos las barras de desplazamiento para poder moverla. Sin embargo muchas veces lo que se hace es poner enlaces internos que nos lleven al sitio de la página que le indiquemos. Recordemos cómo funciona un enlace interno.

En primer lugar tenemos el enlace sobre el que pulsamos para ir a otro sitio de la página o "punto de origen", que lo escribiremos así:

<a href="#articulo1">Articulo 1</a>

Este enlace se muestra como un enlace normal, salvo que al pulsar sobre él nos llevará a otro sitio de la misma página, en la cual debemos escribir lo siguiente:

<a name="articulo1">Articulo 1</a>

Esto es lo que se llama "punto de destino", a donde nos lleva el enlace al pulsar sobre él, y que normalmente es un sitio dentro de la misma página que está fuera de la pantalla.

Al pulsar sobre el enlace (punto de origen) nos vamos al "punto de destino" de forma instantánea. Con Fx.SmoothScroll este cambio se produce mediante una transición, viendo el desplazamiento de la página hasta el punto indicado.

Fx.SmothScroll está pensado para cuando tenemos una serie de enlaces internos que controlan los diversos puntos de una página


Instanciar el objeto

Tal como hemos hecho con otras clases Fx, lo primero que hacemos es instanciar el objeto.

efecto=Fx.SmoothScroll({[opciones]});

Vemos que aquí como argumento ponemos una lista de opciones. Las opciones son las mismas que para la clase Fx.Scroll, y además las siguientes opciónes:

La opción links es imprescindible para indicar cuales son los enlaces internos a los que aplicaremos este efecto.


Ejemplo del efecto Fx.SmoothScroll

Vamos a realizar en una página aparte un ejemplo de aplicación del efecto Fx.SmoothScroll. El resultado de la página acabada sera como en el este enlace:

Ejemplo Fx.SmoothScroll


Empezamos por el código HTML de la página. En él ponemos un "div" con la lista de los enlaces:

<div id="menu">
  <ul>
    <li><a href="#articulo1">Articulo 1</a></li>
    <li><a href="#articulo2">Articulo 2</a></li>
    <li><a href="#articulo3">Articulo 3</a></li>
    <li><a href="#articulo4">Articulo 4</a></li>
  </ul>
</div>

Ponemos después el resto del código HTML de la página, el cual consiste en un div "caja1", con una serie de artículos. En el título de cada artículo ponemos el enlace de destino. Después alargamos la página con unas cuantas líneas en blanco.

<div id="caja1">
<h2><a name="articulo1">Articulo 1</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit nulla, malesuada non mollis nec, ultrices vitae dui. Praesent aliquet enim quam, porta gravida ipsum. Donec adipiscing, eros in elementum tincidunt, urna diam aliquet ante, quis lacinia nunc orci id quam. Donec velit lacus, dignissim eu hendrerit in, pulvinar ut metus. Donec sed turpis erat, sit amet suscipit velit. Phasellus rutrum scelerisque lorem, id venenatis ligula aliquet eget. Etiam commodo interdum tempor. Donec velit nibh, dictum sit amet condimentum sollicitudin, mattis id lorem. Quisque vehicula faucibus molestie. Quisque nec urna at arcu auctor facilisis gravida suscipit justo. Mauris ac ullamcorper felis. 
</p>
<h2><a name="articulo2">Articulo 2</a></h2>
<p>Praesent in elit eros, et molestie nulla. Cras lobortis neque eget lorem ullamcorper consectetur. Nam fermentum lobortis consequat. Phasellus non mollis justo. Maecenas ultrices libero id mauris semper ultrices. Curabitur porttitor imperdiet felis, at ornare risus facilisis vitae. Donec sollicitudin convallis urna, vitae sollicitudin augue suscipit eget. Donec porta condimentum porttitor. Vestibulum justo odio, accumsan nec dapibus ac, euismod commodo erat. Praesent iaculis tincidunt lacinia. Nullam bibendum feugiat leo quis viverra. Donec malesuada arcu non lorem semper nec fermentum lorem cursus. Vestibulum nulla nisl, dictum ut dapibus in, ultrices in eros. Suspendisse in diam nisi, eget eleifend magna. Donec fermentum lorem eget eros convallis pellentesque. Aliquam nec lorem mauris, nec imperdiet lacus. 
</p>
<h2><a name="articulo3">Articulo 3</a></h2>
<p>Integer purus dui, tristique vel eleifend vitae, eleifend id nulla. Vestibulum egestas semper condimentum. Fusce facilisis luctus consequat. Sed et facilisis metus. Donec vel viverra risus. Nullam eget lorem nec dolor tincidunt aliquet nec non est. Duis a magna vel sapien dignissim faucibus. Suspendisse potenti. Praesent in tellus ipsum, at dictum tellus. Cras sagittis sagittis nisl sed sollicitudin. </p>
<h2><a name="articulo4">Articulo 4</a></h2>
<p>Phasellus ante urna, condimentum id vulputate a, mollis ut est. Donec at massa in tellus luctus ornare. Ut consectetur, est eget feugiat bibendum, nisi quam consequat lectus, vel pellentesque purus justo in odio. Praesent turpis orci, mattis tincidunt iaculis in, sollicitudin at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet tortor eget risus convallis imperdiet. Aliquam convallis, lectus lacinia ultrices bibendum, quam odio dignissim est, ut commodo mi diam quis erat. Ut porta aliquet porttitor. Vivamus convallis facilisis elit, id bibendum risus facilisis id. Pellentesque volutpat purus ac lorem euismod vulputate vulputate enim semper. 
</p>
</div>
<div id="seguir"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>Fin de página</p>

A continuación ponemos el código CSS. Al menú de enlaces le damos una posicion fija, para poder pulsar en ellos en cualquier momento:

* { font-family: verdana; }
#menu { width: 150px; border: 1px solid black; float: left; position: fixed;  }
#caja1 { width: 500px; border: 4px double blue; margin: 20px 100px 20px 200px;
         padding: 10px 5%; }
#seguir { clear: both; }

y después, para conseguir el efecto en el código javascript-mootools ponemos la clase Fx.SmoothScroll():

efecto1=new Fx.SmoothScroll({
   links: $$("#menu ul li a"),
   duration: 1200,
   transition: "cubic:in:out"
   });

Sólo es necesario instanciar el objeto, con sus propiedades para tener en marcha el efecto. No olvidemos tampoco que tenemos que tener cargados los archivos mootools-core.js y mootools-more.js y escribir el código dentro de la estructura "domready".

La página resultante es la que hemos indicado antes, aunque también la puedes ver en el siguiente enlace:

Ejemplo Fx.SmoothScroll


Para que quede más claro el ejemplo puedes ver el código completo del mismo en el siguente enlace:

Código de "Ejemplo Fx.SmoothScroll"






En la siguiente página vemos el efecto "Sort" que permite alterar el orden de una serie de elementos de una clase.

La clase Fx.Sort()



Manual de Mootools (II Efectos)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com