Código

Como criar um efeito simples de paralaxe

Em toda a web, sites estão surgindo, que usam o que é conhecido como scroll de paralaxe. Em essência, uma rolagem parallax é quando o conteúdo rola em diferentes velocidades, criando um senso de perspectiva e, portanto, profundidade.

É um efeito atraente e pode ser aplicado a quantas camadas desejar. Neste artigo, vou apresentar os princípios básicos, mostrando-lhe como construir um efeito simples de paralaxe de duas camadas.

O HTML

Para começar, precisamos de algum HTML, incluiremos algum texto de preenchimento para ser colocado dentro de uma seção e, em seguida, outro

que manterá nosso background: 

Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Este é todo o HTML que vamos precisar. Todo o texto é apenas para garantir que cobrimos a página inteira para que a rolagem seja necessária. Vamos mais para o CSS:

O CSS

O CSS requerido para criar um efeito de paralaxe é realmente muito simples se você entender por que ele é escrito da maneira que é. Primeiro, precisamos definir a imagem de fundo do arquivo .bg div e, em seguida, precisamos interromper o div da rolagem, pois a ação de rolagem será aplicada pelo jQuery; então precisamos definir sua posição como fixa. Em seguida, definimos a largura para 100% e a altura para 300% para garantir que a div seja maior que a tela real. Posicionamos no canto superior esquerdo e finalmente damos a ele um z-index de -1 para garantir que ele seja renderizado sob o texto. 

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

Este é todo o CSS que precisamos para o bg div, agora só precisamos estilizar o resto da nossa página (embora isso seja inteiramente opcional, não afeta o scroll do parallax): 

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Tente rolar a página agora e você verá que o texto rola, mas o fundo permanece fixo, vamos mudar isso com o nosso jQuery:

O jQuery

O que queremos que o jQuery faça é verificar a distância percorrida pelo usuário e mover o plano de fundo a uma velocidade menor. Vamos criar uma função chamada paralaxe e criar uma variável que mantenha o valor dos pixels que o usuário rolou: 

function parallax(){var scrolled = $(window).scrollTop();

Agora, para fazer o plano de fundo rolar na mesma velocidade do texto, definimos o valor superior do div como o valor negativo do pergaminho e, em seguida, fechamos a função. Igual a: 

    $('.bg').css('top', -(scrolled) + 'px');}

No entanto, o ponto da rolagem paralaxe é mover-se a uma velocidade diferente, então, para ajustar a velocidade, multiplicamos o valor por uma fração, por exemplo, 0,2 para 20%: 

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

Há apenas mais uma coisa a fazer para obter o efeito em execução e isso é chamar a função toda vez que o evento de rolagem é acionado: 

$(window).scroll(function(e){parallax();});

Feito isso, nosso código está completo. Se você testar o arquivo, verá que está funcionando. Para mudar a velocidade, precisamos mudar a fração na função; frações menores reduzem a velocidade e aumentam as frações mais altas. Você pode ver o resultado final deste código em esta caneta eu criei.

Conclusão

Como você pode ver, criar um efeito de paralaxe não é tão difícil quanto você esperava. Naturalmente, este é apenas um exemplo simples, mas você pode construir sobre isso para criar qualquer tipo de efeito de paralaxe complexo que você gosta.

Você usou um efeito de paralaxe em um projeto? Você tem um método melhor? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem de perspectiva deslizante via Shutterstock.

rolagem de paralaxe paralaxe paralaxe simples como construir um site de paralaxe

OdWebDesign.Net