Шаблон для сайта как у Тесла - скачать бесплатно
Шаблон Tesla можно скачать тут. Ну и просто посмотреть работу на живом примере. Оригинальный сайт.
В общем, на днях меня попросили помочь с кодом анимации. Что-то там никак не хотело запускаться. В итоге, я глянул на того монстра и решил полностью с нуля сверстать шаблон и написать для него скрипты. На что и ушло пара дней. Там есть некоторые особенности и подводные камни.
Особенности работы
1) Сайт листается секциями. Ровно по одному экрану. На мобильном телефоне это вызывало некоторые проблемы. Особенно, если читать текст горизонтально. Поэтому там пришлось сделать что-то среднее. С одной стороны, можно прокрутить страницу пальцем (как на оригинальном сайте). А с другой, экран "притягивает" к нужной секции.
2) При навигации у страницы меняются # якоря в URL страницы. Причем, можно даже использовать ссылки с якорем на других сайтах. При загрузке скрипт прокрутит на нужный экран автоматически.
3) На слишком маленьких экранах появляется адаптивное меню, а стрелка прокрутки «Вверх» перемещается в правый нижний угол. А боковое меню прижимается к левому краю.
4) Чтобы избежать неприятных ситуаций, при ресайзе страницы (или повороте мобильного телефона) вновь просчитываются положения всех элементов.
5) Все страницы шаблона (как и на сайте Тесла) можно анимировать. Для этого при листании к BODY добавляется класс "scrolled" и класс просматриваемой секции. Например, "section2". Используя transition это очень легко сделать. Достаточно указать начальное состояние элемента и конечное - при просмотре страницы. И все анимации будут срабатывать каждый раз при листании.
Дополнительно отмечу еще одну проблему, которую решил. Если задать html, body {overflow: hidden;} - некоторые браузеры не листают страницу вообще. Например, Сафари и Edge. Но если поменять все на html {overflow: auto;} body {overflow: visible;} - прокрутка срабатывает нормально.
Демо во фрейме.