Space.js – Efeito Parallax no seu site

Que tal criar um site diferente, moderno e chamativo, conheça a Space.js, faça site diferentes ou até mesmo crie histórias “Narrativas”. Baseado em html e css.

Utilizando a biblioteca

A biblioteca é HTML-driven, que significa que você não precisa escrever uma única linha de JavaScript para usá-lo em seu site e ainda tem muita flexibilidade!

O núcleo da biblioteca é dividir o nosso HTML em quadros, ou espaço-frames como lhes chamamos-lhe (para não entrar em conflito o nome da classe comum “frame“).

A criação de um quadro

< div class = "space-frame" > [contents] </ div >

Eu também recomendaria fortemente usando um-quadro interno dentro do espaço-frame, que fornece alguns CSS útil para tornar as coisas centrado verticalmente e horizontalmente dentro do quadro.

 < div class = "space-frame" > < section class = "space-inner-frame" > [contents] </ section > </ div >

Personalize Duração

Se quisermos, podemos fornecer uma duração personalizado para nossos quadros com o atributo duração de dados, o que multiplica a duração padrão da transição.

 < section class = "space-frame" data-duration = "1.4" > ... </ section > < section class = "space-frame" data-duration = "0.6" > ... </ section >

Personalize transição

Space.js tem uma transição padrão padrão – o que é entrar pelo desvanecimento e saída por escala-se e desaparecendo. Nós também podemos fornecer uma substituição de transição personalizado para a biblioteca de transições predefinidas. (Nós também podemos criar as nossas próprias transições a partir do zero.

 < section class = "space-frame" data-transition = "rotate360" > ... </ section >

Vários valores são suportados!

 < section class = "space-frame" data-transition = "rotate360 fadeOut slideInLeft" > ... </ section >

Entrada personalizada e sair

Se realmente queremos entrar em detalhes, podemos fornecer como queremos o quadro para entrar (primeira metade da duração do quadro) e saída (segundo semestre).

 < section class = "space-frame" data-enter = "fadeIn" data-exit = "fadeOut zoomOut" > ... </ section >

O que um quadro completo pode parecer

 < div class = "space-frame" data-enter = "fadeIn" data-exit = "zoomOut fadeOut" data-duration = "1.3" > < section class = "space-inner-frame" > < div style = "background-image:url(img/splash.png); padding:150px 200px;" class = "bg" > < section > < p > Demo 1 </ p > < h1 > The Gallery </ h1 > </ section > </ div > </ section > </ div >

Links importantes:

Site oficial: Space.js
Repositorio: GitHub