Переход между страницами с изменением адреса в адресной строке браузера, как это реализовано на https://ind.studio/, можно достичь с помощью JavaScript и технологии AJAX с применением History API. Также, для создания плавных переходов обычно используют библиотеки анимаций или CSS транзишены.
Данный функционал можно реализовать следующим образом:
1. **Прослушивание события прокрутки**: Добавьте обработчик событий `scroll` на объект `window` для определения момента, когда пользователь прокрутил страницу до конца.
2. **Динамическая подгрузка содержимого**: Когда обработчик срабатывает, используйте AJAX (например, с помощью Fetch API) для асинхронной загрузки следующей страницы без перезагрузки текущей страницы.
3. **Изменение URL без перезагрузки страницы**: Используйте History API, чтобы обновить адрес в адресной строке браузера без перезагрузки страницы. Метод `history.pushState()` позволяет добавить новую запись в историю браузера, изменяя при этом адрес в адресной строке.
4. **Анимация перехода**: Примените CSS анимации или транзишены для создания визуально плавного перехода между текущим и новым содержимым страницы.
5. **Обработка истории**: Реализовать обработку кнопки "назад" в браузере с помощью события `popstate`, чтобы восстановить предыдущее состояние страницы.
Пример кода на JavaScript:
```javascript
window.addEventListener('scroll', () => {
// Вычисляем, достиг ли пользователь конца страницы
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
// Загружаем новую страницу через AJAX
fetch('path/to/next/page')
.then(response => response.text())
.then(html => {
// Обновляем DOM с новым содержимым
document.body.insertAdjacentHTML('beforeend', html);
// Анимация перехода (пример с использованием CSS класса для анимации)
const newContent = document.querySelector('.new-content');
newContent.classList.add('fade-in');
// Обновляем URL в адресной строке
history.pushState(null, null, 'newPageUrl');
});
}
});
window.addEventListener('popstate', (event) => {
// Действия при нажатии на кнопку "назад" в браузере
// Например, можно перезагрузить страницу или заменить содержимое на предыдущее
});
```
Пример CSS для анимации:
```css
.fade-in {
animation: fadeInAnimation 1s;
}
@keyframes fadeInAnimation {
from { opacity: 0; }
to { opacity: 1; }
}
```
При реализации данного функционала важно уделить внимание оптимизации и обработке ошибок, чтобы убедиться, что сайт будет корректно работать на всех устройствах и во всех браузерах. Кроме того, надо учитывать время загрузки и размеры загружаемого содержимого, а также возможность пользователей использовать кнопки навигации браузера.