<div id="container">
<div class="total">
<div class="previous"></div>
<div class="current">
<div class="yellow"></div>
<div class="magenta"></div>
<div class="cyan"></div>
</div>
<div class="next"></div>
</div>
<div>
body {
height: 100vh;
width: 100vw;
display:flex;
background:#FBFBFB;
overflow:hidden;
}
#container {
margin:auto;
.total {
width: 600px;
height: 48px;
padding: 8px 4px;
position: relative;
cursor: pointer;
>div{
height:100%;
border-radius: 16px;
pointer-events: none;
position:absolute;
}
.previous{
top:30px;
left:0px;
height: 4px;
background: #040404;
width: calc(((100% / 6)*3) - 32px);
}
.current{
// background:#F44336;
width: 48px;
top:0px;
// left: calc(((100% / 6)*3) - 12px);
position: relative;
>div{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border-radius: 100%;
mix-blend-mode: multiply;
will-change: opacity;
&.yellow {
background: #ffff00;
}
&.magenta {
background: #ff00ff;
}
&.cyan {
background: #00ffff;
}
}
}
.next{
top:30px;
right:0px;
height: 4px;
background: #040404;
width: calc(((100% / 6)*3) - 32px);
}
}
}
View Compiled
API('xmerjZ')
const steps = 6;
let current = {
value: 3
};
let total = document.querySelector(".total");
const currentDiv = document.querySelector(".current");
const yellow = currentDiv.querySelector(".yellow")
const magenta = currentDiv.querySelector(".magenta")
const cyan = currentDiv.querySelector(".cyan")
const previousDiv = document.querySelector(".previous");
const nextDiv = document.querySelector(".next");
changeStep(2);
setTimeout(()=>{
changeStep(5);
setTimeout(()=>{
changeStep(1);
},1000)
},1500)
total.addEventListener("click", function(e) {
let x = e.offsetX / (total.offsetWidth / (steps + 1));
changeStep(x);
// TweenLite.to(currentDiv.style, 0.25, {
// ease: Power3.easeInOut,
// transform: "scale(1.5)",
// onComplete: () => {
// TweenLite.to(currentDiv.style, 0.75, {
// ease: Elastic.easeOut.config(1, 0.3),
// transform: "scale(1)"
// });
// }
// });
});
let isDown = false
total.addEventListener("mousedown", function(e) {
isDown = true
// let x = e.offsetX / (total.offsetWidth / (steps + 1));
// changeStep(x);
// TweenLite.to(currentDiv.style, 0.25, {
// ease: Elastic.easeOut.config(1, 0.5),
// transform: "scale(1.5)"
// });
});
total.addEventListener("mousemove", function(e) {
if(isDown) {
let x = e.offsetX / (total.offsetWidth / (steps + 1));
changeStep(x);
}
});
total.addEventListener("mouseup", function(e) {
isDown = false
// TweenLite.to(currentDiv.style, 0.5, {
// ease: Power3.easeInOut,
// transform: "scale(1)"
// });
});
function changeStep(x) {
x = x * (total.offsetWidth / (steps + 1));
TweenLite.to(yellow.style, 0.50, {
ease: Elastic.easeOut.config(1, 0.5),
transform: `translateX(${x - 16}px)`
});
TweenLite.to(magenta.style, 0.75, {
ease: Elastic.easeOut.config(1, 0.5),
transform: `translateX(${x - 16}px)`
});
TweenLite.to(cyan.style, 0.90, {
ease: Elastic.easeOut.config(1, 0.5),
transform: `translateX(${x - 16}px)`
});
// currentDiv.style.left = x + 16 + 'px'
if ((x-32) < 0.1) {
TweenLite.to(previousDiv.style, 0.12, {
ease: Power4.easeOut,
width: Math.max(x - 32,0) + "px"
});
} else {
TweenLite.to(previousDiv.style, 0.75, {
ease: Elastic.easeOut.config(1, 0.5),
width: Math.max(x - 32,0) + "px"
});
}
// previousDiv.style.width = x + 'px'
if (total.offsetWidth - x - 24 < 0) {
TweenLite.to(nextDiv.style, 0.12, {
ease: Power4.easeOut,
width: Math.max(total.offsetWidth - x - 52, 0) + "px"
});
} else {
TweenLite.to(nextDiv.style, 0.75, {
ease: Elastic.easeOut.config(1, 0.5),
width: Math.max(total.offsetWidth - x - 52, 0) + "px"
});
}
// nextDiv.style.width = Math.max((total.offsetWidth - x) - 58,0) + 'px'
}
This Pen doesn't use any external CSS resources.