Como Fazer Efeito Parallax no OptimizePress

Olá, estou aqui para mais um post ensinando você a como criar um efeito para o seu OptimizePress, e dessa vez trago a você Como Fazer Efeito Parallax no OptimizePress, de forma simples e rápida.

Esse post vem de uma serie de post falando sobre Efeitos para OptimizePress, outros post já realizados são:

Efeito Parallax

Para quem não conhece o Efeito Parallax, quero dizer a você o que é e como ele funciona, para que você possa entender melhor a forma que criei.

O Que é?

Definição: O Efeito Parallax costuma ser simulado com a técnica de mover imagens de fundo em uma velocidade mais lenta do que as imagens de primeiro plano, criando no nosso cérebro a ilusão de profundidade. Na web é usado na maioria das vezes em sites de uma única página, que envolve o fundo se movendo em um ritmo mais lento em primeiro plano, criando um efeito 3D quando você rolar a página.

Como Fazer?

Abaixo trago os códigos de CSS simples que você irá precisar para realizar esse efeito em menos de 1 minuto.

Aplicando o Efeito

Aqui você poderá ver o quanto é fácil e rápido aplicar esse efeito em sua página.

Parte 1 – Explicação do Código e Seu Funcionamento

Como de costume vou começar explicando o código que será utilizado, nesse caso você só irá precisar adicionar uma única classe em sua página. Para aplica esse CSS você precisa ir em Opções de Página > Outros Scripts

  1.  Primeira linha, abro a classe parallax
  2. Em seguida, eu dou o comando background-attachment que diz para o fundo do elemento com a classe, que é para ficar fixo em relevância a página e não ao elemento.
  3. Agora eu centralizo a imagem que está no fundo.
  4. E para encerrar eu digo que a imagem do fundo precisa preencher todo o espaço da largura da tela (monitor) do usuário.

Parte 2 – Aplicação do Efeito

Agora você precisa ir em configurações da linha a qual quer aplicar o Efeito Parallax e adicionar a classe parallax na linha. E também é preciso definir a imagem de fundo da linha que terá o efeito, na parte inferior do Pop Up de configurações de página.

Após selecionar a imagem e aplicar a classe na linha, você só precisa salvar e testar o seu sucesso.

Revisão

Para que você consiga aplicar tudo com muita perfeição, segue abaixo o passo a passo como revisão do que precisa fazer.

  1. Colocar código CSS nas Configurações de Página > Outros Scripts.
  2. Clicar para salvar o código, esperar atualizar o LiveEditor.
  3. Selecionar a linha que deseja aplicar o efeito, e clicar em configurações de linha (engrenagem).
  4. Adicionar a classe parallax (sem ponto) na linha e selecionar imagem de fundo.
  5. Agora só salvar tudo e apreciar.

Muito obrigado pela sua atenção e se você gostou compartilhe com seus amigos também, pois isso é muito importante para me ajudar a continuar passando novos conteúdos e/ou deixe um comentário com alguma dúvida que tenha ou se preferir algo mais privado, pelo botão vermelho ao lado esquerdo da página você também pode.

Até logo.

Comentários

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.