Как можно реализовать подобную вещь? (js, jQuery)

244

08 октября 2018, 21:10

Как можно реализовать вот такую вещь?

Пояснение: Есть два изображения, которое наложено одно на другое. Необходимо сделать так чтобы при наведении мышкой на блок, частично исчезало изображение на величину зависящую от правого края до мышки.

P.s. я пытался найти в поисковике решение, но не смог сформулировать грамотно запрос.

Answer 1

Как то так.

let $black_white = $('.black_white'), 
		img_width = $('.black_white img').width(), 
		init_split = Math.round(img_width/2); 
   
  $black_white.width(init_split);   
 
	$('.before_after_slider').mousemove((e) => { 
		let offX  = (e.offsetX || e.clientX - $black_white.offset().left); 
		$black_white.width(offX); 
	}); 
 
	$('.before_after_slider').mouseleave((e) =>{ 
		$black_white.stop().animate({ 
		width: init_split 
	},1000) 
});

.before_after_slider { 
  position: relative; 
  margin: 60px; 
  width: 400px; 
  height: 300px; 
} 
.before_after_slider > * { 
  position: absolute; 
} 
 
.black_white { 
  overflow: hidden; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="before_after_slider"> 
  <div class="color"> 
    <img src="https://indipost-img.s3.amazonaws.com/indipost-img-600x400-747210.jpg" width="400" height="300" alt="" /> 
  </div> 
  <div class="black_white"> 
    <img src="https://indipost-img.s3.amazonaws.com/indipost-img-600x400-748565.jpg" width="400" height="300"  alt="black_white" /> 
  </div> 
</div>