fullPage.js: creación rápida y sencilla de OnePagers de varias páginas

OnePagers son muy populares, especialmente para pequeños proyectos web. Su diseño sofisticado y generoso a menudo atrae la máxima atención. El complemento jQuery fullPage.js le permite crear onepagers de varias páginas de una manera fácil. El complemento hace que las áreas definidas de un documento HTML se muestren en página completa y permite cambiar entre ellas de forma animada a través de la navegación y el desplazamiento.

Implementando el complemento y creando páginas

página completa.js consta de un JavaScript y un archivo de hoja de estilo cada uno, los cuales deben integrarse junto con jQuery. También existe la opción de integrar el complemento de aceleración de jQuery UI para efectos de animación adicionales durante las transiciones entre páginas.

Luego, marca un documento HTML que contiene sus páginas. Para esto, fullPage.js requiere un contenedor con una ID, “fullpage” por ejemplo. Dentro de esto, define un contenedor con la clase «sección» para cada página. El complemento muestra todos los contenedores en tamaño de página completo uno debajo del otro. Por defecto, la primera página es visible al acceder al sitio web.

<div id="fullpage">
  <div class="section">page 1</div>
  <div class="section">page 2</div>
  <div class="section">Spage 3</div>
</div>

Posteriormente, el complemento debe llamarse a través de JavaScript y la ID debe transferirse.

$(document).ready(function() {
  $("#fullpage").fullpage();
});

De manera predeterminada, al desplazarse, la primera página se desvanece con una animación de diapositiva simple y la siguiente se desvanece desde abajo.

Control de apariencia y funcionalidad

Transición animada a la página siguiente

Este complemento proporciona una gran cantidad de opciones que le permiten ajustar la apariencia y la funcionalidad del complemento. El uso del complemento le brinda la oportunidad de definir los colores de fondo de las páginas individuales, así como el ancho de los bordes laterales.

$(document).ready(function() {
  $("#fullpage").fullpage({
    sectionsColor: ["#ccc", "#fff", "#333"],
    paddingTop: "10px",
    paddingBottom: "20px"
  });
});

Con la opción «sectionsColor», puede definir el color de fondo para todos los párrafos o páginas a través de un objeto literal. Usando «paddingTop» y «paddingBottom» determina los espacios en la parte superior e inferior.

Control de navegación

Si no desea que se muestre la primera página, sino otra página al acceder al sitio web, puede marcar cualquier área utilizando la clase adicional “activa”. Entonces, esta área siempre se mostrará cuando se llame a la URL. Se establece como una especie de página de inicio. A partir de ese momento, puede acceder a las demás páginas como de costumbre.

<div id="fullpage">
  <div class="section">page 1</div>
  <div class="section active">page 2</div>
  <div class="section">page 3</div>
</div>

También puede crear una navegación que le permita acceder directamente a cada página. La navegación se crea manualmente dentro de su propio contenedor. El atributo «data-menuanchor» debe asignarse a cada ancla de menú que se supone que debe estar vinculada a un área con un valor específico. El enlace real también contiene el nombre del ancla como referencia interna de la página.

<div id="menu">
  <ul>
  <li data-menuanchor="page1"><a href="#seite1">page 1</a></li>
  </il>
</div>

Dentro de las opciones del complemento, también distribuye las designaciones de anclaje utilizando el parámetro «anclas». Además, el parámetro “menú” le permite definir la ID del menú.

$(document).ready(function() {
  $("#fullpage").fullpage({
    menu: "#menu",
    anchor: ["page1", "page2", "page3"]
  );
});

Después de eso, puede navegar por las páginas no solo desplazándose, sino también utilizando la navegación «normal». Por supuesto, las transiciones animadas permanecen.

Adición de una capa lateral horizontal adicional

Segunda capa para contenido adicional

Si la estructura de página sencilla no es suficiente, puede agregar una segunda capa con contenido. Mientras que la primera capa está construida verticalmente, la segunda está dispuesta horizontalmente como los llamados toboganes. Esto significa que se desplaza hacia abajo para recorrer las páginas de la primera capa y hacia la derecha para acceder a las diapositivas. En el código fuente, puede marcar estas páginas adicionales con su propio contenedor y la clase «diapositiva».

<div id="fullpage">
  <div class="section">page 1</div>
  <div class="section">
    <div class="slide">page 2.1</div>
    <div class="slide">page 2.2</div>
  </div>
  <div class="section">Seite 3</div>
</div>

En el ejemplo, se está desplazando hacia abajo desde la página 1 hasta la página 2.1. Aquí, el complemento proporciona flechas de control que le permiten cambiar a la página 2.2 a la derecha o volver a la página 2.1 a la izquierda.

Conclusión

página completa.js es una herramienta muy simple pero impresionante que le permite estructurar y presentar el contenido de una página en tamaño de página completa. La segunda capa adicional le permite integrar contenido complejo de una manera atractiva. Es por eso que el complemento es muy útil para mantener las presentaciones en el navegador.

Los escenarios son muy diversos. Una extensa documentación le brinda una descripción detallada de lo que es posible. Al mismo tiempo, las animaciones se basan en CSS3. fullPage.js se ejecuta en todos los navegadores modernos e incluso en Internet Explorer desde la versión 8 en adelante. También funciona para dispositivos móviles como tabletas.

El complemento está disponible bajo la licencia MIT, que le permite usarlo de muchas maneras, incluidos fines comerciales. El paquete de descarga también incluye varios ejemplos que puede usar para probarlo.

(dpe)