Como Fazer Efeito Smooth Scrolling no OP

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

Comentários

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Muito bom Alan, funcionou perfeitamente, muito obrigado! Agora, tem como eu fazer com que o menu deslize junto para a seção?

    1. Alan, já resolvi, eu vi o seu outro vídeo explicando como faz, deu certo. Cara, muito bom seus conteúdos. Grande abraço!!

  2. Alan, parabéns pelos vídeos! Quando eu deixo o menu fixo e faço as âncoras, os efeitos do ANIMATE.CSS não funcionam mais … sabe se é possível deixar o menu fixo com âncoras e ainda deixar os efeitos? Obrigado!

    1. Olá, tente colocar o código do menu fixo antes do código do animate, se já estiver assim, então inverte, não lembro ao certo a ordem, mas geral conflito.

          1. Você tem que definir que os outros scripts que esta colocando, no caso o do Efeito Apper e Smooth Scroling, estejam no cabecalho (header) e não em um campo css, senão não vai funcionar mesmo.

    1. Olá Ramão, você poderia fazer um slideshow com html e css, e inserir ele no campo de código antes da linha, na engrenagem, e com alguns ajustes você tem o slide de fundo

  3. Alan,

    O código sumiu aqui da página. Não estou conseguindo adicionar o efeito deslizante, apenas a marcação com #.

11 Mais Comentários