ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Plugin jQuery para crear múlti-desplazamiento con dos diseños verticales

3 junio, 2014 por Pedro Mendez Deja un comentario

Algunas marcas optan por aplicaciones web individuales de una página. Esto les permite mostrar todas las características en una sola página. A los usuarios le gusta mucho este enfoque en las nuevas tendencias de diseño. multiScroll.js impulsa aplicaciones web individuales de página. Crea un efecto de transición innovador deslizando hasta la mitad de la página y deslizándose por la otra mitad creando dos diseños vertilaces. Puedes ver una demo y descarga del archivo zip aquí.

paginas multi-desplazamiento divididas

Compatibilidad

Este plugin está en versión Beta. multiScroll.js funciona correctamente en todos los navegadores modernos, así como algunos viejos como Internet Explorer 8,9,Opera 12, etc. Funciona con los navegadores con soporte CSS3 y con los que no lo tienen, por lo que es ideal para la compatibilidad de navegadores antiguos. Está diseñado para funcionar tan bien en los dispositivos táctiles,como teléfonos móviles o tablets.

Uso

Como se puede ver en los archivos de ejemplo, tendremos que incluir el archivo JavaScript jquery.multiscroll.js (o la versión miniaturizada jquery.multiscroll.min.js) y el css del plugin jquery.multiscroll.css, así como jQuery. Opcionalmente , se puede añadir la biblioteca jQuery UI en caso de querer utilizar otros efectos de aceleración aparte de los incluidos en la biblioteca jQuery que son los efectos linear o swing. (easeInQuart está activada por defecto, por lo que necesitariamos la librería jQuery UI o la versión personalizada que se incluye en la carpeta con el nombre jquery.easings.min.js.)

Algunos sitios que utilizan este tipo de navegación son:

http://www.skodayeti.pl
http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home
http://wandaprint.com/home/

El objetivo multiScroll.js es facilitar la creación de sitios web multi-movimiento en sentido vertical con dos paneles verticales o diseños de desplazamiento en direcciones opuestas. Una buena manera de captar la atención de los visitantes con una página original.

Cómo utilizarlo

El código HTML necesario es el siguiente:

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">Section 1 Left</div>
        <div class="ms-section">Section 2 Left</div>
        <div class="ms-section">Section 3 Left</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">Section 1 Right</div>
        <div class="ms-section">Section 2 Right</div>
        <div class="ms-section">Section 3 Right</div>
    </div>
</div> 

Para el funcionamiento el plugin de todo lo que tiene que hacer, es incluir los archivos necesarios js y el css, para que realice la llamada del plugin a la función $(document).ready` usando el selector que se utilizará como un contenedor.

$(document).ready(function() {
    $('#multiscroll').multiscroll();
});

Documentación y preguntas

Para obtener más documentación sobre el plugin, lo puedes encontrar en el repositorio GitHub.

También puedes utilizar el foro para informar de los errores o formular cualquier pregunta relacionada con el plugin.

Busca tu pregunta antes de abrir un nuevo hilo, ya que podría haber sido solicitada con anterioridad

..Entradas Relacionadas

  • Como hacer que los mapas de Google tengan un diseño responsive
  • rediseño web wordpressHacer un rediseño de WordPress para añadir un toque personal
  • 7 consejos para el rediseño de un sitio web que no podemos pasar por alto
  • Como cambiar el Tamaño y Color de los Precios en WooCommerce
  • Como cambiar los estilos de Google CSE con CSS

Publicado en: Diseño Etiquetado como: multiscroll

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (511)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)