Bạn có muốn thêm hiệu ứng nghiêng với Divi trên bất kỳ phần tử nào của trang của bạn?
Thêm hiệu ứng nghiêng khi di chuột vào Website là một trong những cách thú vị và hấp dẫn để mang lại cho bạn Website Divi. Thông thường kiểu thiết kế này yêu cầu plugin hoặc mã nâng cao hơn. Tuy nhiên, quá trình này dễ dàng hơn nhiều khi sử dụng Tilt.js (một hiệu ứng nghiêng khi di chuột qua cho jQuery). Với Tilt.js, bạn có thể dễ dàng áp dụng hiệu ứng nghiêng khi di chuột cho bất kỳ thứ gì trong vài phút.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm hiệu ứng nghiêng di chuột vào bất kỳ thành phần nào của Divi. Bằng cách sử dụng kết hợp các đoạn mã nghiêng của jQuery và trình tạo Divi, chúng tôi sẽ chỉ cho bạn cách thêm các hiệu ứng nghiêng di chuột tuyệt vời vào hình ảnh, cột mô-đun, hàng, v.v.
Chúng tôi thậm chí sẽ chỉ cho bạn cách thêm hiệu ứng thị sai 3D tuyệt vời.
Hãy bắt đầu!
khảo sát
Dưới đây là tổng quan nhanh về kết quả chúng ta sẽ nhận được trong hướng dẫn này.
Xem thêm: Divi: Cách hiển thị nội dung khi di chuột qua thanh phân chia phần
Những gì bạn cần để bắt đầu
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Thêm hiệu ứng nghiêng khi di chuột của bất kỳ phần tử nào trong Divi
Thêm hiệu ứng Tilt Hover vào các mô-đun Divi
Hãy bắt đầu bằng cách thêm một hàng ba cột vào phần thông thường mặc định.
Thêm mô-đun Hình ảnh
Trong cột đầu tiên, hãy thêm mô-đun Hình ảnh.
Lưu ý: Bạn có thể sử dụng bất kỳ mô-đun nào bạn chọn. Nó không nhất thiết phải là một mô-đun Hình ảnh.
Tải lên một hình ảnh mà bạn chọn.
Thêm một lớp mô-đun Hình ảnh
Dưới tab Nâng cao, thêm lớp CSS sau:
- Lớp CSS: et-js-tilt
Lớp này sẽ được sử dụng làm bộ chọn cho chức năng nghiêng của chúng ta sau này.
Sao chép và Dán Mô-đun Hình ảnh Trước đó
Tiếp theo, sao chép mô-đun Hình ảnh và dán một vào mỗi cột trong số hai cột còn lại.
Bạn có thể thay thế các hình ảnh trùng lặp bằng những hình ảnh mới nếu muốn. Chỉ cần đảm bảo mỗi mô-đun hình ảnh thuộc lớp CSS “et-js-nghiêng”.
Thêm thư viện JQuery “tilt.js”
Để thêm thư viện nghiêng.js và đoạn mã cần thiết để làm lệch hình ảnh của chúng tôi, chúng tôi sẽ sử dụng mô-đun Mã.
Đầu tiên, thêm một hàng mới bên dưới hàng hiện có một cột.
Sau đó, thêm một mô-đun Mã vào dòng mới.
Sau đó, chúng tôi cần truy cập vào thư viện nghiêng.js bằng cách thêm tập lệnh nhập tilt.js từ CDN của họ (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Dán tập lệnh sau vào hộp mã.
Sử dụng mã src sau trong thẻ script để nhập thư viện:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Nó sẽ giống như thế này:
Điều quan trọng là phải nhập nghiêng.js trước khi thêm mã sẽ sử dụng nó. Vì vậy, sau khi tập lệnh trỏ đến nghiêng.js, thêm các thẻ tập lệnh cần thiết để bọc JQuery mà chúng ta cần thêm. Sau đó, dán đoạn JQuery sau vào giữa các thẻ tập lệnh.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Lưu ý rằng hàm tilt() nằm trong câu lệnh if sẽ chạy khi chiều rộng của trình duyệt lớn hơn 980px. Điều này sẽ đảm bảo rằng hiệu ứng chỉ xảy ra trên máy tính để bàn.
Đây là kết quả.
Đã thêm hiệu ứng di chuột nghiêng vào dòng
Như chúng tôi đã đề cập trước đây, bạn có thể thêm hiệu ứng nghiêng khi di chuột này vào bất kỳ phần tử Divi nào. Điều này bao gồm toàn bộ một dòng.
Ngoài ra, bạn có thể thêm hiệu ứng nghiêng vào một hàng trong khi vẫn duy trì hiệu ứng nghiêng cho từng mô-đun trong hàng.
Đây là cách.
Nhân đôi dòng và thêm lớp CSS duy nhất vào dòng
Sao chép hàng hình ảnh hiện có, sau đó mở cài đặt hàng trùng lặp. Dưới tab Nâng cao, cung cấp cho dòng một lớp CSS duy nhất như sau:
- Lớp CSS: et-row-js-tilt
Thêm jQuery
Sau đó, thêm jQuery sau vào bên dưới hàm nghiêng trước đó để áp dụng một hàm nghiêng riêng cho dòng.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Lưu ý rằng đối với hiệu ứng nghiêng này, chúng tôi đã giảm tỷ lệ xuống 1 và tăng giá trị phối cảnh để độ nghiêng tinh tế hơn.
Đây là kết quả.
Lưu ý cách hàng có tính năng nghiêng kích hoạt khi bạn di chuột qua hàng và mỗi mô-đun Hình ảnh cũng có cùng hiệu ứng nghiêng mà chúng tôi đã thêm trước đó. Đây là cách bạn có thể áp dụng các trường hợp hiệu ứng nghiêng lồng nhau.
Thêm hiệu ứng Tilt Hover vào một cột với một số mô-đun Divi
Trong một số trường hợp, sẽ hữu ích khi thêm hiệu ứng xiên vào một cột mô-đun. Điều này sẽ cho phép bạn thiết kế nhiều mô-đun trong một cột với Divi và sau đó đặt tất cả các phần tử đó thành một đơn vị duy nhất.
Để cung cấp cho bạn một ví dụ về cách thực hiện việc này, chúng tôi sẽ thêm hiệu ứng nghiêng khi di chuột vào cột chứa mô-đun Hình ảnh, mô-đun Văn bản và mô-đun Nút.
Thêm một dòng mới
Để bắt đầu, hãy tạo một hàng mới với cấu trúc cột sau:
Thêm mô-đun Hình ảnh
Bên trong cột 2 (cột giữa), thêm một mô-đun Hình ảnh mới.
Tải hình ảnh lên mô-đun.
Đặt căn chỉnh của hình ảnh ở giữa.
Thêm mô-đun Văn bản
Bên dưới mô-đun Hình ảnh, hãy thêm mô-đun Văn bản với tiêu đề H2 sau:
<h2>Local Organic</h2>
Tiếp theo, cập nhật các kiểu tiêu đề H2 như sau:
- Phông chữ: Berkshire Swash
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: # 000000
- Kích thước: 60px
- Chiều cao dòng: 1,2 em
Thêm mô-đun nút
Bên dưới mô-đun Văn bản, thêm mô-đun Nút.
Cập nhật văn bản nút để đọc "Tìm hiểu thêm ..."
Cập nhật cài đặt cá nhân hóa như sau:
- Căn chỉnh nút: Trung tâm
- Sử dụng các kiểu tùy chỉnh cho nút
- Kích thước văn bản nút: 18px
- Màu văn bản: #fff
- Nền nút: # 000
- Chiều rộng đường viền nút: 0 pixel
- Bán kính viền: 100px
- Phông chữ nút: Quicksand
- Độ đậm phông chữ: Bold
- Đệm (Trên và Dưới): 16px
- Đệm (Trái và Phải): 30px
- Box Shadow: xem ảnh chụp màn hình
Thông số cột
Khi tất cả ba mô-đun đã hoàn tất, hãy mở cài đặt cho cột mẹ của các mô-đun đó (cột 2) và cập nhật những điều sau:
- Nền: # f5cee6
- Đệm (Trên và Dưới): 50px
- Đệm (Trái và Phải): 20px
Thêm lớp CSS vào cột
Trong tab nâng cao, thêm lớp CSS sau:
- Lớp CSS: et-column-js-tilt
Đã thêm jQuery để áp dụng hiệu ứng nghiêng cho cột
Để thêm hiệu ứng xiên vào cột, chúng ta có thể thêm một đoạn mã jQuery tương tự khác nhắm mục tiêu cột Lớp CSS.
Dán đoạn mã sau vào bên dưới đoạn mã trước đó nhắm mục tiêu dòng.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Đây là kết quả cuối cùng.
Đã thêm hiệu ứng thị sai 3D vào bên trong
Để có hiệu ứng nghiêng khi di chuột nâng cao hơn, chúng ta có thể thêm hiệu ứng thị sai 3D vào các mô-đun cột bên trong.
Sử dụng kết hợp giữa phối cảnh và biến đổi: translateZ (), chúng tôi có thể làm cho từng mô-đun của cột xuất hiện trong không gian 3D khi hiệu ứng nghiêng khi di chuột hoạt động.
Đây là cách.
Sao chép dòng trước đó
Đầu tiên, sao chép hàng trước đó với hiệu ứng xiên được thêm vào cột giữa.
Thêm một lớp cột duy nhất
Sau đó, cập nhật cột giữa (cột 2) bằng một lớp CSS duy nhất như sau:
- Lớp CSS: et-column-js-tilt-3d
CSS tùy chỉnh
Để đảm bảo rằng các mô-đun bên trong duy trì hiệu ứng 3D, hãy thêm CSS tùy chỉnh sau vào phần tử cột chính:
transform-style: preserve-3d;
Thêm jQuery và CSS
Tiếp theo, thêm một số đoạn mã jQuery bên dưới đoạn mã chức năng xiên trước đó nhắm mục tiêu cột như sau:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});JQuery này thêm một hàm nghiêng cơ bản khác vào cột, giống như ví dụ trước.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Bây giờ hãy xem kết quả cuối cùng. Lưu ý cách ba mô-đun xuất hiện trong không gian 3D khi chúng xoay trong hiệu ứng nghiêng.
Đọc cũng: Divi: Cách hiển thị nội dung khi di chuột qua thanh phân chia phần
Kết quả cuối cùng
Đây là một cái nhìn khác về kết quả cuối cùng cho các ví dụ của chúng tôi.
Tải DIVI ngay bây giờ !!!
Kết luận
Các hiệu ứng nghiêng khi di chuột được cung cấp bởi Nghiêng.js thực sự thú vị để thử nghiệm.
Mặc dù chúng tôi đã sử dụng một số ví dụ cơ bản trong hướng dẫn này, bạn có thể dễ dàng có một ngày thực địa bằng cách áp dụng các hiệu ứng nghiêng khi di chuột này cho một trong các bố cục tạo sẵn của chúng tôi hoặc cho trang web của riêng bạn.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
