Desplazamiento a pantalla completa con jQuery
Una de las tendencias que está en auge en el desarrollo web es el desplazamiento a pantalla completa para crear un efecto parecido al de navegar entre diapositivas haciendo scroll.
Una vez más jQuery nos ayudará a con la creación de las conocidas como webs de una sola página o single page websites. En esta ocasión usaremos fullPage.js jQuery Plugin.
Qué necesitamos
- Librería jQuery y jQuery UI
- fullPage.js jQuery Plugin disponible desde el blog Álvaro Trigo, su autor.
Preparando el terreno
En primer lugar colocamos el fichero jquery.fullPage.min.js en la carpeta correspondiente a los scripts y también el main.js que lo crearemos para añadir nuestro código.
En el documento html llamamos todos los javascript y css.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
El HTML
Es necesario seguir la estructura <div class=»section»></div> para crear diapositivas con desplazamiento o scroll vertical:
<div class="section">Diapositiva vertical</div>
<div class="section">Diapositiva vertical</div>
<div class="section">Diapositiva vertical</div>
<div class="section">Diapositiva vertical</div>Si queremos añadir desplazamiento o scroll horizontal añadiremos <div class=»slide»></div> dentro de cada «section».
<div class="section">
<div class="slide">Diapositiva horizontal</div>
<div class="slide">Diapositiva horizontal</div>
<div class="slide">Diapositiva horizontal</div>
<div class="slide">Diapositiva horizontal</div>
</div>Empieza la acción
En nuestro fichero de scripts (el que hemos nombreado main.js) llamaremos al plugin fullPage.js con los valores por defecto.
jQuery(document).ready(function() {
jQuery.fn.fullpage();
});
Configuración personalizada
Si eres como nosotros y prefieres el «advanced mode» de todo lo que cae en tus manos, te interesará algunos de los parámetros que puedes personalizar de fullPage.js jQuery Plugin.
- scrollingSpeed: controla la velocidad en milisegundos del desplazamiento del scroll.
- slidesColor: listado del color de fondo que tendrá de cada sección.
- easing: define el efecto del desplazamiento vertical.
- loopTop: si está en true, cuando llegues a la primera sección saltarás a la última.
- loopBottom: si está en true, cuando llegues a la última sección saltarás a la primera.
- navigation: si está en true se mostrará un pequeño menú de navegación con círculos.
- navigationPosition: si navigation está en true podremos indicar la posición en la que debe mostrarse, left o right.
- anchors: listado de anclas que identifican cada una de las secciones. Es necesario para usar navigation.
- Eventos afterLoad, onLeave, afterRender, afterSlideLoad que te permitirán configurar más a fondo el comportamiento de tus diapositivas.
Para una documentación aún más detallada y con más ejemplos puedes visitar su cuenta de github oficial así como nuestra demo disponible al final del post.
En nuestra demo hemos hecho una pequeña presentación de nuestra empresa de servicios tecnológicos con 5 diapositivas verticales y 6 horizontales ¿Te apetece echarle un vistazo?
Ver demo Descargar ejemplo
Actualizamos: Eliminando la URL
En Endeos tenemos presente vuestros comentarios, en uno de ellos se nos preguntaba cómo sería la configuración del plugin de desplazamiento a pantalla completa sin mostrar los anchors o url de la sección (por ejemplo #empresa, #servicios…).
Como la respuesta era algo larga para dejar un comentario, hemos decidido actualizar el post.
En primer lugar es necesario actualizar la versión del plugin (un poco más arriba tienes el enlace del sitio oficial), en este caso hemos usado la 2.5.6.
En el fichero index.html es necesario añadir un id al contenedor principal, el que engloba todas las secciones, en nuestro caso lo hemos llamado «fullpage».
<div class="contenedor" id="fullpage">En el fichero main.js hemos cambiado el selector con el id que acabamos de poner y hemos eliminado el parámetro «anchors».
jQuery('#fullpage').fullpage({anchors: ['endeos', 'empresa', 'servicios', 'contacta', 'working']También se han quitado los eventos que se producían según la sección en la que nos encontrábamos.
Al quitar los eventos, las imágenes no se mueven, por lo que será necesario recolocarlas por CSS.
Y ahora lo que realmente estás esperando, la demo y el ejemplo de descarga.
Ver demo Descargar ejemplo
Actualizamos: Desplazamiento a pantalla completa con menú
Uno de nuestros lectores nos ha pedido qué debería hacerse para añadir un menú en lugar de los puntos de navegación verticales.
Nuevamente hemos aprovechado para responder actualizando el post cogiendo como base la primera demo.
En primer lugar actualizamos la versión del plugin, que su desarrollador es quien debe llevarse todo el mérito. En esta ocasión usamos la versión 2.6.4.
En el fichero index.html añadimos los elementos de menú con el nombre de los anchor y añadimos un id al contenedor principal, el que engloba todas las secciones, en nuestro caso lo hemos llamado “fullpageEndeos”
<ul id="menu">
<li data-menuanchor="endeos"><a href="#endeos">Endeos</a></li>
<li data-menuanchor="empresa"><a href="#empresa">Empresa</a></li>
<li data-menuanchor="servicios"><a href="#servicios">Servicios</a></li>
<li data-menuanchor="contacta"><a href="#contacta">Contacta</a></li>
<li data-menuanchor="working"><a href="#working">Working</a></li>
</ul>
<div class="contenedor" id="fullpageEndeos">
Obviamente habrá que añadir el CSS correspondiente a este menú a gusto del maquetador.
En el fichero main.js modificamos el parámetro menu: false y eliminamos el parámetro navigation:true
menu: '#menu'
Seguro que te gustará ver la demo y el ejemplo de descarga.
Ver demo Descargar ejemplo
