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
