Before and After Slider ( drag )

Design help Custom code
5

Hello @andreiblanda!

You did not close 1st script tag, you lost “>”

Mainly you have to follow instructions from the article.

Prepare 2 pictures same size, but 1 outlined (no colors) and another colored.

Create HTML structure just like on their code:

<div id="inked-painted">
	<img src="inked-panel.png" id="inked" alt>
	<div id="colored"></div>
</div>

  1. create div (drag and drop it from the panel), give it any class, but it should have ID just like in the code: inked-painted

  2. inside that div put image (no colors), give any class but ID should be just like in the code: inked

  3. inside the div add one more div, any class but ID from the code: colored.

Next step - styling elements just like in CSS code from the article:

div#inked-painted {
	position: relative;
	font-size: 0;
}
div#inked-painted img {
	width: 100%;
	height: auto;
}
div#colored {
	background-image: url(colored-panel.jpg);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background-size: cover;
}
  1. First div- position: relative and font size = 0px, and I gave it height and width in px, because my image was too big.
  2. Image - width: 100% and height: auto
  3. Second div - position: absolute, height: 100%, width: 50%, aligning: top=0, left=0, add background image to this dive - colored image, background-size: cover.

With new feature “custom cursor” you can pick any cursor you want for first div (it will appear on the screen when user will hover div):

Now just few lines of CSS to the custom code area, to the <header> :

<style>
     div#inked-painted {
	position: relative;
	font-size: 0;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
   }
</style>

And ALL javaScript code to the area before </body>

<script>
  var inkbox = document.getElementById("inked-painted"),
  colorbox = document.getElementById("colored"),
  fillerImage = document.getElementById("inked");
  inkbox.addEventListener( "mousemove", trackLocation, false);
  function trackLocation(e) {
	var rect = fillerImage.getBoundingClientRect();
	var position = ((e.pageX - rect.left) / fillerImage.offsetWidth)*100;
	if (position <= 100) {
		colorbox.style.width = position+"%"; 
	}
  }

  inkbox.addEventListener( "touchstart", trackLocation, false);
  inkbox.addEventListener( "touchmove", trackLocation, false);

</script>

DONE

Good luck :wink:

Anna

3 Likes