Как называется этот эффект скорости прокрутки и как его достичь? - PullRequest
0 голосов
/ 10 мая 2018

Я изучаю CSS, и я искал эффект параллакса, потому что он потрясающий @. @ ... но мне не нравится, как большинство из них прокручивают.Я действительно хочу выяснить, как добиться хорошей плавной прокрутки, как на на этом сайте .Я пытался понять, как это называется.Я думаю, что это прокрутка импульса?Но по какой-то причине, пытаясь найти больше примеров или учебных пособий о том, как это сделать, все примеры «плавной» или «импульсной» прокрутки я обнаружил, что работа похожа на обычную прерывистую прокрутку, по крайней мере, для меня в Chrome.Мне было интересно, может ли кто-нибудь подтолкнуть меня в правильном направлении, где я мог бы узнать больше о том, как кодировать это специально для Chrome, по крайней мере.Спасибо.

1 Ответ

0 голосов
/ 10 мая 2018

Этот сайт использует CSS Transforms.

Если вы знакомы с параллаксом, и это не вопрос, то эффект, который вы замечаете, который отличает этот сайт от других с параллаксом, - это переходное замедление (переходы CSS).

Таким образом, состояние элементов на странице постепенно переводится из начального состояния в конечное.

Более конкретно, вы можете захотеть взглянуть на матрицу преобразования CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix.

Также для дальнейшего исследования я настоятельно рекомендую книгу Сары Дрэснер SVG Animations, а также книгу CSS Animations and Transitions for Modern Web от Стивена Брэдли.

А для большего вдохновения загляните в "scrollytelling" и Ширли Ву из http://www.datasketch.es/. Она действительно изящна в scrollytelling и выдает удивительные примеры все время.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...