Fork me on GitHub
Você esta em:Home » Dicas e Tutoriais » Objetos flutuantes animados autômatos ou por rolagem da barra de scroll do navegador

Objetos flutuantes animados autômatos ou por rolagem da barra de scroll do navegador

Objetos flutuantes animados autômatos ou por rolagem da barra de scroll do navegador

Digamos que você queira ter o trabalho de criar um site com animação em JS rs. Como por exemplo as nuvens que estão no fundo do meu blog.

As nuvens eu criei na mão, não utilizei plugins feitos para o jquery, ou seja usei oque vem de nativo.

cloudBounce(); //inicia a função de animação
function cloudBounce(){
	$(".clouds").animate({
  		marginTop:'-60px'
  	}, 10000, function(){
  			$(this).animate({marginTop:'-10px'}, 8000);
  			cloudBounce();
  			});
	};

Caso não queira ter muito trabalho e queira usar um plugin, recomendo:

jqFloat.js é um plugin jQuery que capaz de fazer todos os objetos HTML parecem ser “flutuante “na sua página web. Ela ajuda a criar uma animação flutuante simples e fazer seus sites ganham vida com estas pequenas ” flutuante objeto “. Divirta-se com Flutuando ~

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:

<script src="jquery.min.js"></script>
<script src="jqfloat.js"></script>

$(document).ready(function() {
 $('object').jqFloat();
});

Veja mais em: http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/

Existem outros como:

Agora caso queira fazer o site com uma super frescura rs tipo esses sites aqui:

Também já existem plugin para esse propósito. Antes de conhecer esse plugin eu pensava. Puts deve dar um trabalhão fazer uma porra dessa rs. Mas veja como pode ser feito com o Plugin chamado SCROLLORAMA

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});
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:

scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
});

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 106

Comentários (7)

Enviar Comentário

© 2012 Feito com Wordpress, Desenvolvedor: Deivison Arthur Lemos Serpa

Ir para cima