1

Gostaria de saber como fazer aquele efeito fade de elementos na página apenas quando ele é visualizado.
Por exemplo, tenho visto alguns sites feitos com bootstrap que ao ir rolando a página os elementos vão sendo mostrados com efeito fade, fadeInUp, fadeInLeft, etc.

Um exemplo para demonstrar seria esse Site

Após serem visualizados os efeitos já não ocorrem mais a não ser se a página for recarregada.

Alguém sabe como se faz isso utilizando o css do bootstrap?

2 Respostas 2

2

Isso é um efeito chamado Paralax, que é aonde vc define (a grosso modo) camadas e que velocidade cada camada de movimentará baseado no mouse, no scroll da pagina ou mesmo numa animação. Esse efeito é muito antigo e pode ser observado em jogos como Super Mario e etc.

Aqui tem um exemplo fantástico de site em Paralax bem avançado, no caso desses sites de bootstrap o efeito é aplicado apenas em algumas coisinhas bem leves.

Site Fantástico com Paralax

Site da Mozilla com esse efeito

Para se fazer esse efeito o mais normal é usar jQuery, e como tudo em jQuery existe um plugin pronto pra ser usado, eis alguns:

Um Plugin jQuery

Um tutorial Legal

Um outro Plugin JQuery

Procure entender como funciona e você poderá fazer o que quiser com esse efeito, desde pequenos detalhes em imagens ou até mesmo sites bitolados como esse que passei.

Espero ter ajudado, Bons estudos.

1

Você tem algum site que gostaria de copiar esse fade, fica melhor para explicar, mas aqui vai alguns links que podem te ajudar:

mycodezone

bootply - Inclusive aqui no bootply tem vários snippets do bootstrap pra mim já foram muito úteis!

Valeuu!! :D

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .