Streaming live at 10am (PST)

Slider before/after


#1

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 : https://cl.ly/400m0Y44053o

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

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


#3

Also - have a look at @markos84uk - cloneable site here:


#4

That’s awesome StuM! This is exactly what I was looking for!


#5

@palombokevin mark @StuM answer as solution to close this topic (And for future searches about this topic).


#6

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 : https://codyhouse.co/gem/css-jquery-image-comparison-slider

Can someone test this on Webflow? Btw, they have many well designed components on this website :slight_smile:


#9

I fix the example for you (This is not “copy-paste” example from the docs - only the example code work well).

Creating the structure

No way to teach you how to do this (Use webflow docs - this is very basic).

  • Div inside this div put 2 images & 2spans + span for the.cd-handle
  • add classes
  • instead of figure use div (No figure on webflow yet)
  • Add for the two spans custom attributes

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> 

Before body (copy-paste this)

<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>

Before head (copy-paste this)

<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>


#10

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: https://preview.webflow.com/preview/happy-desk?preview=b4fa46739f3130907b6e9761288f1354


#11

Also add live url. Ok


#12

Oh yeah, here it is : http://happy-desk.webflow.io/


#13

Where is the slider … about spans - use divs instead of spans (same result)


#14

The 2 images are with title “Multicanal” (before) “Omnichannel” (After)


#15

Your markup is wrong.

  • add type
    image
  • Dont add label class for the images (“label” = Not image)

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.

image


#16

Ok thanks for the help!