All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mousewheel Based Slider</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
for (let i = 1; i <= 50; i++) {
const div = document.createElement('div');
div.className = 'item';
div.textContent = i;
box.appendChild(div);
}
function moveNext() {
let items = document.querySelectorAll('.item');
box.appendChild(items[0]);
}
function movePrev() {
let items = document.querySelectorAll('.item');
box.prepend(items[items.length - 1]);
}
window.addEventListener('wheel', function(event) {
if (event.deltaY > 0) {
moveNext();
} else {
movePrev();
}
});
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
transform-style: preserve-3d;
}
.box
{
position: relative;
display: flex;
transform-style: preserve-3d;
perspective: 500px;
}
.box .item
{
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 100px);
width: 200px;
height: 300px;
background: #cb4af7;
transition: 0.25s;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
transform-style: preserve-3d;
user-select: none;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 5em;
font-weight: 800;
color: #fff;
font-family: consolas;
}
.box .item:nth-child(1)
{
transform: translate3d(-250px,0,0) scale(0.8);
z-index: 1;
opacity: 1;
background: #ff6464;
}
.box .item:nth-child(2)
{
transform: translate3d(-250px,0,0) scale(0.8);
z-index: 2;
opacity: 1;
background: #ff6464;
}
.box .item:nth-child(3)
{
transform: translate3d(-150px,0,0) scale(0.9);
z-index: 3;
opacity: 1;
background: #64c0ff;
font-size: 6em;
}
.box .item:nth-child(4)
{
transform: translate3d(0px,0,0) scale(1);
z-index: 4;
opacity: 1;
background: #fff;
color: #333;
font-size: 8em;
}
.box .item:nth-child(5)
{
transform: translate3d(150px,0,0) scale(0.9);
z-index: 3;
opacity: 1;
background: #48e365;
font-size: 6em;
}
.box .item:nth-child(6)
{
transform: translate3d(250px,0,0) scale(0.8);
z-index: 2;
opacity: 1;
background: #cb4af7;
}
.box .item:nth-child(7)
{
transform: translate3d(250px,0,0) scale(0.8);
z-index: 1;
opacity: 1;
}
