Визуализация на разделенном экране с помощью JavaScript

внешний интерфейс JavaScript CSS
Визуализация на разделенном экране с помощью JavaScript

Предыдущая статья10 уникальных визуальных эффектов фона CSSЕсть упоминание о визуальном эффекте разделенного экрана, Сегодня в этой статье мы поговорим об использовании JavaScript для реализации визуального эффекта разделенного экрана. Теперь этот визуальный эффект разделения экрана широко используется на веб-сайтах, таких какCorsair website.

HTML-структура

Сначала получите правильный базовый стиль структуры, чтобы добиться этого эффекта, вам нужно использоватьdivпостроить дваpanel. первый, кто далbottomкласс, а другойtopДобрый. Затем используйте класс с именемsplitviewобернуть.

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

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

        </div>
    </div>    
</div>

Область содержимогоcontentВы можете разместить что угодно, картинки, текст и т.д.

затем вsplitviewвне структуры добавьте еще одинdivимя классаhandle, Используется для усиления визуального эффекта представления с разделенным экраном.

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

стиль

Сначала напишите дваpanelстиль, для достижения этого эффекта требуется абсолютное позиционирование, поэтому убедитесь, что имя классаtopПанель находится поверх другой панели. Другой момент заключается в том, что для того, чтобы адаптироваться к размеру экрана устройства, здесь используется единица измерения vw.

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

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

Чтобы различить две панели, назначьте разные цвета фона для двух панелей соответственно. убедисьtopЗначение z-index другой панели больше, чем у другой панели, чтобы гарантировать, чтоtopЭта панель находится поверх другой.

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

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

Чтобы добиться вышеупомянутого эффекта разделения экрана, вам нужно установить ширину панели равной половине всей ширины, чтобы получить эффект, показанный на следующем рисунке:

JavaScript

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

document.addEventListener('DOMContentLoaded', function() {

});

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

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

нестандартная ручка

Ручка используется для улучшения визуальных характеристик разделенного экрана.

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

Чтобы улучшить визуальную производительность разделенного экрана, маркер здесь представляет собой желтую линию шириной 5 пикселей с той же высотой, что и область содержимого.z-indexравно 3, чтобы убедиться, что он находится над обеими панелями.

подвижная ручка

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

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

Точно так же для достижения эффекта разделения экрана, который следует за движением мыши, также необходимо динамически изменять значение панели и изменять ширину панели в реальном времени в соответствии со значением координат движения мыши. то есть ширина панели равна значению движения мыши.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, чтобы сделать разделенный экран скошенным визуальным эффектом. Подробный код можно посмотреть здесь.демонстрационный адрес.

Эта статья в основном изHow to Create a Split-Screen Slider With JavaScriptВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!

Категории