изменение содержания html на прокрутке

Я пытаюсь добиться такого же эффекта, как и этот website.изменение содержания html на прокрутке

Вы заметите, что URL-адрес изменяется, и содержимое изменяется при прокрутке, однако, когда я проверяю запросы, сделанные в консоли, я не вижу нового запроса AJAX для получения нового содержимого html. Я не могу понять, как загружается этот контент.

Похоже, что смена страницы - это просто эффект прокрутки javascript, и JavaScript также изменяет URL. Если вы заметили, перейдите в раздел about и обновите этот URL-адрес, и страница не найдена.

Любые указания относительно того, как это можно достичь, будут очень признательны. Я прочитал исходный код javascript на странице, но по мере его минирования я все еще пытаюсь понять, как все это работает. Возможно, я должен использовать состояние истории html5.

Мой текущий проект настроен так:

Файл index.html выглядит следующим образом:

<body>  
    <header> 
     <img src="homeLogo.png"> 
    </header> 
    <div id="scene"> 
     <h3>Home page</h3> 
     <div class="bgImage"></div> 
    </div> 
    <footer> 
     Footer 
    </footer> 
</body>

локон/файл index.html выглядит следующим образом:

<body>  
     <header> 
      <img src="homeLogo.png"> 
     </header> 
      <div id="scene"> 
       <h3>Trees</h3> 
       <div class="bgImage trees"></div> 
      </div> 
     </div> 
     <footer> 
      Footer 
     </footer> 
    </body>

urban/index.html - это то же самое, что и tress/index.html. из div в div с id scene.

Основываясь на том, как настроен проект, мне интересно, как я могу обновить страницу контента с помощью разных html-файлов.

источник

2016-06-16 Anonymous

iframe? измените src iframe на прокрутку в соответствии с тем, что вы хотите. будь то деревья/index.html или urban/index.html – jackjop

FYI, unminifiers, такие как 'unminify.com', помогут вам в мини-javascripts (даже css и htmls тоже) – jackjop

Я знаю, что это может быть не на тему вопрос * (мои извинения, если это не так) *, но я хотел бы отметить, что https://www.chelseacollective.com/ - это блестяще оформленный веб-сайт, я имею в виду просто посмотреть на него ... Дизайн просто прекрасно. Также @jackjop благодарит за ссылку на http://unminify.com, оцените ее. –

Посмотрите на API истории, в частности, в функции:

window.history.pushState({ your_data:"whatever"}, "title", newUrl);

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Есть отличные библиотеки третьих сторон, которые могут помочь вам легко построить решение кросс-браузер, хотя современные браузеры следуйте стандарту прилично.

Остальная часть вашей проблемы - это просто динамическое добавление контента, который может исходить из запроса ajax или нет.

источник

2016-06-16 18:18:43 rupps

ОК, но как я могу обновить контент на основе схемы проекта выше? Можно ли это сделать без ajax запрос? –

либо вы используете «XmlHttpRequest» для загрузки файлов, либо загружаете весь контент в JS-файл, а затем визуализируете его поэтапно, когда пользователь прокручивает – rupps

, можете ли вы объяснить, как загрузить весь контент в JS-файле? –

изменение содержания html на прокрутке

ответ

Смежные вопросы