Cómo agregar efectos de transición para páginas Web

Los efectos de transición hacer una página web parece más dinámico, proporcionando una experiencia interactiva rica en medios para los visitantes. Muchos estilos diferentes de transición se pueden utilizar para las imágenes y otros contenidos página Web. Si desea crear presentaciones de diapositivas para una serie de imágenes, o tal vez mostrar y ocultar el uso de transiciones, puede hacerlo a través de JavaScript y CSS. Los efectos de transición se llevan a cabo habitualmente usando jQuery, que es a la vez libre y fácil de usar.

Instrucciones

1 Descargar la librería jQuery JavaScript, que tiene numerosos efectos para añadir animación e interactividad a las páginas Web. Muchos desarrolladores también han creado implementaciones del código jQuery que añaden efectos avanzados a los contenidos web. Estos recursos son fáciles de usar, ya que sólo tiene que descargar el plug-in de jQuery que desee y siga las instrucciones. (Ver Referencias 1, 2)

2 Prepare a su contenido, ya sea texto, imágenes u otros medios de comunicación. La mayoría de los efectos de transición jQuery incluyen la totalidad de su contenido dentro de la página, pero mantienen sus partes ocultas en un primer momento. Estos efectos son una manera de incluir más contenido dentro de una página de lo que es visible en un momento dado, con contenido adicional presenta como el usuario interactúa con la página.

3 Coloque la secuencia de comandos de jQuery en el servidor Web e incluir un enlace a ella en la cabeza de sus páginas web. Utilice la siguiente sintaxis, haciendo modificaciones para adaptarse al nombre y la ubicación del archivo si es necesario:

<Script type = "text / javascript" src = "jquery.min.js"> </ script>

Asegúrese de que el guión está en el lugar correcto, en relación a su página Web. (Ver Referencias 3)

4 Incluir el código de su plug-in de jQuery. El plug-in que haya elegido tendrá instrucciones específicas, pero por lo general se tendrá que incluir el código en la cabecera de las páginas que comprende la secuencia de comandos o un enlace a una secuencia de comandos independiente. código jQuery generalmente se ejecuta cuando la página se ha cargado en el navegador, como el siguiente código de ejemplo, que aparece en la sección de página de la cabeza:

<Script type = "text / javascript">

$ (Function ()

{$ ( 'A.tablink'). Click (function ()

{Var id = $ (this) .attr ( 'id');

$ ( '# Contentarea' + id) .toggle (500);

falso retorno; }); });

</ Script>

(Ver Referencias 3)

5 Organizar el contenido de su página web para el efecto de transición al trabajo. Siguiendo las instrucciones de su plug-in de jQuery, incluye el contenido de sus páginas dentro de las estructuras que permiten la transición a funcionar, como en el siguiente ejemplo. Dentro del cuerpo de la página:

<a href='#' id='part1' class='tablink'> Esta es el área de clic capaces </a>

<Div id = clase 'contentareapart1' = 'contentsection'> Aquí está el contenido oculto </ div>

Añadir declaraciones de estilo para ocultar inicialmente partes del contenido. Dentro de su código CSS:

.contentsection

{Display: none;}

Probar sus páginas a fondo. (Ver Referencias 4)