Hướng dẫn tạo hiệu ứng ảnh Slide Before After với Javascript

namndwebdev

Slide image Before After:

Hiệu ứng Slide Before After rất hữu ích nếu như bạn muốn so sánh 2 hình ảnh với nhau tạo trải nghiệm thích thú khi sử dụng website. Chúng ta có thể dùng Slide Before After để làm nổi bật sự khác biệt giữa ảnh trước và ảnh sau một cách rõ rệt.

Slide Before After.gif

Rất thú vị phải không nào . Nào cùng mình bắt đầu thiết kế hiệu ứng Slide Before After nhé.

Các bước thực hiện

Bước 1: Tạo HTML
Tạo file index.html

Code hoàn chỉnh như sau

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div id="comparison">
    <figure>
      <div id="handle"></div>
      <div id="divisor"></div>
    </figure>
    <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
  </div>
 </div>
<!-- partial -->

  <script  src="./script.js"></script>

</body>
</html>

Lưu ý: Các bạn nhớ bổ sung file style.css và script.js vào cùng thư mục file HTML nhé

Bước 2: Trang trí giao diện với CSS
Tạo file với với tên style.css

Đầu tiên chúng ta sẽ set kích thước cho khung ảnh

.container {
  max-width: 600px;
}

#comparison {
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}

Ở trên nếu bạn muốn ảnh to hoặc nhỏ chỉ cần sửa max-width: 600px bằng kích thước bạn muốn là được.

Cấu hình CSS cho ảnh trước và sau:

figure {
  position: absolute;
  background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#divisor {
  background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
  background-size: cover;
  position: absolute;
  width: 50%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 100%;
}
#divisor::before, #divisor::after {
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}
#divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}
#divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}

Chú ý: các bạn có thể thay hình ảnh Before After tại background-image bằng đường dẫn ảnh của mình.

Tiếp theo là handle chính là hình tròn điều khiển ở giữa 2 tấm ảnh:

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}
#handle::before, #handle::after {
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

Cuối cùng là input, giúp chúng ta có thể di chuyển handle tròn bên trên theo chiều ngang một cách mượt mà:

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}
input[type=range]:focus, input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

Bước 3: Thiết lập Javascipt thay đổi hiệu ứng
Tạo file script.js

var divisor = document.getElementById("divisor"),
    handle = document.getElementById("handle"),
    slider = document.getElementById("slider");

function moveDivisor() {
  handle.style.left = slider.value+"%";
	divisor.style.width = slider.value+"%";
}

window.onload = function() {
	moveDivisor();
};

Với hàm moveDivisor, mỗi khi chung ta di chuyển handle tròn bên trên thì tỉ lệ hiển thị ảnh của Before và After sẽ thay đổi tạo lên hiệu ứng thay đổi hình ảnh

Tổng kết:

File HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div id="comparison">
    <figure>
      <div id="handle"></div>
      <div id="divisor"></div>
    </figure>
    <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
  </div>
 </div>
<!-- partial -->

  <script  src="./script.js"></script>

</body>
</html>

File CSS:

.container {
  max-width: 600px;
}

#comparison {
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}

figure {
  position: absolute;
  background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#divisor {
  background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
  background-size: cover;
  position: absolute;
  width: 50%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 100%;
}
#divisor::before, #divisor::after {
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}
#divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}
#divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}
#handle::before, #handle::after {
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}
input[type=range]:focus, input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

File JS:

var divisor = document.getElementById("divisor"),
    handle = document.getElementById("handle"),
    slider = document.getElementById("slider");

function moveDivisor() {
  handle.style.left = slider.value+"%";
	divisor.style.width = slider.value+"%";
}

window.onload = function() {
	moveDivisor();
};

Chúc mọi người thực hiện thành công hiệu ứng Slide Before After nhé
Link download code: https://github.com/namndwebdev/frontend-casestudy/tree/master/Slide-Before-After

Video chi tiết

Nguồn : Codepen.io