0

Este site que encontrei https://cliquestudios.com/ possui um efeito super bacana que gostaria de fazer um parecido em meu site: inserir a descrição da imagem aqui

Quando você rola para baixo, o item 01 muda para 02. Consequentemente muda o conteúdo.

Sei que devo utilizar Javascript e CSS, mas não consigo encontrar algum tutorial que explique como funciona.

Alguém já fez ou tem algo parecido?

1
  • 1
    Esse site está bem aprimorado, para começar conheço o Scrollspy que implementa mudança conforme scroll.
    – BrTkCa
    Commented 30/11/2016 às 12:40

1 Resposta 1

1

O menu lateral com os itens é fixo pelo CSS: position: fixed e a altura da linha que indica qual item está aparecendo no momento é modificada a cada scroll da página. Assim como a função de clicar nos itens e animar a página também depende de scroll.

Uma maneira de fazer esse efeito é: $('html, body').animate({scrollTop: $('#id').offset().top}, 'slow');

Dê uma estudada nessas funções https://api.jquery.com/scrollTop/ e http://api.jquery.com/offset/ (offset pega as coordenadas do elemento escolhido)

Exemplo que achei no Jsfiddle: http://jsfiddle.net/ryantroyford/ZuZQJ/

1
  • Muito bom. Não conhecia esses métodos, bem legal essa funcionalidade do jquery.
    – K4L1
    Commented 24/11/2018 às 13:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .