Plugins jQuery para Efectos de Transición de Páginas con CSS3

Plugins jQuery para Efectos de Transición de Páginas con CSS3
by Janeth Kent 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 Janeth Kent Date: 10-02-2017 jquery javascript css3 transition plugin visitas : 35523  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Clicky