Tenho visto que está ficando cada vez mais comum essa prática, onde os elementos da página vão "aparecendo" (fade-in, slide-in, entre outros) automaticamente quando, ao dar scroll, você entrar em uma nova section/div. Dei uma pesquisada, mas não encontrei o necessário para realmente aprender como funciona e como colocar em prática.
Busquei rapidamente um site que vi tal recurso. É claro que não foi nem um pouco difícil encontrar. Bastou eu colocar "Bootstrap themes examples" no google que a maioria já apresentavam tais animações.
Confira um exemplo em particular que gostei muito: "Material Style Theme (Bootstrap)
Minhas perguntas são:
- Em que é feito?
- Como é feito?
- Onde encontro (em qual biblioteca?) exemplos para estudar e aprender mais?
- O carregamento da página fica prejudicado devido a esse recurso?
Exemplo de uma seção de meu site que gostaria dos efeitos:
<div class="site-wrapper">
<div class="site-wrapper-inner" id="portofolio">
<br />
<br />
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="color:white">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<img style="width:360px;Height:200px" src="Imagem-removida-por-questões-profissionais" class="img-responsive" alt="">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Título</h4>
</div>
<div class="panel-body">
<p class="text-muted">Descrição</p>
</div>
</div>
</div>
</div>
</div>
</div>
Nesse caso, gostaria que a seguinte div fosse animada:
class="col-md-4 col-sm-6 portfolio-item
Fale ressaltar que procurei aqui, mas não encontrei o necessário: