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:
1 2 3 4 | <section id="parallaxBar" data-speed="6" data-type="background"> <div class="container-fluid"> </div> </section> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function(){ $window = $(window); //Captura cada elemento section com o data-type "background" $('section[data-type="background"]').each(function(){ var $scroll = $(this); //Captura o evento scroll do navegador e modifica o backgroundPosition de acordo com seu deslocamento. $(window).scroll(function() { var yPos = -($window.scrollTop() / $scroll.data('speed')); var coords = '50% '+ yPos + 'px'; $scroll.css({ backgroundPosition: coords }); }); }); }); |
E por fim, o id da nossa section, referenciado no CSS abaixo:
1 2 3 4 5 6 | #parallaxBar{ height:750px; background-color:#004c82; background: url(../img/bgparallax.png) 50% 0 fixed; position: relative; } |
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.