прокрутки на основе анимации: как создать их

Question

Я наткнулся на эту веб-страницу: http://www.wsj.com/ad/cocainenomics

Это показывает именно такой анимации я хотел бы научиться создавать.

Ничего массового комплекса, просто элементы или слои приходят, когда пользователь прокручивает страницу (не учитывайте анимацию «порошок» на визуальном изображении героя).

Какая техника/язык программирования/js-based library советник эксперта-аниматора как лучший вариант для достижения этого?

Я рассматриваю:

• чистого JQuery анимации
• JQuery вызвал css3 анимации
• velocity.js-based подхода с минимальным jQuery использования только для построения цепочки вызова анимации на объект в jQuery элементе

Какой подход между ними вы, ребята, считаете предпочтительным? Или у вас есть что-то еще?

Считаете ли вы, что могучая сила velocity.js непропорциональна для анимации, это просто? Я видел демоверсии скорости, и они намного сложнее, чем анимации scroll-based, включенные в этот сайт.

Answer 1

Я нашел успех Skrollr раньше для такого рода вещи:

• Ознакомьтесь с демо на https://prinzhorn.github.io/skrollr/
• Посмотрите на код в https://github.com/Prinzhorn/skrollr

EDIT: Я только что просмотрел документы Skrollr и заметил, что он прекратил поддерживать около года назад. Быстрый Google поднял ScrollMagic в качестве возможной альтернативы. Я также рекомендую копать исходный код сайта примера, который вы предоставили, и посмотреть, сможете ли вы понять, что они использовали!

Velocity.js не обязательно то, что вы хотели бы использовать специально для анимации на основе прокрутки, которую вы ищете - это просто альтернативный вариант для того, чтобы делать то же самое, что и с animate() jQuery. с закулисной магией, чтобы сделать анимацию более эффективной.

Строго говоря, StackOverflow, вероятно, не лучшее место для такого типа вопросов (см. Рекомендации для вопросов по адресу https://stackoverflow.com/help/dont-ask) - так что ваш вопрос может быть отмечен модераторами!

Answer 2

пожалуйста, проверьте это, https://codyhouse.co/gem/vertical-timeline/ я полагаю, что ее именно то, что вы ищете, проверить демо здесь: https://codyhouse.co/demo/vertical-timeline/index.html я полагаю, что ее довольно простой вариант, поскольку его свободный и его полностью настраиваемый. (также его почти только CSS с небольшим JQuery)