Переадресация на другой URL с помощью плавной анимации

Question

Я пытаюсь повторить то, что делают эти парни здесь

Я настроил 2 тестовые страницы, так что, возможно, я смогу лучше объяснить, чего я пытаюсь достичь.

Это страница, на которую я хочу попасть - eh19.ehdsonline.com/sof-video

Тогда это страница, на которую я хочу перейти при прокрутке вниз - eh19.ehdsonline.com/sof-home

Идея состоит в том, что когда вы попадаете на страницу "SOF-видео" - прокручивая вниз - я хочу перейти в "SOF-home" с плавным переходом / анимацией.То же самое, что и в примере с www.e-types.com.

Вот код, с которым я пытаюсь этого добиться, но, похоже, он не справляется с работой.

document.getElementById("content-986").onscroll = function() {
   window.location = 'http://eh19.ehdsonline.com/sof-home';
   console.log("test");
}

Answer 1

Пример приложения, которое вы показали, на самом деле не перенаправляет на новую страницу, хотя выглядит так.Это одностраничное приложение, и URL, кажется, меняется.

С помощью API истории в HTML5 это можно сделать.Идея состоит в том, чтобы совершать звонки, меняя URL, не перезагружая страницу.Пример:

window.history.pushState("object or string", "Title", "/new-url");

Вы можете загрузить компонент / div, а при прокрутке вы можете отобразить другой компонент / div и изменить URL-адрес.Это то, чего вы легко можете достичь в React, если используете что-то вроде React Router.