[JavaScript]before&after를 효과적으로 보여줄 수 있는 UI

 

 

안녕하세요 무택입니다 :)

오늘은 JS를 이용해서 before&after를 효과적으로 보여줄 수 있는 UI를 카피 구현해 봤습니다. 원본 사이트에서 JS코드를 찾아볼 수가 없어서 따라서 구현하는데 애를 조금 먹었는데, 아래에서 자세한 코드들을 살펴보시죠😊

---

읽기 전 보면 좋은 글

[JavaScript]마우스 좌표를 구할 수 있는 다양한 방법

---

HTML/CSS

<style>
    .full_wrap { position: relative; width: 500px; height: 333px; margin: 0 auto; overflow: hidden; } 
    .bf_img_div { background: url(https://i.ibb.co/LkSLPWK/before.jpg) no-repeat; width: 100%; height: 100%; } 
    .af_img_div { position: absolute; height: 100%; width: 50%; top: 0; right: 0; overflow: hidden; } 
    .af_img_div .line { position: absolute; width: 1px; height: 100%; background-color: rgba(255, 255, 255, .5); left: 0; top: 0; z-index: 8; } 
    .af_img_div .af_img { position: absolute; background: url(https://i.ibb.co/59CXpnT/after.jpg) no-repeat; width: 500px; height: 100%; top: 0; right: 0; } 
    .cc_wrap { position: absolute; height: 100%; width: 50%; top: 0; right: 0; } 
    .cc_div { position: relative; background-color: #000; width: 24px; height: 24px; border-radius: 20px; top: calc(50% - 12px); left: -12px; z-index: 9; background: url(https://media.macphun.com/img/uploads/uploads/skylum/l/line-arrows.png) no-repeat #000; background-position: center; } 
    .find_xy { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } 
</style>
<div class="full_wrap">
  <div class="find_xy"></div>
  <div class="bf_img_div"></div>
  <div class="af_img_div">
    <div class="line"></div>
    <div class="af_img"></div>
  </div>
  <div class="cc_wrap">
    <div class="cc_div"></div>
  </div>
</div>

 

JS

const find_xy = document.getElementsByClassName('find_xy')[0];
find_xy.addEventListener('mousemove', function (e) {
  const moveX = e.offsetX;
  document.querySelector('.af_img_div').style.width = (500 - moveX) + 'px';
  document.querySelector('.cc_wrap').style.width = (500 - moveX) + 'px';
});

 

Codepen

See the Pen [JavaScript]before&after를 효과적으로 보여줄 수 있는 UI by TytanLee (@TytanLee) on CodePen.

 

 

 

코드 설명

HTML구조

<div class="full_wrap">  //전체를 감싸는 div
  <div class="find_xy"></div>  //마우스 좌표를 찾는 div
  <div class="bf_img_div"></div>  //before img
  <div class="af_img_div">  //after img div
    <div class="line"></div>  //둘의 경계에 나타낼 선
    <div class="af_img"></div>  //after img
  </div>
  <div class="cc_wrap">  //가운데의 블랙 동그라미 div
    <div class="cc_div"></div>
  </div>
</div>

디자인적인 요소가 들어간 `.line`이나 `.cc_wrap`은 취향에 따라 안 넣어도 됩니다.

코드 원리

1. 해당 영역에 마우스가 들어오면 코드 실행

2. 마우스 좌표를 구해 기준이 되는 선이 마우스를 따라다니도록 셋팅

3. 이미지들의 위치는 고정되어 있고 `width`를 조절해 두 이미지를 같이 노출

CSS설명

UI에서 왼쪽이 before, 오른쪽이 after를 표현할 것이기 때문에 CSS에서 after 이미지에 `position: absolute; right: 0;`을 이용해서 오른쪽에 위치가 고정되도록 설정해야 합니다.

JS설명

마우스의 좌표를 구하는 div(`find_xy`)는 맨 위 레이어에 하나 만들어줍니다. 처음에 `full_wrap`으로 기준을 잡았는데 `cc_wrap`에 마우스가 올라오면 스크립트가 제대로 작동을 안 해서 `find_xy`를 만들게 되었습니다.

그래서 `find_xy`영역에 마우스가 들어오면 코드를 실행하고 마우스 좌표를 구합니다. 그 값을 after이미지의 `width`에 넣어줘야 하는데 이미지의 기준 위치가 왼쪽이라면 그대로 `width`에 넣어줘도 되지만 오른쪽에 있기 때문에 `이미지의 넓이 - 마우스 좌표`를 해줘야 맞는 `width`가 들어가게 됩니다.

여기까지 before&after를 효과적으로 보여줄 수 있는 UI에 대해 코드를 정리해 봤습니다.

모르는 부분이 있다면 댓글로 남겨주세요 :)

원본 : https://skylum.com/ko/luminar