Before/After effect in JavaScript using jQuery

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

(function($) {
	$.fn.extend({
		before_after: function(options) {
			/**
			 * The default settings, can be changed by passing different ones to
			 * the before_after() function.
			 */
			let default_settings = {
				gap: 50,
				left_gap: 10,
				right_gap: 10,
				caption: false,
				reveal: 0.5
			};
			let settings = $.extend(default_settings, options);
			return this.each(function() {
				/**
				 * Get the width of the first image.
				 */
				let width = $(this).children('img:eq(0)').width();
				/**
				 * Get the height of the first image.
				 */
				let height = $(this).children('img:eq(0)').height();
				/**
				 * Hide the img DOM elements (because we're going to reconstruct
				 * them in divs).
				 */
				$(this).children('img').hide();
				$(this).css({
					overflow: 'hidden',
					position: 'relative'
				});
				/**
				 * Add the mask div element (the after image).
				 */
				$(this).append('<div class="ba-mask"></div>');
				/**
				 * Add the background div element (the before image).
				 */
				$(this).append('<div class="ba-bg"></div>');
				/**
				 * Add the caption div element (the alt-text on the images).
				 */
				$(this).append('<div class="ba-caption">' +
						$(this).children('img:eq(0)').attr('alt') +
					'</div>');
				/**
				 * Set the width and height of the new divs to match the parent
				 * element.
				 */
				$(this).children('.ba-mask, .ba-bg').width(width);
				$(this).children('.ba-mask, .ba-bg').height(height);
				/**
				 * Use a nice animation effect to reveal a bit of the before image.
				 */
				$(this).children('.ba-mask').animate({
					width: width - settings.gap
				}, 1000);
				/**
				 * Set the background images of the two divs.
				 */
				$(this).children('.ba-mask').css('backgroundImage',
					'url(' + $(this).children('img:eq(0)').attr('src') + ')');
				$(this).children('.ba-bg').css('backgroundImage',
					'url(' + $(this).children('img:eq(1)').attr('src') + ')');
				/**
				 * If we want a caption, show it.
				 */
				if (settings.caption) {
					$(this).children('.ba-caption').show();
				}
			}).mousemove(function(c) {
				/**
				 * Get the `left` positioning of the container.
				 */
				let pos_img = $(this).position()['left'];
				/**
				 * Get the `left` positioning of the mouse cursor and substract the
				 * `pos_img` variable from it.
				 */
				let pos_mouse = c.pageX -
					$(this).children('.ba-mask').offset().left;
				let diff = pos_mouse - pos_img;
				/**
				 * Get the width of the container.
				 */
				let width = $(this).width();
				/**
				 * Get the captions (from the alt-texts) of the images.
				 */
				let after_caption = $(this).children('img:eq(0)').attr('alt');
				let before_caption = $(this).children('img:eq(1)').attr('alt');
				/**
				 * Use math for good (not for evil) to calculate the width of the
				 * mask (the after image) by adjusting it with the left and right
				 * gap options.
				 */
				if ((diff > settings.left_gap) &&
					(diff < width - settings.right_gap)) {
						$(this).children('.ba-mask').width(diff);
				}
				/**
				 * Show a different caption when we move the mouse across the
				 * container.
				 */
				if (diff < (width * settings.reveal)) {
					$(this).children('.ba-caption').html(before_caption);
				} else {
					$(this).children('.ba-caption').html(after_caption);
				}
			});
		}
	});
})(jQuery);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.ba-mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	border-right: 3px solid #333;
	overflow: hidden;
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.6);
	cursor: ew-resize;
}

.ba-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.ba-caption {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 120;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 2px 10px;
	display: none;
}

1
2
3
4

$('.gallery').before_after({
	left_gap: 0,
	caption: true
});