Làm cách nào để bạn phóng to javascript?

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

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

Ý 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ỉ cần 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 đính kèm với 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í của .zoom{ height:100vh; width:100%; display:grid; place-items:center; position:fixed; top:0; left:0; }2 để 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 con lăn chuột, kiểu dáng .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ó

Zoom meeeee

2

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ừ______03. Trong ví dụ của chúng tôi, chúng tôi sẽ gọi nó là const zoomElement = document.querySelector(".zoom");1

Zoom meeeee

5

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

Zoom meeeee

7

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

Zoom meeeee

9

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

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

Điều đang xảy ra ở đây là chúng tôi đ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

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

Để 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

Zoom meeeee

22. Đâ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

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

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

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

thẻ với 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ẻ