(JS) SPA-подобное поведение сайта с фоновыми видео - PullRequest
0 голосов
/ 17 января 2020

Простите, если существует другая подобная нить - я не могу найти ответ на эту конкретную проблему c.

Я скоро буду разрабатывать интерфейс для ванили JS AJAX загруженный веб-сайт со SPA-подобным поведением, похожим на домашний слайдер в этом: - http://clapat.ro/themes/grenada-wordpress

Методология, которую я, вероятно, буду использовать, это загрузка внутреннего HTML контейнера из целевой под-шаблон, затем подталкивающий состояние к истории - я полагаю, довольно стандартный подход к этому.

Теперь, слайды, содержащие фон изображения, довольно очевидны - все, что нужно, это поместить одно и то же изображение в целевая секция героя подстраницы, затем анимация при загрузке. Проблема может быть связана с видео-слайдами - как заставить их продолжать непрерывно воспроизводиться во время и после перезагрузки? Будет ли такой подход заставлять их начинать все сначала, как только целевая страница будет загружена и помещена в представление?

Я еще не пробовал, подумал заранее чтобы не зацикливаться на неправильном подходе :)

Заранее спасибо, Питер

1 Ответ

0 голосов
/ 18 января 2020

Исследуя эталонные шаблоны в сотый раз, я думаю, что сам придумал какое-то решение:

, если бы домашняя страница и целевая страница имели такую ​​структуру, как:

<body>
  <main-container>
    <slider-or-hero-container>
    ...
    </slider...>
    <content-container>
    ...
    </content...>
  </main-container>
</body>

Тогда, может быть, я мог бы заменить весь "основной контейнер" на обычные ссылки, но заменить только "контейнер содержимого", щелкая ссылки внутри ползунка? Секция слайдера в основном просто останется, и скрипт просто изменит свой внешний вид (отключение стрелок и смены слайдов, выполнение анимации перехода и т. Д. c) ...

Если у вас есть какие-либо предложения на этом этапе, Я действительно ценю это :) В противном случае, я опубликую обновление, когда я закончу его кодировать - если это работает, это может быть полезно для кого-то в будущем:)

...