Author: | nosurprisethere |
---|---|
Views Total: | 3,214 views |
Official Page: | Go to website |
Last Update: | July 16, 2017 |
License: | MIT |
Preview:

Description:
A fancy image comparison slider that allows you to compare the differences among 3 layered images.
How to use it:
Add 3 images together with the SVG based comparison sliders to the webpage.
<div class="wrapper"> <div class="bottom"> <img src="1.jpg" draggable="false"/> </div> <div class="middle"> <img src="2.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="3.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>
The necessary CSS styles for the image comparison view.
/* 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; }
The core JavaScript to active the image comparison sliders.
// 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; // First we'll have to set up our event listeners // We want to watch for clicks on our scroller document.querySelector('.scroller-middle').addEventListener('mousedown',function(){ active = "middle"; // Add our scrolling class so the scroller has full opacity while active document.querySelector('.scroller-middle').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; document.querySelector('.scroller-middle').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; document.querySelector('.scroller-middle').classList.remove('scrolling'); }); // We'll have to do the same for our top scroller document.querySelector('.scroller-top').addEventListener('mousedown',function(){ active = "top"; document.querySelector('.scroller-top').classList.add('scrolling'); }); document.body.addEventListener('mouseup',function(){ active = false; document.querySelector('.scroller-top').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; document.querySelector('.scroller-top').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"; document.querySelector('.scroller-middle').style.left = transform-25+"px"; // if we're using scroller-middle, middle must always be to the right of top if (document.querySelector('.scroller-top').getBoundingClientRect().left>document.querySelector('.scroller-middle').getBoundingClientRect().left-5){ document.querySelector('.top').style.width = transform-5+"px"; document.querySelector('.scroller-top').style.left = transform-30+"px"; } } // if we're dragging the top slider if (active==="top"){ document.querySelector('.top').style.width = transform+"px"; document.querySelector('.scroller-top').style.left = transform-25+"px"; // if we're using scroller-top, top must always be to the left if (document.querySelector('.scroller-top').getBoundingClientRect().left>document.querySelector('.scroller-middle').getBoundingClientRect().left-5){ document.querySelector('.middle').style.width = transform+5+"px"; document.querySelector('.scroller-middle').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... document.querySelector('.scroller-middle').addEventListener('touchstart',function(){ active = "middle"; document.querySelector('.scroller-middle').classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; document.querySelector('.scroller-middle').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; document.querySelector('.scroller-middle').classList.remove('scrolling'); }); // then scroller top, our second scroller document.querySelector('.scroller-top').addEventListener('touchstart',function(){ active = "top"; document.querySelector('.scroller-top').classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; document.querySelector('.scroller-top').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; document.querySelector('.scroller-top').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); });