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 Eliminar el Spam de un Formulario de ContactoComo Eliminar el Spam de un Formulario de Contacto
  • Como hacer un menú con efecto como Youtube
  • pack de iconos para web y movil30 Packs de iconos para Web y Móvil Gratis
  • Personalizar la Página de Producto de WooCommerce con un Editor Visual
  • Tipos de lineas en el diseño

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.


Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (52)
  • Diseño (39)
  • Email Marketing (2)
  • Genesis (4)
  • Google (14)
  • herramientas (22)
  • hosting (8)
  • Marketing en Internet (13)
  • Negocios (3)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (25)
  • Trabajo (6)
  • Wordpress (531)

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