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
- Set up the
*
为box-sizing: border-box
- Set up the
body
To 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
- CSS global variables are declared in
:root
In the document root element, the syntax is--*
- The CSS global variable syntax is
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;
}
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
- through
document.querySelector('.left')
To obtainleft
node - through
document.querySelector('.right')
To obtainright
node - through
document.querySelector('.container')
To obtaincontainer
node - through
addEventListener
为container
Node to add aMouse move event
And aMouse over event
, the two incidents are respectively responsible forcontainer
A node is added and removedhover-left
The name of the class - through
addEventListener
为container
Node to add aMouse move event
And aMouse over event
, the two incidents are respectively responsible forcontainer
A node is added and removedhover-right
The 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.