LooZHp • 31.05.16 14:51
Site com animação 31.05.16 14:51
Olá pessoal hoje venho trazer para vocês, uma coisa que vocês podem estar usando em seus sites!
Objetos flutuantes e animador ou barra de
scroll do navegador.
Bom é simples, mais caso não queira ter trabalho pode esta baixando o plugin:
Demo: Clique aqui
Dowload: Clique aqui
Scan: o próprio mediafire faz.
Mais caso queira aprender você pode ter vários ” flutuantes “objetos com atributos diferentes dentro de sua página web.Além disso, você pode fazer esses objetos flutuantes ” pouso “através do método de plugin, e vice-versa, é claro.
Veja abaixo mais detalhes sobre isso.
Como usar:
- Código:
<script src="jquery.min.js"></script>
<script src="jqfloat.js"></script>
$(document).ready(function() {
$('object').jqFloat();
});
Agora caso queira fazer o site com uma super frescura rs...
Também já existem plugin para esse propósito. Antes de conhecer esse plugin eu pensava. Puts deve dar um trabalhão fazer esse tipo de coisa. Mas veja como pode ser feito com o Plugin chamado SCROLLORAMA
- Código:
$(document).ready(function() {
var scrollorama = $.scrollorama({
blocks:'.scrollblock'
});
});
- Código:
scrollorama.animate('#example1',{
duration:400, property:'opacity'
})
Os parâmetros de animação que você pode usar são:
duration - número de pixels de rolar a animação dura;
delay - número de pixels de rolagem antes da animação começa (animação está marcada para começar quando o topo do bloco de rolagem é na parte inferior da janela do navegador);
property - propriedade css sendo animado (deve ser numérico);
start - valor da propriedade css no início da animação (se não atribuído, será o valor do elemento da propriedade atual);
end - valor da propriedade css no final da animação (se não atribuído, será o valor do elemento de propriedades actual);
pin - definido como true se você deseja que o bloco de rolagem para ser preso durante suas animações (nota: bloco vai ser fixado para todos os seus elementos de animações);
Hook into the onBlockChange event:
- Código:
scrollorama.onBlockChange(function() {
alert('You just scrolled to block#'+scrollorama.blockIndex);
});
Espero ter ajudado muitos de vocês, caso ajudei não esquece de deixa seu "+"
Créditos: Deivison Arthur L.Serpa.
