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

  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