滚动速度操纵CSS jQuery

Question

Find out a website http://www.boy-coy.com/#home . When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?

Answer 1

At first glance.

Try reading their html source code output.

1. They use a few jquery plugins and legacy browser js plugin calls.
2. They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
3. Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
4. Im going to go and look for a smaller example that isnt as involved as this parallax.
5. And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
6. This link in SO can also help Can I change the scroll speed using css or jQuery?
7. Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
8. And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
9. Another decent example http://bassta.bg/demos/smooth-page-scroll/

Answer 2

It is called Parallax,

Check this: http://www.w3schools.com/howto/howto_css_parallax.asp

http://matthew.wagerfield.com/parallax/