Hi there,
I don’t know how to implement this into Webflow. Maybe it is with custom code or I we can make it directly in Webflow. I will appreciate you help!
This is the effect : Screen Recording 2018-08-02...
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
By custom code - search on google for “before-after”
http://egegorgulu.com/works/beforeafterjs/
“how to” you should read the plugin docs - add the CSS and JS (cdns before body/head) - add the correct markup and classes on webflow site-tree - and initialize the plugin
Also - have a look at @magicmark - cloneable site here:
That’s awesome StuM! This is exactly what I was looking for!
@palombokevin mark @StuM answer as solution to close this topic (And for future searches about this topic).
Thanks Siton_Systems. I Would like to take a step further because the solution works but I would like to have it more “light”.
I found this : CSS and jQuery Image Comparison Slider | CodyHouse
Can someone test this on Webflow? Btw, they have many well designed components on this website 
I fix the example for you (This is not “copy-paste” example from the docs - only the example code work well).
No way to teach you how to do this (Use webflow docs - this is very basic).
.cd-handle
Last - – Your code vs the structure (Inspect elements in preview mode and compare)
<div class="cd-image-container">
<img src="https://codyhouse.co/demo/image-comparison-slider/img/img-original.jpg" alt="Original
Image">
<span class="cd-image-label" data-type="original">Original</span>
<div class="cd-resize-img">
<span class="cd-image-label" data-type="modified">Modified</span>
</div>
<span class="cd-handle"></span>
</div>
<script>
jQuery(document).ready(function($){var dragging=false,scrolling=false,resizing=false;var imageComparisonContainers=$('.cd-image-container');checkPosition(imageComparisonContainers);$(window).on('scroll',function(){if(!scrolling){scrolling=true;(!window.requestAnimationFrame)?setTimeout(function(){checkPosition(imageComparisonContainers);},100):requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});}});imageComparisonContainers.each(function(){var actual=$(this);drags(actual.find('.cd-handle'),actual.find('.cd-resize-img'),actual,actual.find('.cd-image-label[data-type="original"]'),actual.find('.cd-image-label[data-type="modified"]'));});$(window).on('resize',function(){if(!resizing){resizing=true;(!window.requestAnimationFrame)?setTimeout(function(){checkLabel(imageComparisonContainers);},100):requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});}});function checkPosition(container){container.each(function(){var actualContainer=$(this);if($(window).scrollTop()+$(window).height()*0.5>actualContainer.offset().top){actualContainer.addClass('is-visible');}});scrolling=false;}
function checkLabel(container){container.each(function(){var actual=$(this);updateLabel(actual.find('.cd-image-label[data-type="modified"]'),actual.find('.cd-resize-img'),'left');updateLabel(actual.find('.cd-image-label[data-type="original"]'),actual.find('.cd-resize-img'),'right');});resizing=false;}
function drags(dragElement,resizeElement,container,labelContainer,labelResizeElement){dragElement.on("mousedown vmousedown",function(e){dragElement.addClass('draggable');resizeElement.addClass('resizable');var dragWidth=dragElement.outerWidth(),xPosition=dragElement.offset().left+dragWidth-e.pageX,containerOffset=container.offset().left,containerWidth=container.outerWidth(),minLeft=containerOffset+10,maxLeft=containerOffset+containerWidth-dragWidth-10;dragElement.parents().on("mousemove vmousemove",function(e){if(!dragging){dragging=true;(!window.requestAnimationFrame)?setTimeout(function(){animateDraggedHandle(e,xPosition,dragWidth,minLeft,maxLeft,containerOffset,containerWidth,resizeElement,labelContainer,labelResizeElement);},100):requestAnimationFrame(function(){animateDraggedHandle(e,xPosition,dragWidth,minLeft,maxLeft,containerOffset,containerWidth,resizeElement,labelContainer,labelResizeElement);});}}).on("mouseup vmouseup",function(e){dragElement.removeClass('draggable');resizeElement.removeClass('resizable');});e.preventDefault();}).on("mouseup vmouseup",function(e){dragElement.removeClass('draggable');resizeElement.removeClass('resizable');});}
function animateDraggedHandle(e,xPosition,dragWidth,minLeft,maxLeft,containerOffset,containerWidth,resizeElement,labelContainer,labelResizeElement){var leftValue=e.pageX+xPosition-dragWidth;if(leftValue<minLeft){leftValue=minLeft;}else if(leftValue>maxLeft){leftValue=maxLeft;}
var widthValue=(leftValue+dragWidth/2-containerOffset)*100/containerWidth+'%';$('.draggable').css('left',widthValue).on("mouseup vmouseup",function(){$(this).removeClass('draggable');resizeElement.removeClass('resizable');});$('.resizable').css('width',widthValue);updateLabel(labelResizeElement,resizeElement,'left');updateLabel(labelContainer,resizeElement,'right');dragging=false;}
function updateLabel(label,resizeElement,position){if(position=='left'){(label.offset().left+label.outerWidth()<resizeElement.offset().left+resizeElement.outerWidth())?label.removeClass('is-hidden'):label.addClass('is-hidden');}else{(label.offset().left>resizeElement.offset().left+resizeElement.outerWidth())?label.removeClass('is-hidden'):label.addClass('is-hidden');}}});
</script>
<style>
.cd-image-container {
position: relative;
width: 90%;
max-width: 768px;
margin: 0em auto;
}
.cd-image-container img {
display: block;
}
.cd-image-label {
position: absolute;
bottom: 0;
right: 0;
color: #ffffff;
padding: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
-moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
visibility: hidden;
}
.is-visible .cd-image-label {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.cd-resize-img {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-resize-img img {
position: absolute;
left: 0;
top: 0;
display: block;
height: 100%;
width: auto;
max-width: none;
}
.cd-resize-img .cd-image-label {
right: auto;
left: 0;
}
.is-visible .cd-resize-img {
width: 50%;
/* bounce in animation of the modified image */
-webkit-animation: cd-bounce-in 0.7s;
-moz-animation: cd-bounce-in 0.7s;
animation: cd-bounce-in 0.7s;
}
@-webkit-keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@-moz-keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
.cd-handle {
position: absolute;
height: 44px;
width: 44px;
/* center the element */
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border-radius: 50%;
cursor: move;
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
-moz-transform: translate3d(0, 0, 0) scale(0);
-ms-transform: translate3d(0, 0, 0) scale(0);
-o-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0);
z-index: 7777;
}
.cd-handle.draggable {
/* change background color when element is active */
background-color: #445b7c;
}
.is-visible .cd-handle {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
-moz-transform: translate3d(0, 0, 0) scale(1);
-ms-transform: translate3d(0, 0, 0) scale(1);
-o-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
-moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
</style>
Thank you Siton_Systems!
I applied what I was able to do and it does not work for me. I think this is because I don’t know how to add or specify “span”.
I hope I’m really close to make this happen…
Please find my shared link: Webflow - Happywebacademy
Also add live url. Ok
Oh yeah, here it is : http://happy-desk.webflow.io/
Where is the slider … about spans - use divs instead of spans (same result)
The 2 images are with title “Multicanal” (before) “Omnichannel” (After)
Your markup is wrong.
Sorry, this is not and issue for all users. No way to solve this (You should know to create this structure + add the correct atributes) -or- hire freelancer.
Ok thanks for the help!