Amazing pagination slide effect

This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

Paging slide effect: when the mouse is on the left side of the page, the left side of the page enlarged, the right side of the contraction; When the mouse is on the right side of the page, the right side of the page expands and the left side of the page shrinks. This effect is widely used in mobile shopping websites, game shopping websites, clothing shopping websites. Today we will learn how to use code to achieve this effect.

The final result

1. Add HTML files

<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>
Copy the code

Add CSS files

Initialize the page first

1. Set up the* 为 box-sizing: border-box
2. Set up thebodyTo center the project

* {
    box-sizing: border-box;
}

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

CSS global variables

1. CSS global variables are declared in:rootIn the document root element, the syntax is--*
2. The CSS global variable syntax isvar(--*)

: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;
}
Copy the code

The main CSS code

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.2 rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5 rem;
}

.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.2 rem;
        width: 12rem; }}Copy the code

Add JS file

1. throughdocument.querySelector('.left')To obtainleftnode
2. throughdocument.querySelector('.right')To obtainrightnode
3. throughdocument.querySelector('.container')To obtaincontainernode
4. throughaddEventListener 为 containerNode to add aMouse move eventAnd aMouse over event, the two incidents are respectively responsible forcontainerA node is added and removedhover-leftThe name of the class
5. throughaddEventListener 为 containerNode to add aMouse move eventAnd aMouse over event, the two incidents are respectively responsible forcontainerA node is added and removedhover-rightThe name of the class

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'))
Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.