惊艳的双垂直滑块设计

YiHangMa
966 阅读3分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

双垂直滑块：是指把页面分成两半，一般放置 图片 ，另一半放置 图片相关说明，比如 图片名，图片分类，图片说明等等细节，图片与其相对应的说明会自动轮播，文字向下移动，图片向上移动，同时左边背景色与右边图片主题色相同，应营造出一种惊艳的视觉效果。它的主要作用是展示图片和文字，与 轮播图 相同，基本适用于一切和轮播图相关的使用场景。

双垂直滑块优点

  1. 比起普通轮播图，效果更惊艳，让人眼前一亮
  2. 兼容性强，兼容市面上绝大部分的浏览器
  3. 可以放置大量文字，又不遮挡图片

双垂直滑块缺点

  1. 未获得业内广泛认可，可能不被甲方采纳
  2. 因为垂直上下轮播的设计，适用场景相比普通轮播图较少
  3. 由于左边文字背景色要与图片一致，所以可能限制了图片只能选择大面积相同的主体色

最终效果

双滑块.gif

一、添加 HTML 文件

<div class="slider-container">
    <div class="left-slide">
        <div style="background-color: #FD3555">
            <h1>Nature flower</h1>
            <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
            <h1>Bluuue Sky</h1>
            <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
            <h1>Lonely castle</h1>
            <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
            <h1>Flying eagle</h1>
            <p>in the sunset</p>
        </div>
    </div>
    <div class="right-slide">
        <div
            style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')">
        </div>
        <div
            style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')">
        </div>
        <div
            style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')">
        </div>
        <div
            style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')">
        </div>
    </div>
    <div class="action-buttons">
        <button class="down-button">
            <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
            <i class="fas fa-arrow-up"></i>
        </button>
    </div>
</div>

二、添加 CSS 文件

  1. 设置 * 为 box-sizing: border-box
  2. 设置 body 来使整个项目居中
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}

主要的 CSS 代码

.slider-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.left-slide {
    height: 100%;
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
}

.left-slide>div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.left-slide h1 {
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: -30px;
}

.right-slide {
    height: 100%;
    position: absolute;
    top: 0;
    left: 35%;
    width: 65%;
    transition: transform 0.5s ease-in-out;
}

.right-slide>div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

button {
    background-color: #fff;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 15px;
}

button:hover {
    color: #222;
}

button:focus {
    outline: none;
}

.slider-container .action-buttons button {
    position: absolute;
    left: 35%;
    top: 50%;
    z-index: 100;
}

.slider-container .action-buttons .down-button {
    transform: translateX(-100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
    transform: translateY(-100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

三、添加 JS 文件

主要逻辑

const sliderContainer = document.querySelector('.slider-container')
const slideRight = document.querySelector('.right-slide')
const slideLeft = document.querySelector('.left-slide')
const upButton = document.querySelector('.up-button')
const downButton = document.querySelector('.down-button')
const slidesLength = slideRight.querySelectorAll('div').length

let activeSlideIndex = 0

slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {
    const sliderHeight = sliderContainer.clientHeight
    if (direction === 'up') {
        activeSlideIndex++
        if (activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0
        }
    } else if (direction === 'down') {
        activeSlideIndex--
        if (activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }

    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。

avatar
文章
阅读
粉丝