Como Fazer Efeito Parallax no OptimizePress
Alan Mosko 04/03/2015 Leitura: 2 min
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
- Primeira linha, abro a classe parallax
- 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.
- Agora eu centralizo a imagem que está no fundo.
- 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.
- Colocar código CSS nas Configurações de Página > Outros Scripts.
- Clicar para salvar o código, esperar atualizar o LiveEditor.
- Selecionar a linha que deseja aplicar o efeito, e clicar em configurações de linha (engrenagem).
- Adicionar a classe parallax (sem ponto) na linha e selecionar imagem de fundo.
- 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.
