,

Efeito fly-in com CSS e jQuery

fly-in

Nenhum produto encontrado nessa seleção.

Provavelmente você já deve ter visto o efeito fly-in que é executado no scroll (rolar) da página. Normalmente ele vem misturado com efeitos de parallax, já que o conceito de rolagem de página é bem parecido.

Fly-in consiste em mostrar elementos abaixo da dobra como se eles estivessem entrando na página de maneira bem agradável.

Para este tutorial, vamos utilizar CSS3 e jQuery.

Então vamos lá?

Demonstração

Veja uma demonstração do que vamos criar nesse tutorial:

O HTML

Seu HTML pode ter qualquer estrutura que preferir, porém, os elementos que vão receber o efeito deverão ter a classe que vai gerenciar tudo.

Para nosso exemplo, vamos utilizar a classe "fly".

Veja um exemplo de código HTML que vamos utilizar para este tutorial:

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

O trecho é extenso, mas não se assuste, são simplesmente DIVs repetidos com a mesma classe. O mais importante aqui é que os elementos que tiverem o efeito tenham a classe "fly".

O CSS

Você pode estilizar seus elementos da maneira que preferir, porém, a classe fly deverá conter o seguinte:

.fly {
	opacity: 0;
	transition: all 600ms ease-in-out;
	transform:translateY(100px) scale(1.05) translate3d(0, 0, 0);  
}

Também precisamos de outra classe que vai remover a transformação que a classe "fly" fará em nossos elementos. Nesse caso, utilizei uma classe chamada "show-block". Veja:

.show-block {
	opacity: 1;
	transform:translateY(0) scale(1) translate3d(0, 0, 0);
}

Ao final do artigo, vou deixar um link para você baixar o exemplo que criei, assim você pode analisar melhor o código.

O jQuery

O jQuery vai detectar o viewport, ou seja, vai verificar se o que o usuário está vendo, está (ou não) na tela.

Veja:

// Um timer para receber o Timeout do efeito
var timer = 0;

// A função que vai detectar o viewport
function recheck() {
	// Distância do ponto de rolagem até o topo da página
	var window_top = $(this).scrollTop();
	
	// Altura do viewport
	var window_height = $(this).height();
	
	// Início do viewport
	var view_port_s = window_top;
	
	// Fim do viewport
	var view_port_e = window_top + window_height;

	// Se tiver um timer, anula o mesmo
	if ( timer ) {
		clearTimeout( timer );
	}
	
	// Detecta todos os elementos com a classe .fly
	$('.fly').each(function(){
		// O objeto
		var block = $(this);
		
		// A distância do objeto do topo da página
		var block_top = block.offset().top;
		
		// A altura do objeto
		var block_height = block.height();

		// Se estiver dentro do view port ou antes
		if ( block_top < view_port_e ) {
			timer = setTimeout(function(){
				block.addClass('show-block');
			},100);       
		} else {
			timer = setTimeout(function(){
				block.removeClass('show-block');
			},100);          
		}
	});
}

// Inicia o jQuery
$(function(){
	// Cria o efeito no scroll
	$(window).scroll(function(){
		recheck();
	});
	
	// Cria o efeito quando a janela é redimensionada
	$(window).resize(function(){
		recheck();   
	});

	Cria o efeito quando a página é carregada
	recheck();
});

O jQuery acima simplesmente adiciona a classe "show-block" nos elementos que estão no viewport ou acima dele, e remove a mesma classe quando os elementos não estão aparecendo na tela.

Download

Caso queira baixar o demo que criamos nessa página, utilize o link abaixo:

Caso queira continuar o projeto, ou modificar qualquer coisa, faça-o pelo Codepen.

Concluindo

Caso tenha uma solução melhor, basta deixar nos comentários. Vamos compartilhar nosso conhecimento!

/1 Comentário/por