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í.
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
Deja una respuesta