Как создать сайт Parallax, например moodi.org, sony.com/be-moved?

Question

Взгляните на moodi.org, sony.com/be-moved, http://www.spaceneedle.com/home/, . Как я могу сделать сайт таким?

Answer 1

В принципе, все это делается путем обнаружения количества прокрутки пользователя и перемещения.

Вам нужен JavaScript и, конечно, html & css для достижения чего-то подобного.

Что делает JS, так это то, что он определяет, прокручивается ли пользователь, его направление и скорость, а затем указывает объекту «A» двигаться в противоположном направлении прокрутки, а также на 0,8 скорости его. Объект «B» перемещается в противоположном направлении, но с 1,2 скоростью прокрутки, поэтому вы почувствуете, что объект «B» ближе к вам.

Это просто очень простой пример того, как он работает.

Помните, что перед тем, как прикоснуться к коду, и при кодировании не забудьте вспомнить о проблемах на мелкие кусочки и найти их здесь, Например: Как изменить положение абсолютного элемента на основе прокрутки клиента? Вот как вы узнаете.

Полезные ссылки:

Там очень много техники, чтобы сделать что-то эффективное и чистое, вы должны быть знакомы с ними, чтобы принять лучшее решение. Вот некоторые ссылки, которые помогут вам начать:

• Это как-то старый, но я думаю, что помогает понять концепцию: http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
• https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website-part-2/
• Css только подход: http://keithclark.co.uk/articles/pure-css-parallax-websites/

Эти это лишь некоторые отправные точки, конечно, вы можете найти больше учебников и даже просмотреть источник своих любимых веб-сайтов, чтобы увидеть, как они достигли эффекта.

Заключительное примечание. Я думаю, что одна важная вещь, которую нужно иметь в виду, заключается не в том, чтобы одновременно перемещать многие объекты, как только они находятся вне видового экрана, перестаньте их перемещать, это очень помогает, когда дело доходит до производительности специально для более старых машины. jQuery Waypoint - удобный инструмент, который вводится во второй ссылке.