Hiệu ứng cuộn thu phóng khá thú vị để kết hợp vào thiết kế của bạn. Tuy nhiên, đối với nhiều người mới bắt đầu phát triển giao diện người dùng, điều này có thể giống như một bí ẩn thực thi

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng thu phóng cuộn thú vị với một vài dòng JavaScript và một chút CSS. Đây là phần viết cho video bên dưới. Đừng quên thích và đăng ký 😉

Đây là những gì chúng ta sẽ làm

Hiệu ứng cuộn thu phóng với JavaScript và CSS

Cách hoạt động của tính năng thu phóng cuộn

Ý tưởng đằng sau hiệu ứng nhỏ này rất đơn giản

• nếu bạn cuộn xuống, phần tử được nhắm mục tiêu sẽ được phóng to
• nếu bạn cuộn lên, phần tử được nhắm mục tiêu sẽ bị thu nhỏ

Để làm điều này, chúng tôi sẽ sử dụng thuộc tính

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

1 từ CSS và nhắm mục tiêu động nó thông qua sự kiện cuộn trong JavaScript

Hãy bắt đầu với HTML

  
    
Zoom meeeee

Nó khá cơ bản. Không có gì nhiều. Chỉ là một vùng chứa

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

2 với lớp

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

3 được gắn vào nó. Bạn có thể gọi nó là bất cứ điều gì bạn muốn

Tiếp theo là CSS của bạn. Chúng tôi sẽ căn giữa và cố định vị trí

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

2 của bạn để nó không chạy mất khi chúng tôi cuộn lên và cuộn xuống trang. Đây là CSS

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

Và đó là thiết lập cơ bản chung cho HTML và CSS của bạn. Bây giờ là nơi điều kỳ diệu xảy ra — JavaScript

Trước tiên, chúng tôi sẽ nhắm mục tiêu lớp học

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

3 của bạn thông qua lớp học

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

6

________số 8_______

Điều gì sẽ xảy ra đây

• mỗi khi người dùng cuộn bánh xe chuột, kiểu

  .zoom{  
      height:100vh;  
      width:100%;  
      display:grid;  
      place-items:center;  
      position:fixed;  
      top:0;  
      left:0;
  }

  7 sẽ tự động thay đổi

Điều này có nghĩa là

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

8 cần được biểu diễn dưới dạng nào đó trong JavaScript của chúng ta. Hãy tạo một biến tên là

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

3 để giữ nó

let zoom = 1;

Phần tiếp theo chúng ta cần một giá trị sẽ gây ra sự thay đổi. Con số này sẽ được cộng và trừ vào và từ______0_______3. Trong ví dụ của chúng tôi, chúng tôi sẽ gọi nó là

const zoomElement = document.querySelector[".zoom"];

1

const ZOOM_SPEED = 0.1;

Bây giờ chúng ta đã có tất cả các giá trị cần thiết, hãy bắt tay vào xử lý sự kiện. Để làm điều này, bạn có thể sử dụng

const zoomElement = document.querySelector[".zoom"];

2. Điều này có hai tham số — sự kiện kích hoạt và điều gì xảy ra khi kích hoạt xảy ra

document.addEventListener[trigger, doSomething[]];

Trong trường hợp của chúng tôi, sự kiện kích hoạt của chúng tôi là sự kiện cuộn. Vì vậy,

const zoomElement = document.querySelector[".zoom"];

3 của chúng tôi cuối cùng trông giống như thế này

document.addEventListener["wheel", function[e]{}];

const zoomElement = document.querySelector[".zoom"];

4 là tham số gọi lại từ trình kích hoạt vừa xảy ra và cung cấp cho bạn trạng thái của trang hiện tại. Trong

const zoomElement = document.querySelector[".zoom"];

4 , có một tham số gọi là

const zoomElement = document.querySelector[".zoom"];

6 , theo dõi vị trí hiện tại của trục dọc của trang. Điều này sẽ có ích cho hiệu ứng thu phóng của chúng ta

Bên trong chức năng gọi lại của chúng tôi, chúng tôi sẽ thêm kiểu

const zoomElement = document.querySelector[".zoom"];

7 vào div lớp

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

3 của chúng tôi

Nó trông giống như thế này

zoomElement.style.transform = `scale[${zoom += ZOOM_SPEED}]`;

Điều đang xảy ra ở đây là chúng ta đang thiết lập động

const zoomElement = document.querySelector[".zoom"];

9 bằng cách sử dụng giá trị

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

3 hiện tại và thêm

const zoomElement = document.querySelector[".zoom"];

1 vào đó. Vì vậy, khi bạn cuộn xuống, bạn đang tăng quy mô của mình

Để đảo ngược điều này, bạn chỉ cần trừ thay vì cộng

zoomElement.style.transform = `scale[${zoom -= ZOOM_SPEED}]`;

Để kích hoạt hai kiểu này dựa trên những gì đang xảy ra, bạn có thể sử dụng câu lệnh

let zoom = 1;

2. Đây là đoạn mã JavaScript cuối cùng cho hiệu ứng thu phóng cuộn cực kỳ đơn giản

const zoomElement = document.querySelector[".zoom"];
let zoom = 1;
const ZOOM_SPEED = 0.1;

document.addEventListener["wheel", function[e] {  
    
    if[e.deltaY > 0]{    
        zoomElement.style.transform = `scale[${zoom += ZOOM_SPEED}]`;  
    }else{    
        zoomElement.style.transform = `scale[${zoom -= ZOOM_SPEED}]`;  }

}];

Và đó là về cơ bản nó

Bạn cũng có thể thay thế các thẻ

let zoom = 1;

3 bằng bất cứ thứ gì bạn muốn. Ví dụ: hiệu ứng này cũng sẽ hoạt động với hình ảnh

Đây là đoạn mã HTML cho phần trên

.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

0

CSS và JavaScript vẫn giữ nguyên. Điều này là do hiệu ứng được đặt trên vùng chứa chứ không phải trên chính phần tử riêng lẻ

Và đó là nó cho ngày hôm nay. Cảm ơn bạn đã đi đến cùng

💡

Muốn tài trợ matcha. bạn? . Hãy kết nối và trò chuyện về nó

Làm cách nào để thu nhỏ trang từ js?

Làm cách nào để phóng to video trong JavaScript?

Làm cách nào để phóng to và thu nhỏ trong HTML?

Làm cách nào để tạo hiệu ứng thu phóng cuộn thú vị bằng JavaScript đơn giản?