Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Before After 3 Layer Image Slider (Vanilla)

Before After 3 Layer Image Slider (Vanilla)

Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it's useful :)

A Pen by Huw on CodePen.

License.

<div id="page">
<div class="wrapper">
<div class="bottom">
<img src="http://i67.tinypic.com/2eo86ew.jpg" draggable="false"/>
</div>
<div class="middle">
<img src="http://i64.tinypic.com/15i68sz.jpg" draggable="false"/>
</div>
<div class="scroller scroller-middle">
<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFCCBC"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFCCBC"/></svg>
</div>
<div class="top">
<img src="http://i64.tinypic.com/2ppni55.jpg" draggable="false"/>
</div>
<div class="scroller scroller-top">
<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFAB91"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFAB91"/></svg>
</div>
</div>
</div>
// I hope this over-commenting helps. Let's do this!
// Let's use the 'active' variable to let us know when we're using it
let active = false;
// and define our dom elements to make it easier to read
let scrollerMiddle = document.querySelector('.scroller-middle');
let scrollerTop = document.querySelector('.scroller-top');
// First we'll have to set up our event listeners
// We want to watch for clicks on our scroller
scrollerMiddle.addEventListener('mousedown',function(){
active = "middle";
// Add our scrolling class so the scroller has full opacity while active
scrollerMiddle.classList.add('scrolling');
});
// We also want to watch the body for changes to the state,
// like moving around and releasing the click
// so let's set up our event listeners
document.body.addEventListener('mouseup',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
// We'll have to do the same for our top scroller
scrollerTop.addEventListener('mousedown',function(){
active = "top";
scrollerTop.classList.add('scrolling');
});
document.body.addEventListener('mouseup',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
// Let's figure out where their mouse is at
document.body.addEventListener('mousemove',function(e){
if (!active) return;
// Their mouse is here...
let x = e.pageX;
// but we want it relative to our wrapper
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
// Okay let's change our state
scrollIt(x);
});
// Let's use this function
function scrollIt(x){
// Calculate our transform
let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
// we show all our bottom image but how much of our middle and top,
// that'll depend on what we're dragging
// if we're dragging the middle slider
if (active==="middle"){
document.querySelector('.middle').style.width = transform+"px";
scrollerMiddle.style.left = transform-25+"px";
// if we're using scroller-middle, middle must always be to the right of top
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
document.querySelector('.top').style.width = transform-5+"px";
scrollerTop.style.left = transform-30+"px";
}
}
// if we're dragging the top slider
if (active==="top"){
document.querySelector('.top').style.width = transform+"px";
scrollerTop.style.left = transform-25+"px";
// if we're using scroller-top, top must always be to the left
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
document.querySelector('.middle').style.width = transform+5+"px";
scrollerMiddle.style.left = transform-20+"px";
}
}
}
// Let's set our opening state based off the width,
// we want to show a bit of both images so the user can see what's going on
active = "middle";
scrollIt(460);
active = "top";
scrollIt(230);
active = false;
// And finally let's repeat the process for touch events
// first our middle scroller...
scrollerMiddle.addEventListener('touchstart',function(){
active = "middle";
scrollerMiddle.classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
// then scroller top, our second scroller
scrollerTop.addEventListener('touchstart',function(){
active = "top";
scrollerTop.classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.querySelector('.wrapper').addEventListener('touchmove',function(e){
if (!active) return;
e.preventDefault();
let x = e.touches[0].pageX;
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
scrollIt(x);
});
/* You can remove this page div in your website */
#page{
width:100%;
height:100%;
position:absolute;
background:#eee;
}
/* Our normalize css */
*{
margin:0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Our wrapper */
.wrapper{
width: 690px;
height: 600px;
max-height:100vh;
position: absolute;
left:50%;
top:50%;
transform:translate3d(-50%,-50%,0);
overflow:hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
/* Our image information */
.bottom,
.middle,
.top {
width:100%;
height:100%;
background-repeat:no-repeat;
background-color: white;
background-size: cover;
background-position: center;
position: absolute;
top:0;
left:0;
pointer-events:none;
overflow: hidden;
&>img{
height:100%;
}
}
.top{
width:125px;
}
.scroller{
width: 50px;
height:50px;
position: absolute;
left:100px;
top:50%;
transform:translateY(-50%);
border-radius:50%;
background-color: #fff;
opacity:0.9;
transition: opacity 0.12s ease-in-out;
pointer-events:auto;
cursor: pointer;
box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}
.scroller-middle{
margin-top:25px;
}
.scroller-top{
margin-top:-25px;
}
.scroller:hover{
opacity:1;
}
.scrolling{
pointer-events:none;
opacity:1;
// z-index: 1;
}
.scroller__thumb{
width:100%;
height:100%;
border-radius:50%;
padding: 7px;
}
.scroller:before,
.scroller:after{
content:" ";
display: block;
width: 7px;
height: 9999px;
position: absolute;
left: 50%;
margin-left: -3.5px;
z-index: 30;
transition:0.1s;
box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}
.scroller:before{
top:49px;
}
.scroller:after{
bottom:49px;
}
/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller-middle>.scroller__thumb{
border: 5px solid #FFCCBC;
}
.scroller-middle:before,
.scroller-middle:after{
background: #FFCCBC;
}
.scroller-top>.scroller__thumb{
border: 5px solid #FFAB91;
}
.scroller-top:before,
.scroller-top:after{
background: #FFAB91;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.