4

Как можно реализовать вот такую вещь? введите сюда описание изображения

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

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

1

1 ответ 1

9

Как то так.

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>

1
  • Большое спасибо, а как данная вещь называется? Commented 4 авг. 2018 в 10:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.