Разделенный экран (split screen)

Разделенные экраны (Split Screen) — трендовый элемент в современном веб-дизайне. Они позволяют эффектно представить два продукта, услуги или варианта выбора, вовлекая пользователя в интерактивное взаимодействие. Раньше создание такого динамичного компонента требовало немало кода, но с фреймворком Vue.js это становится невероятно простой задачей. Реактивность и декларативный подход Vue позволяют в несколько строк кода реализовать плавную анимацию и отклик на действия пользователя.

Ниже вы можете увидеть готовый компонент в работе. Наведите курсор на каждую из половин, чтобы увидеть анимацию.

Купить

<div id="app">
  <div class="app-container">
    <div class="app-item" :class="{expand: item.expand}" v-for="item in items" :key="item.title" @mouseenter="handleMouseEnter">
      <h2 class="app-item__title">{{ item.title }}</h2>
      <div class="app-item__img">
        <img :src="`/img/${item.img}`" :alt="item.title">
      </div>
      <a href="#" class="app-item__btn">Купить</a>
    </div>
  </div>
</div>

.app-container {  
  position: relative;
  height: 100vh;
  margin-inline: calc(-50vw + 50%);
  display: flex;
}
.app-item {
  --tr: .8s ease-in-out;
  overflow: hidden;
  position: relative;
  flex: 1 1 0;
  display: grid;
  justify-content: center;
  place-items: center;
  align-content: center;
  gap: 40px 0;
  transition: flex-grow var(--tr);
}
.app-item__title {  
  width: max-content;
  color: #fff;
  font-size: clamp(1.5rem, 0.9783rem + 2.6087vi, 3rem);
  font-weight: 700;
}
.app-item__img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.app-item__img img {
  display: block;
  width: 100%;
  height: 100%; 
  object-fit: cover;
}
.app-item:first-child .app-item__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(204, 70%, 53%, 0.75);
}
.app-item:last-child .app-item__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(0, 0%, 0%, 0.75);
}
.app-item__btn {
  --tr: .3s ease-in-out;
  padding: 15px 70px;
  color: #fff;
  font-size: 500;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  border: 3px solid #fff;
  transition: background-color var(--tr), border-color var(--tr);
}
.app-item__btn:hover {
  background-color: #27AE60;
  border-color: #27AE60;
}
.expand {
  flex-grow: 3;
}

const {createApp, ref} = Vue
createApp({
    setup(){
        const items = ref([
            {
                title: 'Samsung',
                img: 'samsung.jpg',
                expand: false,
            },
            {
                title: 'iPhone',
                img: 'iphone.jpg',
                expand: false,
            },
        ])
        function handleMouseEnter(e) {
            let target = e.target
            let title = target.querySelector('.app-item__title')
            if (title) {
                for (let item of items.value) {
                    if (item.title === title.textContent) {
                        item.expand = true
                    } else {
                        item.expand = false
                    }
                }				
            }
        }        
        return{items, handleMouseEnter}
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как это работает? Подробный разбор кода

Давайте разберем по частям, как создается эта магия.

Верстка и директивы Vue

v-for="item in items" — директива, которая автоматически рендерит необходимое количество блоков на основе массива данных. Это делает код масштабируемым: чтобы добавить третью секцию, достаточно просто добавить новый объект в массив items.
:class="{expand: item.expand}" — динамически добавляет или убирает CSS-класс expand в зависимости от состояния item.expand. Это и есть сердцевина анимации.

Стилизация на CSS

Контейнер .app-container — это flex-контейнер, где дочерние элементы по умолчанию имеют равную ширину flex: 1 1 0.
Анимация — плавное изменение свойства flex-grow в классе .expand заставляет активную секцию растягиваться. Скорость и характер анимации задаются CSS-переменной --tr.
Адаптивность — для заголовка используется современная функция clamp(), которая обеспечивает отзывчивый шрифт, плавно изменяющийся между минимальным и максимальным значениями.
Наложения — псевдоэлементы ::after на изображениях создают полупрозраные цветные фильтры для улучшения читаемости текста.

Логика на Vue.js (Composition API)

Реактивные данные: В items.ref хранится массив объектов с данными для каждой секции. Ключевое поле expand отвечает за то, активна ли в данный момент секция.
Обработчик события: Функция handleMouseEnter срабатывает при наведении курсора на блок .app-item. Она находит заголовок внутри этого блока и сравнивает его текст с данными в массиве items. Той секции, заголовок которой совпал, устанавливается expand: true, а всем остальным — false.

Готовы реализовать подобное на вашем сайте?

Этот компонент — лишь маленький пример того, как современные технологии могут оживить ваш сайт и улучшить пользовательский опыт.

Наша веб-студия готова разработать для вас:

Уникальные интерактивные интерфейсы на Javascript и Vue.js.
Адаптивные и быстрые сайты, которые понравятся и вашим клиентам, и поисковым системам.
Любые аналогичные компоненты, идеально встроенные в дизайн и логику вашего проекта.

Свяжитесь с нами сегодня, и мы превратим ваши идеи в чистый и эффективный код!

Предыдущий Следующий