Если вы все еще не нашли решения самостоятельно, мне было поручено сделать очень похожее дело. Существует два способа достижения этого, которые я изучил и выбрал правильно, в основном зависит от сложности вашего дизайна/ожидаемого результата. К сожалению, я не могу предоставить ссылку, потому что сайт не будет жить в течение следующих нескольких недель.
Это то, что работает для меня:
Я использовал fullpage.js библиотеку для достижения «всю страницу» прокручивать эффект. Вы также можете взглянуть на onepage-scroll.js и посмотреть, какой из них вам подходит больше всего - они не отличаются тем, что в плане функциональности.
Преимущество использования fullpage.js (среди прочего):
- интеграция является простой и быстрой
- позволяет много настройки через параметры хэш
- обеспечивает функцию обратного вызов при прокрутке в другой раздел (до или после его возникновения)
- позволяет вручную запускать свиток с помощью «методов»
- works surprise хорошо на iPad/iPhone. Вероятно, на других мобильных устройствах, хотя я не могу полностью подтвердить это, поскольку этот не был требованием для моего проекта.
Теперь, когда вы прокручиваете сечение, вам не хватает анимации. Учитывая, что fullpage.js предоставляет вам обратные вызовы, это так же просто, как добавление класса, когда происходит переход к другому разделу/слайду, а затем использование этого класса для запуска анимации по вашему выбору с помощью CSS. Это то, что сработало для меня, не сталкиваясь с серьезными проблемами.
Для более продвинутых вещей:
Если вы хотите, чтобы построить что-то более сложное, то я настоятельно рекомендую вам взглянуть на tween.js. Это то, что Google использовал на целевой странице, которую вы указали в своем вопросе.
Это очень мощный инструмент, поэтому он требует совсем некоторой настройки +, он перемещает анимацию в javascript, что может быть хлопот. Я бы предпочел сохранить их в CSS, где они принадлежат, и не использовать javascript, пока мне это не понадобится.
FYI Я также начал с skrollr, но это не будет действительно работать с «свитка» Вся страница, потому что это действительно является отключение прокрутки и анимации тела/HTML с помощью перевода.Skrollr основывает свое поведение на событии прокрутки, которое не срабатывает, если вы используете библиотеки, которые я предлагал.
EDIT: Похоже, что вы можете использовать skrollr в паре с fullpage.js. Вы можете увидеть ответ о том, как в нем находится FAQ site. Благодаря Alvaro для claryfing это! Даже тогда я бы не использовал skrollr, если вы действительно не нуждаетесь в нем для какого-то продвинутого эффекта прокрутки параллакса - как сказано ранее, зависит от ваших потребностей. :)
Сообщите мне, если у вас есть какие-либо сомнения или что-то непонятное в моем ответе.
Удачи вам!
Вы пробовали то, что я предлагал? Это сработало? –