[Parallax] Hướng dẫn tạo hiệu ứng chuyển động Parallax Effect

Thời gian đọc: 3 phút

Chào mọi người, ở bài viết này mình sẽ tiếp tục mang đến cho các bạn một bài viết về cách tạo parallax effect. Vì bài này có liến quan đến với bài tạo animation bằng mousemove event. Nên những bạn nào chưa xem thì có thể xem trước bài đó tại đây nhé.

Giới thiệu và sơ lược về kết quả

Sau khi bạn xem bài viết này sẽ nắm bắt thêm được một cách tạo parallax effect mới để bổ sung vô kỹ năng hoặc áp dùng vào những project thực tiễn của mình.

Dưới đây là sơ lược về kết quả của bài viết này :

Tạo Attribute xác định chiều sâu của phần tử và công thức output

Vì phần này liên quan đến phần trước nền các bạn hãy xem lại ở link mình để bên trên nhé. Code ở phần này sẽ phụ thuộc vào bài trước đó nhé. Hoặc nếu bạn nào không xem lại thì có thể kéo xuống dưỡi của bài này mình có để code mẫu.

Các phần input hoặc output được khởi tạo vẫn giống phần trước. Và chúng ta nên phân biệt được rõ ràng. Input là để sử dụng để xác định vị trí của con trỏ chuột, còn output chính là xác định vị trí và chuyển động của phần tử mà chúng ta sẽ thêm hiệu ứng

Tạo Attribute xác định chiều sâu của phần tử

Đầu tiên chúng ta sẽ tạo attribute data-depth để xác định chiều sâu, hay hiểu rõ hơn là để xác định tỷ lệ di chuyển hiệu ứng của phần tử.

<section class="effect">
    <div class="parallax-item" data-depth="0.1"></div>
    <div class="parallax-item" data-depth="0.3" style="background: #d93131;"></div>
    <div class="parallax-item" data-depth="0.6" style="background: #03a9f4;"></div>
</section>

Tiếp theo chúng ta sẽ lấy giá trị depth ra:

var itemsHtml = document.getElementsByClassName("parallax-item");
var itemsArray = Array.from(itemsHtml);

itemsArray.forEach(function (item, k) {
    var depth = parseFloat(item.dataset.depth);
    console.log(depth);
  });

Chúng ta sẽ dùng giá trị depth này để tính giá trị output .

Công thức tính output hiệu ứng

var itemOutput = {
      x : output.x.current - (output.x.current * depth),
      y : output.y.current - (output.y.current * depth)
    };

Output này sẽ được xác định bằng công thức trên là phần hiệu của vị trí hiện tại khi thêm chiều sâu và chưa thêm. Từ đó sẽ ra được cái khoảng hiệu ứng di chuyển của phần tử.

Ta sẽ lấy giá trị x, y được xác định bên trên để đưa vô hiệu ứng.

item.style.transform =
      "translate(" + itemOutput.x + "px, " + itemOutput.y + "px)";

Source code

Phần HTML :

<section class="effect">
    <div class="parallax-item" data-depth="0.1"></div>
    <div class="parallax-item" data-depth="0.3" style="background: #d93131;"></div>
    <div class="parallax-item" data-depth="0.6" style="background: #03a9f4;"></div>
</section>

Phần CSS :

.effect{
    position:relative; 
    background-color:gray; 
    width:100%; 
    height: 1035px;
}
.parallax-item{
    background:black;
    width: 200px;
    height:200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

Phần JS :


var itemsHtml = document.getElementsByClassName("parallax-item");
var itemsArray = Array.from(itemsHtml);

//input setup
var input = {
  mouseX: {
    start: 0,
    end: window.innerWidth,
    current: 0,
  },
  mouseY: {
    start: 0,
    end: window.innerHeight,
    current: 0,
  },
};

input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.range = input.mouseY.end - input.mouseY.start;

//output setup
var output = {
  x: {
    start: -150,
    end: 150,
    current: 0,
  },
  y: {
    start: -150,
    end: 150,
    current: 0,
  },
};

output.x.range = output.x.end - output.x.start;
output.y.range = output.y.end - output.y.start;

var handleMouseMove = function (event) {
  input.mouseX.current = event.clientX;
  input.mouseX.fraction =
    (input.mouseX.current - input.mouseX.start) / input.mouseX.range;

  input.mouseY.current = event.clientY;
  input.mouseY.fraction =
    (input.mouseY.current - input.mouseY.start) / input.mouseY.range;

  output.x.current = output.x.start + input.mouseX.fraction * output.x.range;
  output.y.current = output.y.start + input.mouseY.fraction * output.y.range;
  itemsArray.forEach(function (item, k) {
    var depth = parseFloat(item.dataset.depth);
    var itemOutput = {
      x : output.x.current - (output.x.current * depth),
      y : output.y.current - (output.y.current * depth)
    };
    item.style.transform =
      "translate(" + itemOutput.x + "px, " + itemOutput.y + "px)";
  });
  console.log(output.x.current);
};
var handleResize = function () {
  input.mouseX.end = window.innerWidth;
  input.mouseX.range = input.mouseX.end - input.mouseX.start;

  input.mouseY.end = window.innerHeight;
  input.mouseY.range = input.mouseY.end - input.mouseY.start;
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("resize", handleResize);

Tổng kết

Như vậy là ở bài viết này chúng ta đã tìm hiểu về cách tạo Parallax Effect đơn giản. Hẹn gặp lại các bạn ở bài tiếp theo .
Link bài trước tại đây.
Hãy theo dõi Wolfactive nhé.
Cảm ơn các bạn đã đón đọc. Các bạn có thắc mắc hay có vấn đề cần giải đáp thì hay inbox vào fanpage Wolfactive.

Hướng dẫn tạo hiệu ứng chuyển động Parallax Effect