Como Fazer Efeito Smooth Scrolling no OptimizePress
Alan Mosko 17/02/2015 Leitura: 2 min
Olá, esse é o primeiro tutorial que estou postando aqui e estarei trazendo semanalmente novidades sobre o OptimizePress, sendo tutoriais como esse e também muitos os tipos de conteúdos exclusivos.
Efeito Smooth Scrolling
Primeiramente quero dizer a você o que seria o efeito smooth scrolling, para que possa entender a elegância, que esse simples efeito, trará para o seu site.
O Que é?
Definição: Efeito Smooth Scrolling é o fato de tornar o deslizar de uma página, uma forma suave, que venha trazer uma melhor experiência ao usuário, para que seja mais agradável a navegação do mesmo pelo site e/ou blog. Sendo assim, o Efeito Smooth Scrolling é um método de pensar na melhor forma de tornar o seu site um ambiente agradável para o usuário realizar uma próxima visita.
Como Fazer?
Para esse processo existe inúmeras formas de realizar, porém, como estamos falando sobre o OptimizePress, tem algumas certas formas que pode não funcionar como o desejado.
E devido a isso, após um questionamento feito para mim, eu resolvi buscar qual seria a melhor forma de criar esse simples efeito no OptimizePress.
Aplicando o Efeito
No vídeo acima, você verá como pode fazer o Efeito Smooth Scrolling e como aplicar em seu site.
Explicação do Código e Seu Funcionamento
Para que você possa entender como funciona esse efeito em sua página, em primeiro momento vou mostrar para você o código necessário e em seguida estarei explicando linha por linha desse código.
Bom, como diz o Jack, vamos por partes.
- Essa linha é muito importante, pois sem ela, o efeito não irá funcionar, pois nessa linha, você faz a chamada do jQuery e através dele que o código é ativo.
- Nessa linha é feita a abertura da tag script que sinaliza que a partir daqui é um código JavaScript.
- Aqui vamos criar uma function que será executada logo em que a página for carregada.
- Verifica o ID que será destinado a ser clicado, através da verificação do atributo href na tag <a>.
- Procura na url estipulada no href se tem caracteres de uma url e substitui por um campo vazio.
- Cria uma variável contendo o local na página o qual será deslizado, ou seja,oID da de destino.
- Cria um “se” (if) que realiza um contagem na variável que contem o local de destino.
- Faça a animação de deslizar suavemente até o local estipulado na variável (ID informado no atributo href na tag <a>).
- Após deslizar retornar falso, para parar no local, e executar novamente as ação quando clicado em outro item no menu.
- e 11. Fecha todas as ações anteriormente criadas e abertas.
Revisão
Nesse post eu trago para você o método mais simples e fácil de criar um Efeito Smooth Scrolling para você utilizar no OptimizePress.
- O Que é? – Falo sobre como que o efeito funciona.
- Como Fazer? – Falo sobre como que o efeito é feito e seu resultado.
- Aplicando o Efeito – Vídeo Aula que ensino como você pode aplicar em seu site você mesmo.
- Explicação do Código e Seu Funcionamento – Você poderá ver um comentário que faço explicando cada linha do código.
Muito obrigado pela sua atenção e se você gostou compartilhe com seus amigos, isso é muito importante, e deixe um comentário com alguma dúvida que tenha.
Até logo
