How to make the automatic animated scroll effect?

Asked

Viewed 1,958 times

0

This site I found https://cliquestudios.com/ has a super cool effect that I would like to do a similar on my site: inserir a descrição da imagem aqui

When you scroll down, item 01 changes to 02. Consequently, the content changes.

I know I must use Javascript and CSS, but I can’t find any tutorial that explains how it works.

Has anyone ever done or has anything like it?

  • 1

    This site is well improved, for starters I know the Scrollspy that implements change as scroll.

1 answer

1

The side menu with the items is fixed by CSS: position: fixed and the line height indicating which item is currently appearing is modified with each scroll of the page. Just like the function of clicking on items and animating the page also depends on scroll.

One way to make that effect is: $('html, body').animate({scrollTop: $('#id').offset().top}, 'slow');

Give a studied in these functions https://api.jquery.com/scrollTop/ and http://api.jquery.com/offset/ (offset takes the coordinates of the chosen element)

Example I found in Jsfiddle: http://jsfiddle.net/ryantroyford/ZuZQJ/

  • Very good. I didn’t know these methods, pretty cool this jquery feature.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.