A module built for free lancing!
A Pen by Bryan Stoner on CodePen.
Created
May 12, 2016 07:21
-
-
Save anonymous/a31e8c0023f4439a43eb766ba71364f0 to your computer and use it in GitHub Desktop.
Before & After
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .before-and-after | |
| img.subject-before(src="https://www.primagames.com/media/images/guides/hero/pikmin-3-wallpaper-1.jpg") | |
| .subject-scraper | |
| img.subject-after(src="https://www.primagames.com/media/images/guides/hero/pikmin-3-wallpaper-1.jpg") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var subject = document.querySelector('.before-and-after'); | |
| var scraper = document.querySelector('.subject-scraper'); | |
| var after = document.querySelector('.subject-after'); | |
| var distance = (window.innerWidth - subject.clientWidth) / 2; | |
| window.onresize = recalculateDistance; | |
| var px = 0; | |
| var touches = []; | |
| subject.addEventListener('mousemove', dragScraper, false); | |
| subject.addEventListener('touchmove', dragScraper, false); | |
| function recalculateDistance() { | |
| distance = (window.innerWidth - subject.clientWidth) / 2; | |
| } | |
| function dragScraper(event) { | |
| px = event.clientX - distance; | |
| if(px == null) { | |
| touches = event.touches; | |
| px = touches[0].clientX - distance; | |
| } | |
| if(px < 0) { | |
| px = 0; | |
| } | |
| scraper.style.transform = 'translate(' + px + 'px, 0)'; | |
| after.style.transform = 'translate(-' + px + 'px, 0)'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ================ | |
| // Before and After | |
| // ============= */ | |
| .before-and-after { | |
| position: relative; | |
| overflow: hidden; | |
| width: 75%; | |
| cursor: ew-resize; | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| } | |
| } | |
| .subject-before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: -2; | |
| width: 100%; | |
| } | |
| .subject-scraper { | |
| overflow: hidden; | |
| transform: translate(50%, 0); | |
| &:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 20; | |
| height: 100%; | |
| width: .25em; | |
| content: ''; | |
| background: #fff; | |
| } | |
| } | |
| .subject-after { | |
| transform: translate(-50%, 0); | |
| filter: grayscale(100%); | |
| } | |
| /* ================ | |
| // Structure | |
| // ============= */ | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment