Criando um elemento com efeito Parallax em seu projeto com Bootstrap

Apesar de ser mais do lado back-end, gosto e muito do desenvolvimento front-end, algo que ultimamente tenho aprendido bastante coisa sobre, ou seja, virão mais posts do lado front-end da força aí pela frente!

Bom, o post de hoje é simples, mas que por sinal resulta em um belo e moderno efeito no seu projeto, e neste caso, se seu projeto for responsivo – utilizando o framework css Bootstrap.

No fim deste post você estará apto para reproduzir em seu projeto algo similar a este exemplo:
https://blog.vilourenco.com.br/exemplos/bootstrap_parallax/

Todos sabemos o quão mágico um efeito ao estilo Parallax é, consequentemente dando ao seu projeto um belo e referencial toque e notoriedade, e o que este post trata é em aplicá-lo ao seu projeto responsivo!

Relativamente simples, dentro da arquitetura do seu projeto, você deve inserir um elemento que irá conter o efeito que tanto desejamos, neste caso, escolhi o elemento section já por eu estar em um relacionamento sério com o HTML5.
Como queremos que ele esteja full-screen, ele estará fora da div “container”, ou seja, não terá estabelecido uma largura definida.

Sendo assim, insiro o elemento a seguir com as seguintes propriedades:

Você deve ter notado que dentro existe uma div com a class “container-fluid“, ela não tem absolutamente nenhuma utilidade nem participação no efeito, eu apenas a inseri pois inicialmente iria colocar algo dentro, mas não o fiz, e optei por deixá-la justamente para ilustrar que você pode ter elementos dentro, dando ainda mais vida ao seu efeito.

Neste caso temos as propriedades data-speed e data-type, que, respectivamente são responsáveis por sinalizar a velocidade do deslocamento da imagem na vertical (o que dá vida ao efeito), e a identificação da section ao jQuery para tratar os elementos com este tipo.

Note abaixo, este simples trecho em jQuery, comentei as partes principais para o entendimento:

E por fim, o id da nossa section, referenciado no CSS abaixo:

No caso acima apenas eu definí a altura para a section, cor para o background-color, imagem do background fixado e com 50% de exibição ao iniciar.

E então, seu projeto utilizando boostrap está apto para ter o efeito parallax, em seu projeto responsivo com Boostrap!

É isso, pessoal, espero que gostem e caso há alguma dúvida/crítica/sugestão/observação é só entrar em contato, pelos comentários abaixo ou diretamente comigo via email/redes sociais.

Clique aqui para baixar os arquivos do exemplo deste post.

Grande abraço.