Efecto cubo con CSS3 + jQuery

FoldScroll es un interesante experimento que utiliza CSS3 y jQuery para generar un bonito efecto estilo cubo 3D, el mismo funciona de forma conjunta con la barra de scroll.

El experimento utiliza CSS3 para realizar todo lo relacionado a la parte gráfica, y jQuery para recalcular la ubicación y bordes del cubo según la posición de la barra de scroll. Es muy ingenioso.

El resultado:

CSS3 efecto cubo

Ejemplo de uso:

$( '.container' ).foldscroll({

    // Perspective to apply to rotating elements
    perspective: 600,

    // Default shading to apply (null => no shading)
    shading: 'rgba(0,0,0,0.2)',

    // Area of rotation (fraction or pixel value)
    margin: 0.2
});

Visiten la demostración online pare ver en funcionamiento este novedoso experimento.

Dudo mucho que podamos utilizarlo en un proyecto en producción, al menos hoy en día con la situación de los navegadores en cuanto a la compatibilidad con las propiedades más novedosas de CSS3, no obstante para seguir aprendiendo sobre el potencial de este lenguaje es una excelente oportunidad.

Web: FoldScroll

Categorizado en: