Transiciones de diapositivas de página completa con CSS3 y Bespoke-FX

Vista prévia

Descripción

Bespoke-FX es una impresionante biblioteca JavaScript que permite navegar a través de diferentes secciones de tu página con un par de animaciones CSS3. Compruebe la página de demostración y vea en acción con las teclas de flecha.

Dependencies

• animaciones. CSS
• Bespoke. js
• Modernizr. js

Funcionamiento

Cargue los archivos CSS requeridos en la sección Head de su página.

<link rel="stylesheet" href="src/main.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="src/animaciones. CSS" type="text/css" media="screen" title="no title" charset="utf-8">

Cargue los archivos JavaScript necesarios en la parte inferior de la página.

<script src="libs/modernizr/modernizr.custom.js" type="text/javascript" charset="utf-8"></script>
 <script src="src/Bespoke. js"></script>
 <script src="src/bespoke-fx.js"></script>

Estructura HTML de marcado.

<article>

<section>
Section 1
</section>

<section>
Section 2
</section>

<section>
Section 3
</section>

...

</article>

Puede pasar opciones a la sección mediante el atributo Data-* de la leyenda o pasándolos en la inicialización.

<section data-bespoke-fx-transition="Mover">Slide x</section>

Todas las opciones de transición disponibles.

• Mover
• Mover-fade
• Mover-both-fade
• Mover-different-easing
• scale-down-out-Mover-in
• Mover-out-scale-up
• escalar verticalmente
• escalar verticalmente
• Pegamento
• dar la vuelta
• Caída
• Periódico
• Empuje
• tirar
• Doblar
• unDoblar
• Habitación
• Cubo
• Carrusel
• Lados
• Deslice

Inicialización.

bespoke.horizontal.from('article', {

fx: true
});

Opciones disponibles para personalizar.

bespoke.vertical.from('article', {

fx: {


direction: "vertical",


transition: "Cubo",


reverse: true

}
});