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.

1. 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.
2. Nessa linha é feita a abertura da tag script que sinaliza que a partir daqui é um código JavaScript.
3. Aqui vamos criar uma function que será executada logo em que a página for carregada.
4. Verifica o ID que será destinado a ser clicado, através da verificação do atributo href na tag <a>.
5. Procura na url estipulada no href se tem caracteres de uma url e substitui por um campo vazio.
6. Cria uma variável contendo o local na página o qual será deslizado, ou seja,oID da
   de destino.
7. Cria um “se” (if) que realiza um contagem na variável que contem o local de destino.
8. Faça a animação de deslizar suavemente até o local estipulado na variável (ID informado no atributo href na tag <a>).
9. Após deslizar retornar falso, para parar no local, e executar novamente as ação quando clicado em outro item no menu.
10. 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