Создание горизонтальной прокрутки и ее плавное преобразование в вертикальную прокрутку требует комплексного подхода, включая HTML, CSS и JavaScript. Ниже приводится основная концепция, как это может быть реализовано.
### Шаг 1: Разметка HTML
Определите разметку, где есть горизонтально прокручиваемый раздел, за которым следует вертикально прокручиваемый контент.
```html
<div id="container">
<div id="horizontal-scroll">
<!-- Блоки для горизонтальной прокрутки -->
<div class="block">1</div>
<div class="block">2</div>
<!-- ... -->
</div>
<!-- Следующий контент с вертикальной прокруткой -->
<div id="vertical-scroll">
<!-- Вертикальный контент -->
</div>
</div>
```
### Шаг 2: Стили CSS
Используйте CSS для стилизации горизонтальной прокрутки и для установки ее поведения.
```css
#horizontal-scroll {
display: flex;
overflow-x: hidden; /* В реальном случае можно использовать overflow-x: scroll, если нужен стандартный скроллбар */
scrollbar-width: none; /* Скрываем стандартный скроллбар в Firefox */
}
#horizontal-scroll::-webkit-scrollbar {
display: none; /* Скрываем стандартный скроллбар в WebKit браузерах */
}
.block {
flex: 0 0 auto; /* Элементы не растягиваются и не сжимаются */
width: 100vw; /* Ширина каждого блока равна ширине вьюпорта */
/* Высота, паддинги, маргины и другие стили для блока */
}
```
### Шаг 3: Скрипт JavaScript
Создайте скрипт, который будет управлять прокруткой этих элементов и обработкой событий прокрутки, чтобы имитировать эффект с сайта Apple.
```javascript
const horizontalScrollContainer = document.getElementById('horizontal-scroll');
let isScrolling = false;
window.addEventListener('wheel', (e) => {
// Определите, находится ли пользователь в области горизонтального скролла
const isHorizontalScrollArea = window.scrollY < horizontalScrollContainer.offsetHeight;
if (isHorizontalScrollArea) {
// Предотвращение вертикальной прокрутки
e.preventDefault();
// Нормализация deltaX для прокрутки (некоторые браузеры могут использовать deltaY для горизонтальной прокрутки)
const deltaX = e.wheelDeltaY || e.deltaY;
// Плавное горизонтальное прокручивание
horizontalScrollContainer.scrollLeft += deltaX;
} else {
if (!isScrolling) {
isScrolling = true;
// Если достигли зоны вертикального скролла - начать плавное вертикальное прокручивание
// Предотвратить дальнейшую горизонтальную прокрутку
}
}
});
```
Это лишь базовый пример, и вам потребуется более сложная логика для определения местоположения пользователя в контейнере прокрутки, а также дополнительная работа над плавностью прокрутки и контролем поведения. Можно использовать такие библиотеки, как `ScrollMagic` или `GSAP` для упрощения реализации и улучшения производительности и плавности анимаций прокру