Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

Técnica de Scroll com Parallax Simples

by
Difficulty:IntermediateLength:LongLanguages:

Portuguese (Português) translation by Tiago Leão (you can also view the original English article)

O scroll com parallax é uma técnica interessante em que, à medida que vocês faz scroll, as imagens avançam mais devagar do que o conteúdo em foreground, criando a ilusão de profundidade 3D. Como estava a planear redesenhar o meu website pessoal, o meu objetivo principal foi escrever um código que fosse o mais curto e mais simples possível! Vou mostrar-lhe como fiz isso.

Se está à procura de uma forma rápida de começar com um template básico, encontrar um Tema Parallax simples pode ser uma boa opção. Poderá também procurar um dos nossos One Page Templates. ou procurar junto dos prestadores de serviços do Envato Studio que o ajudarão a criar um websites com paralax scrolling.

Neste tutorial, vou ensinar-lhe a técnica de parallax scrolling mais simples que alguma vez encontrou. Portanto, vamos começar!


Etapa 1: A Marcação

Esta técnica permite controlar a velocidade da imagem de fundo. Vamos começar com a Marcação HTML, criando duas secções com os atributos necessários: "data-type" e "data-speed". Não se preocupe sobre o que significam, explicarei isso mais tarde.

Estou a usar a tag <section> com os atributos data-type e data-speed, que foram introduzidos no HTML5. Isto faz com que a marcação HTML fique mais limpa e seja mais fácil de ler. 

De acordo com as especIficações para Custom Data Attributes, qualquer atributo que comece por data- será tratado como área de armazenamento para dados privado. Adicionalmente, isto não afetará o layout ou apresentação. 

Tendo em conta que tudo o que precisamos de fazer é controlar a velocidade das imagens de fundo, utilizaremos data-type="background" e data-speed="10" como atributos para especificar os parâmetros necessários. 

Sei o que você está a pensar: está preocupado com o IE. Mas não se preocupe! Tenho um truque para isso. Vamos falar sobre ele dentro de momentos. 

A seguir, vamos adicionar o conteúdo dentro da tag <article> e dentro de cada <section>.

O que estamos a tentar fazer aqui é fazer com a velocidade de scroll da imagem de background do <section> seja mais lenta do que a do content, ou seja, do <article>. Isto ajudará a criar a ilusão do Parallax. Antes de avançarmos para a magia do JQuery, vamos adicionar imagens de fundo ao CSS para cada <section>.

Após adicionar fundos em ambas as seções, deverá ter algo como isto:

image
image

Vamos adicionar mais algum CSS ao estilo e apimentar a página!

Agora deverá ter algo como isto...

image

Etapa 2: O código mágico

Sim, é isso mesmo; é aqui que a magia  começa! Usando jQuery, vamos começar com um método standard document.ready() para garantir que a página fez load e está pronta para ser manipulada. 

Esta técnica foca-se em controlar a velocidade da imagem de background que existe em ambas as secções.

Agora, preciso da sua atenção. A primeira coisa que está a acontecer abaixo é que estamos a iterar a <section> da página, que tem o atributo data-type="background".

Adicione outra função, .scroll(), dento de .each(), que é chamada sempre que o utilizador começa a fazer scroll.

Precisamos de terminar quanto scroll up é que o utilizador fez e, depois, dividir o valor pelo valor do data-speed, que mencionamos na etapa da marcação.

$window.scrollTop(): estamos a obter o valor atual do scroll para o topo. Isto basicamente determina quanto o utilizador fez scroll up. $bgobj.data('speed') diz respeito ao data-speed atribuído na marcação, e yPos é o valor final que precisamos de aplicar no scrolling. No entanto, este será um valor negativo, porque temos que mover o fundo na direção oposta ao movimento de scroll do utilizador.

Vejamos o exemplo:

image

Na imagem acima, o data-speed é 10, e vamos assumir que a janela do browser fez um scroll de 57px. Isto significa que 57px dividido por 10 = 5.7px.

A última coisa de que precisamos de fazer é posicionar a nossa imagem de fundo numa variável. Para que o fundo se mantenha numa posição horizontal estática, colocamos 50% em xPosition. De seguida, acrescentamos o yPos como yPosition e, finalmente, adicionamos as coordenadas do fundo para o nosso de fundo: $bgobj.css({ backgroundPosition: coords });.

O seu código final deverá parecer-se com isto:

Parabéns, você conseguiu! Agora, tente você mesmo.


Fix para IE

Há um último fix: ver mais antigas do IE não conseguem renderizar as tags <section> e <article>. No entanto, isto é fácil de solucionar; vamos usar uma solução standard para criar os elementos, que farão com que o browser reconheça magicamente as tags de HTML5.

Adicionalmente, vamos precisar de usar um ficheiro básico de CSS para garantir que o Parallax funciona bem em todos os browsers. Felizmente, ferramentas como o HTML5 Boilerplate tratam de parte do trabalho por nós, no que toca à normalização para os diferentes browsers.

E esta lição termina aqui! Há alguma dúvida ou apontamento que queiras deixar? Deixa-a abaixo!

E se estás à procura de uma solução rápida com resultados profissionais, então acede ao nosso Tema Parallax ou conhece as opções de One Page Template, disponíveis para compra no ThemeForest.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.