Управление скоростью прокрутки css jquery

Question

Узнать сайт http://www.boy-coy.com/#home. Когда вы scoll вниз все свитки содержания очень плавно. Даже если вы быстро прокрутите его, прокрутка выполняется с определенной скоростью. Это делает сайт более быстрым и отзывчивым. Как это можно сделать с помощью css и jquery?

Answer 1

На первый взгляд.

Попробуйте прочитать их исходный код html.

1. Они используют несколько плагинов jquery и устаревшие плагины браузера js.
2. У них есть пользовательский и частично запутанный .js-скрипт, который находится в глубине, но вы можете увидеть конкретные свойства, которые он задает для элементов на странице.
3. Запрет любых условий использования, вы можете, вероятно, расшифровать эту страницу крутой техники прокрутки, работая с этим примером кода в качестве примера. Но это определенно хорошая работа, чтобы писать с нуля или разместить здесь все решение.
4. Я собираюсь пойти и искать меньший пример, который не связан с этим параллаксом.
5. И проверьте эту ссылку http: // codepen.io/JTParrett/pen/BkDie. В ней есть некоторые стартовые принципы, где некоторые изображения позиционируются в разных местах в окне просмотра при прокрутке.
6. Эта ссылка в SO также может помочь Can I change the scroll speed using css or jQuery?
7. Kirupa имеет хороший учебник, который, вероятно, поможет получить эффект сглаживания прокрутки. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
8. И этот один довольно классный. Я думаю, что посмотрю на эту демонстрацию. Не забудьте проверить все демонстрации кликов здесь. Я уверен, что вы могли бы связать в вашем Jquery случае анимации для полосы прокрутки с этим http://plugins.compzets.com/animatescroll/
9. Другой достойный пример http://bassta.bg/demos/smooth-page-scroll/

Answer 2

Это называется Параллакс,

Проверьте это: http://www.w3schools.com/howto/howto_css_parallax.asp

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