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.

Tags: | | | | | | | | | | | | | |

Sobre o Autor

Alan Mosko
Alan Mosko

Um jovem com ideias loucas, que resolveu encarar a internet com apenas 14 anos, buscando aprender a trabalhar online. E com muita dedicação, hoje me tornei uma referência em automação, estruturação de negócios digitais e qualificação de emails.