Plugins Jquery Para Efectos de Transición de Páginas con Css3

by admin admin Date: 10-02-2017 jquery javascript css3 transition plugin


Todo el mundo sabe que si desea más tráfico en su sitio web y quiere estar en la cima de los resultados de búsqueda también debe tener la página web mas hermosa, mejor y profesional posible, para hacer esto jQuery es la solución.

Independientemente del contenido que tenga una web, se puede hacerla más interactiva y sensible mediante los efectos de transición de jQuery. Los efectos de transición de página pueden variar, pueden ser muy elegantes o simples y con clase. Estos efectos le permiten hacer su página más atractiva y llamativa.

Aquí está nuestra lista de complementos de Efectos de transición realizados con jQuery. Desde transiciones suaves hasta animaciones superpuestas, estos efectos están diseñados para generar conmutadores animados entre diferentes elementos.

 

1 – Animsition

Demo Descargar

Animsition es un complemento jQuery que facilita la adición de transiciones de páginas animadas CSS. Ofrece 18 animaciones diferentes, incluyendo varios fundidos, rotaciones, volteos y zooms.

 

2 – Medium-Style Transición de página

Demo Descargar

Un artículo sobre cómo lograr el efecto de transición de la siguiente página de Medium que se puede ver haciendo clic en cualquier parte del pie de página "Leer siguiente" en la parte inferior de la página. Este efecto se caracteriza porque el artículo inferior se desplaza hacia arriba a medida que el artículo actual se desvanece hacia arriba y hacia afuera.

 

3 – Plantilla de pantalla completa con transiciones de página

Demo Descargar

Un diseño de respuesta simple con algunas transiciones de página de fantasía. La idea es mostrar inicialmente cuatro ítems y expandirlos. Algunas transiciones de página adicionales se agregan para los elementos internos.

Todos los efectos se realizan con transiciones CSS y se controlan aplicando clases con JavaScript. La disposición entera es flexible y algunas preguntas de los medios se agregan para clasificar abajo de cosas para las pantallas más pequeñas.

 

4 – smoothState.js

Demo Descargar

SmoothState.js mejorará discretamente las cargas de página de su sitio web para comportarse más como un marco de aplicación de una sola página. Esto le permite agregar transiciones de página y crear una mejor experiencia para sus usuarios..

 

5 – Una colección de transiciones de página

Demo Descargar

Un par de animaciones que podrían aplicarse a "páginas" para crear interesantes efectos de navegación al revelar una nueva página. Mientras que algunos efectos son muy simplistas, es decir, un simple movimiento de la diapositiva, otros hacen uso de la perspectiva y 3d se transforma para crear una cierta profundidad y dinámica.

 

6 – ElementTransitions.js

Demo Descargar

Este repositorio es un contenedor alrededor del código proporcionado por un artículo de codrops en transiciones de página. Su código se ha modificado para permitir más de un elemento animatable por página. Además, ahora puede agregar transiciones directamente desde etiquetas html.

 

7 – VOTUM Page Transition Plugin

Demo Descargar

Un complemento Javascript fácil, pequeño y ligero para transiciones de páginas / páginas deslizantes en sitios web para móviles.

Caracteristicas

  • No requiere jQuery
  • Transiciones de página con efecto de diapositiva
  • Deslizar de derecha a izquierda, deslizar de izquierda a derecha, deslizar hacia arriba, deslizar hacia abajo
  • Funciona en todos los enlaces relativos dentro de su página (los enlaces absolutos se llaman normales)
  • Elija un atributo de datos para sus vínculos que no deben deslizar
  • Comportamiento del navegador nativo dado, como clic del medio que abre el enlace en una nueva pestaña
  • Actualiza también la información en la cabeza (título, ...)
  • Soporte para navegación por navegador
  • Inyectar funciones adicionales para el final de la llamada después de la diapositiva
  • Posibilidad de dar un recipiente de contenido especial en lugar de cuerpo entero para la diapositiva

 

8 – Transiciones de página

Demo Descargar

Un replanteo de la idea original creada por Hakim El Hattab. Creado con JavaScript, CSS 3D transforma y animaciones CSS.

Transiciones

  • Kontext: Idea original de Hakim El Hattab
  • Poner: Un efecto de caída de página
  • Círculo: capas hacen una transición de círculo
  • Bounce: Las capas rebotan después de mostrar

 

9 – Plantilla de movimiento de página de pantalla completa

Demo Descargar

Un tutorial sobre cómo crear una plantilla de movimiento de página (flip) de pantalla completa con BookBlock. La idea es voltear el contenido como las páginas del libro y acceder a las páginas a través de un menú de la barra lateral que se deslice hacia fuera desde la izquierda.

 

10 – Transiciones de página con Backbone

Demo Descargar

Animación entre diferentes vistas en Backbone JS.

Esta es una pequeña aplicación Backbone JS que muestra cómo podemos animar vistas en Backbone JS. Los efectos de animación se han generado con CSS3. La ventaja de esta aplicación es que no necesita cambiar nada en sus vistas para aplicar el efecto de transición. Este complemento sólo cambia la forma en que se procesan las viiews en la aplicación principal. Este complemento tiene un método de renderizado que renderizará las vistas y aplicará las clases necesarias para la transición.

 

11 – KnockbackNavigators.js

Demo Descargar

KnockbackNavigators.js proporciona navegadores de página, un navegador de panel y animaciones de transición para ayudarle a crear aplicaciones dinámicas de una sola página. Ellos son plataforma-agnóstico por lo que incluso se puede utilizar sin usar Knockback.js o Knockout.js!

 

12 – Plantilla dividida

Demo Descargar

Una plantilla para un diseño dividido con dos lados. Al hacer clic en una mitad en la vista inicial, la disposición se mueve en la dirección respectiva con algunos efectos de transición.

Este Blueprint es un diseño con dos lados, visto a veces en sitios web de cartera de parejas y socios. La idea es mostrar una vista inicial de dos caras y al hacer clic en un lado, toda la página transita en la dirección respectiva. Se muestra la página individual de la persona seleccionada.

El Blueprint viene con algunas consultas de medios de ejemplo y una segunda demostración donde el lado de la desaparición se reduce. Funcionará en los navegadores modernos (desde IE9 en).

 

13 – Multi-Screen.js

Demo Descargar

Un plugin jQuery simple, ligero y fácil de usar que convierte una sola página en una colección de pantallas con la navegación animada.

 

14 – Efecto Intro Zoom-out

Demo Descargar

Una imagen de cabecera de ancho completo, animada con la propiedad de escala CSS3 y jQuery para simular un efecto de alejamiento 3D y revelar el contenido principal de la página.

 

15 – Efectos de carga de página

Demo Descargar

Un conjunto de efectos de carga de página creativa que utilizan animaciones SVG con Snap.svg. La idea es mostrar una superposición con una animación de forma interesante mientras se carga nuevo contenido.

 

16 – Plugin de transicción

Demo Descargar

El proyecto está dirigido a implementar un simple efecto de transición / carga en una página web en los eventos desencadenados por el usuario. El siguiente contenido (index.html) está destinado a proporcionar la documentación de origen, así como una demostración en vivo del funcionamiento del complemento. Esto se optmized para que los usuarios puedan acceder a esto a través de escritorio / móvil.

 

17 – Transicciones de página

Demo Descargar

Un poco de CSS y JS para animar las transiciones de página

 

18 – Disposición de Desplazamiento Horizontal

Demo Descargar

Una disposición similar a una corredera, en la que las secciones vecinas están situadas horizontalmente una al lado de la otra.

 

19 – Transiciones de página con CSS3

Demo Descargar

 

20 – Inspiración para los efectos de introducción del artículo

Demo Descargar

Alguna inspiración para los efectos aplicados a los encabezados de título de artículos con una imagen de pantalla completa. La idea es mostrar alguna transición creativa al continuar con el cuerpo del artículo.

 
by admin admin Date: 10-02-2017 jquery javascript css3 transition plugin visitas : 17692  
 
 
 
 

Artículos relacionados