Как создать сплитскрин слайдер при помощи JavaScript

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Сегодня в видеоруководстве я покажу вам как создать "сплитскрин" слайдер, используя JavaScript. Вдохновением послужила страница с Corsair website; давайте посмотрим, как мы можем создать свой собственный слайдер.

Что мы будем делать

Давайте посмотрим на демо того, что мы будем делать. Посмотрите на проект на CodePen, либо скачайте исходники с GitHub.

Посмотрите видео

1. Создаем панели

Как это сделать? Создайте две отдельные панели в вашем HTML. Я использовал div элемент с классом panel. У первой панели задал также класс bottom, у другой – top. В каждой панели также есть еще один div для контента.

<div class="splitview">
    <div class="panel bottom">
        <div class="content">
        
        </div>
    </div>   
    <div class="panel top">
        <div class="content">
        
        </div>
    </div>    
</div>        

Поместите ваш контент (изображения, заголовки и т.д.) в div с классом content.

Как только сделаете, добавьте еще один div в качестве переключателя перед закрывающим тегом splitview.

1	<div class="handle"></div>

2. Добавьте стилей для расположения панелей

Первыми важными стилями будут те, которые разместят наши панели одну над другой, а также сделают их подвижными.

/* Panels. */
.splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
}

Задайте стили каждой панели отдельно – для top и bottom, например задав background-color и украсьте их внутри как захотите. Стоит только помнить о z-index, чтобы расположить их в правильном порядке.

.bottom {
    background-color: rgb(44, 44, 44);
    z-index: 1;
}

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
}

3. Примените простую маску

Теперь наша верхняя панель полностью перекрывает нижнюю, так что давайте поэкспериментируем с шириной:

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

У вас должно получиться что-то похожее верхняя панель будет достигать не более половины (50vw) страницы:

4. Подключаем JavaScript

Теперь, когда все работает в нашем CSS, давайте займемся JavaScript и посмотрим, как мы сможем анимировать наш слайдер. Начнем с запуска функции только при полной загрузке DOM.

1	document.addEventListener('DOMContentLoaded', function() {
2
3	});

Весь остальной код будет находиться внутри этой функции, внутри скобок.

Затем обозначим переменные, указав родительский элемент, верхнюю панель (она единственная у нас будет изменяться) и элемент, который будет происходить смена.

1	var parent = document.querySelector('.splitview'),
2	topPanel = parent.querySelector('.top'),
3	handle = parent.querySelector('.handle'),

5. Делаем переключатель

Прежде чем приступить, давайте зададим стили переключателю.

/* Handle. */
.handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

Это небольшой блок в 5pxпомещенный в середину видимой области. Его z-index – 3, убедитесь, что он находится на самом верху.

Заставляем его перемещаться

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

Начнем с приемника событий на родительском элементе, затем установим свойство left нашего переключателя равным значению event.clientX.

1	parent.addEventListener('mousemove', function(event) {
2	// Move the handle.
3	handle.style.left = event.clientX + 'px';
4	});

Этот код позаботится о перемещении переключателя, теперь давайте займемся размерами панели, приравняв их к event. clientX.

parent.addEventListener('mousemove', function(event) {
        // Move the handle.
        handle.style.left = event.clientX + 'px';

        // Adjust the top panel width.
        topPanel.style.width = event.clientX + 'px';
});

Готово!

Мы подошли к концу; при помощи такого простого CSS и JavaScript мы создали прекрасный эффект сплитскрин слайдера. Чтобы сделать все еще лучше, чем я занимаюсь в видео, мы можем изменить и сам переключатель – взгляните на демо на CodePen!