This image represent the slider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Animations</title>
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app" data-page="0">
<div class="sliders">
<div class="slide-left">
«
</div>
<div class="slide-right">
»
</div>
</div>
<div class="row">
<div class="image">
<div class="box">
<img src="assets/images/1.webp" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/2.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/3.jpeg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/4.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/7.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/26.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/27.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/28.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/29.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/30.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/1.webp" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/2.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/3.jpeg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/4.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/7.jpg" >
</div>
</div>
</div>
<div class="row">
<div class="image">
<div class="box">
<img src="assets/images/5.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/6.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/10.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/8.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/9.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/11.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/12.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/13.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/14.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/5.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/26.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/27.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/28.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/29.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/30.jpg" >
</div>
</div>
</div>
<div class="row">
<div class="image">
<div class="box">
<img src="assets/images/22.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/23.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/24.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/25.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/9.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/11.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/12.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/1.webp" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/2.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/3.jpeg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/4.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/7.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/26.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/27.jpg" >
</div>
</div>
</div>
<div class="row">
<div class="image">
<div class="box">
<img src="assets/images/15.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/16.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/17.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/18.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/19.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/20.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/21.png" >
</div>
</div>
</div>
<div class="row">
<div class="image">
<div class="box">
<img src="assets/images/1.webp" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/2.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/3.jpeg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/4.png" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/7.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/26.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/27.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/28.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/29.jpg" >
</div>
</div>
<div class="image">
<div class="box">
<img src="assets/images/30.jpg" >
</div>
</div>
</div>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>
from here css begins. save it as style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(./../textures/black-paper.png),#000114;
}
#app {
display: flex;
flex-flow: column nowrap;
perspective: 350px;
}
.row {
height: 15rem;
display: flex;
flex-flow: row nowrap;
flex: 0;
transition: all 1s cubic-bezier(0.85, 0, 0.15, 1);
transform: rotate3d(-1,.5,0,-10deg) translateX(-0);
}
.row .image {
height: 100%;
box-shadow: 0 -5px 30px rgba(0,0,0,.3);
cursor: pointer;
position: relative;
margin-right: 1rem;
}
.row .image:hover .box:after {
opacity:1;
}
.row .image .box:after {
content: '';
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.8));
}
.row .image:hover img {
transform: scale(1.1);
}
.row .image .box {
overflow: hidden;
height: 100%;
}
.row .image .box img {
height:15rem;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.row:nth-child(1) {
z-index: 5;
}
.row:nth-child(2) {
z-index: 4;
}
.row:nth-child(3) {
z-index: 3;
margin-bottom: 3rem;
}
.row:nth-child(3) {
z-index: 2;
margin-bottom: 4rem;
}
.row:nth-child(4) {
margin-bottom: 5rem;
z-index: 1;
}
.slide-left, .slide-right {
position: fixed;
cursor: pointer;
height: 100vh;
width: 100px;
display: flex;
align-items: center;
color: #fff;
font-size: 5rem;
transition: all 1s;
z-index: 1000;
user-select: none;
top: 0;
}
.sliders .slide-left {
background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.0));
padding: 2rem;
left: 0;
}
.sliders .slide-left:hover {
background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.3));
}
.sliders .slide-right {
background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.0));
padding: 2rem;
right: 0;
}
.sliders .slide-right:hover {
background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.3));
}
Create a css file with name base.css
This is a js file....save it as main.js
let app = document.getElementById('app');
let scrollAmount = document.body.clientWidth*1/3;
let rows = document.querySelectorAll('.row');
document.querySelector('.slide-right').addEventListener('click', (e) => {
let currentPage = parseInt(app.getAttribute('data-page'));
let targetPixel = (currentPage+1) * scrollAmount;
for(let i = 0; i < rows.length; i++) {
rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
}
app.setAttribute('data-page', currentPage+1);
})
document.querySelector('.slide-left').addEventListener('click', (e) => {
let currentPage = parseInt(app.getAttribute('data-page'));
let targetPixel = (currentPage-1) * scrollAmount;
if(currentPage == 0) return;
for(let i = 0; i < rows.length; i++) {
rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
}
app.setAttribute('data-page', currentPage-1);
})
document.body.addEventListener('mousemove', (e) => {
let mouseLocation = {
x: e.clientX,
y: e.clientY,
}
})
All the resources used in this slider.
make a folder of image.
make a folder naming textures
