惊艳的分页滑动效果

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

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

背景

分页滑动效果：是指当鼠标在页面左边时，左边的页面扩大，右边收缩；当鼠标在页面右边时，右边的页面扩大，左边收缩的一个动画效果，这种效果一般在 手机购物网站、游戏机购物网站、服装购物网站有广泛的使用，今天我们就一起来学习一个如何使用代码实现这一效果。

最终效果

一、添加 HTML 文件

<div class="container">
    <div class="split left">
        <h1>iphone 8Plus</h1>
        <a href="#" class="btn">Buy Now</a>
    </div>
    <div class="split right">
        <h1>ipad 2018</h1>
        <a href="#" class="btn">Buy Now</a>
    </div>
</div>

二、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 body 来使整个项目居中

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

CSS 全局变量

1. CSS 全局变量声明在 :root 文档根元素中，语法为 --*
2. CSS 全局变量使用语法为 var(--*)

:root {
    --left-bg-color: rgba(87, 84, 236, 0.3);
    --right-bg-color: rgba(43, 43, 43, 0.8);
    --left-btn-hover-color: rgba(87, 84, 236, 1);
    --right-btn-hover-color: rgba(28, 122, 28, 1);
    --hover-width: 75%;
    --other-width: 25%;
    --speed: 1000ms;
}

主要的 CSS 代码

h1 {
    font-size: 4rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    text-decoration: none;
    color: #fff;
    border: #fff solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5rem;
}

.split.left .btn:hover {
    background-color: var(--left-btn-hover-color);
    border-color: var(--left-btn-hover-color);
}

.split.right .btn:hover {
    background-color: var(--right-btn-hover-color);
    border-color: var(--right-btn-hover-color);
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #333;
}

.split {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.split.left {
    left: 0;
    background: url('https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.split.left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--left-bg-color);
}

.split.right {
    right: 0;
    background: url('https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.split.right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--right-bg-color);
}

.split.right,
.split.left,
.split.right::before,
.split.left::before {
    transition: all var(--speed) ease-in-out;
}

.hover-left .left {
    width: var(--hover-width);
}

.hover-left .right {
    width: var(--other-width);
}

.hover-right .right {
    width: var(--hover-width);
}

.hover-right .left {
    width: var(--other-width);
}

@media (max-width: 800px) {
    h1 {
        font-size: 2rem;
        top: 30%;
    }

    .btn {
        padding: 1.2rem;
        width: 12rem;
    }
}

三、添加 JS 文件

1. 通过 document.querySelector('.left') ，获得 left 节点
2. 通过 document.querySelector('.right') ，获得 right 节点
3. 通过 document.querySelector('.container') ，获得 container 节点
4. 通过 addEventListener 为 container 节点添加一个 鼠标移入事件 和一个 鼠标移出事件 ，这两个事件分别负责为 container 节点添加和移除一个 hover-left 的类名
5. 通过 addEventListener 为 container 节点添加一个 鼠标移入事件 和一个 鼠标移出事件 ，这两个事件分别负责为 container 节点添加和移除一个 hover-right 的类名

const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

❤️ 感谢大家

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

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