Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:

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 с классом content.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готово!

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.