Sliding Image Divider

Introduction

Today I will show an amazing effect showcased in WebFlow’s beautiful website. It is an image divider that shows two different images and when you hover over it the partition follows your mouse movements. so if you move it to the left, the right image will be revealed more and vice versa for the left image. This is done using jQuery’s on mousemove event along with css transitions to make it smoother.

HTML

The html is really simple as everything else is handled by the CSS and jQuery.

<div class="divider-wrapper">
  <div class="code-wrapper">
    <div class="design-wrapper">
      <div class="design-image"></div>
    </div>
  </div>

  <div class="divider-bar"></div>
</div>

CSS

The left image is stored in the background of code-wrapper, and the right image is stored in the background of design-image. The design image is nested in a way that makes the image slider effect possible. The divider bar is styled completely using CSS box-shadows and gradients.

/* Divider Styles */

.divider-wrapper { 
  width: 1000px;
  height: 540px;
  margin: 0 auto;
  position: relative;
}
  .divider-wrapper:hover { cursor: none; }

  .divider-bar {
    position: absolute;
    width: 4px;
    left: 50%;
    top: -10px;
    bottom: -15px;
    background-image: -webkit-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
    background-image: -moz-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
    background-image: -o-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
    background-image: linear-gradient(to bottom,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%); 
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); 
    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
  }

  .code-wrapper {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 2px solid #222;

    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("code.jpg") no-repeat;
  }

  .design-wrapper, .design-image {
    border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
  }
  .design-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
    .design-image {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;

      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);

      background: url("design.jpg") no-repeat;
    }

jQuery

This is where the magic happens. The mousemove event fires constantly while you move the mouse while hovering over a specified element. This will calculate the mouse position using the event’s pageX property that returns the offset of the mouse from the page. Then its just simply applying the css to make the partition divide at the mouse’s position.

$('.code-wrapper').on( "mousemove", function(e) {
  var offsets = $(this).offset();
  var fullWidth = $(this).width();
  var mouseX = e.pageX - offsets.left;

  if (mouseX < 0) { mouseX = 0; }
  else if (mouseX > fullWidth) { mouseX = fullWidth }


  $(this).parent().find('.divider-bar').css({
    left: mouseX,
    transition: 'none'
  });
  $(this).find('.design-wrapper').css({
    transform: 'translateX(' + (mouseX) + 'px)',
    transition: 'none'
  });
  $(this).find('.design-image').css({
    transform: 'translateX(' + (-1*mouseX) + 'px)',
    transition: 'none'
  });
});
$('.divider-wrapper').on( "mouseleave", function() {
  $(this).parent().find('.divider-bar').css({
    left: '50%',
    transition: 'all .3s'
  });
  $(this).find('.design-wrapper').css({
    transform: 'translateX(50%)',
    transition: 'all .3s'
  });
  $(this).find('.design-image').css({
    transform: 'translateX(-50%)',
    transition: 'all .3s'
  });
});

The post Sliding Image Divider appeared first on webdesigncrowd.com.