Phòng trưng bày hình ảnh là điểm đến yêu thích trên hầu hết các trang web. Và, trong nhiều trường hợp, có thể tốt nhất là giữ cho các phòng trưng bày hình ảnh đó vui tươi và tĩnh, để hình ảnh hoạt động kỳ diệu.
Nhưng, thêm một hiệu ứng cuộn câu đố trượt vào một bộ sưu tập hình ảnh (như chúng ta sẽ làm trong hướng dẫn này), có thể mang lại một cảm giác mới mẻ cho một tác phẩm kinh điển vượt thời gian.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một bố cục đơn giản để hiển thị thư viện hình ảnh với hiệu ứng cuộn câu đố trượt trên Divi.
Điều quan trọng là phải hiểu kích thước của hình ảnh liên quan như thế nào đến các giá trị bù dọc và ngang của mỗi hiệu ứng cuộn để di chuyển hình ảnh chính xác đến một điểm. Nhưng khi hoàn thành, hiệu ứng chuyển động thu được sẽ sắc nét và chính xác khi nó dần dần lắp ráp và hiển thị một bộ sưu tập hình ảnh theo một cách độc đáo.
Kết quả có thể
Đây là tổng quan về bố cục bộ sưu tập hình ảnh với hiệu ứng cuộn xếp hình trượt mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo phần tiêu đề
Để bắt đầu, hãy tạo một phần tiêu đề nhanh sẽ yêu cầu người dùng cuộn trang để xem thư viện và với các hiệu ứng cuộn tuyệt vời.
Thêm một hàng
Thêm một hàng một cột vào phần mặc định.
Thêm một mô-đun văn bản
Bên trong cột / hàng thêm một mô-đun văn bản mới.
Trong cài đặt văn bản, cập nhật nội dung cơ thể với các mục sau:
<h1>Image Gallery</h1>
Cài đặt mô-đun văn bản
Trên tab Thiết kế, cập nhật thiết kế văn bản như sau:
- Phông chữ: Roboto
- Trọng lượng phông chữ: đậm
- Kiểu chữ tiêu đề: TT
- Căn chỉnh văn bản tiêu đề: Căn giữa
- Kích thước văn bản tiêu đề: 50px (máy tính để bàn), 40px (máy tính bảng và điện thoại)
- Khoảng cách tiêu đề thư: 4px
Thêm biểu tượng mô-đun Blurb
Khi văn bản đã được đặt đúng chỗ, hãy thêm một mô-đun văn bản trình bày mới bên dưới mô-đun văn bản.
Sau đó, xóa tất cả tiêu đề và nội dung khỏi nội dung mặc định và chọn sử dụng biểu tượng mũi tên xuống.
Cài đặt văn bản trình bày
Sau đó cập nhật cài đặt văn bản trình bày với màu mới và hình ảnh động lặp lại.
- Màu biểu tượng: # ffb500
- Phong cách hoạt hình: Trang trình bày
- Hướng hoạt ảnh: xuống
- Cường độ hoạt ảnh: 20%
- Lặp lại hoạt ảnh: vòng lặp
Phần đệm
Để cung cấp không gian phần để cuộn, hãy cập nhật phần đệm như sau:
- Đệm: 20vh ở trên, 50vh dưới
Ở đây chúng tôi đang sử dụng đơn vị độ dài vh có liên quan đến chiều cao của cửa sổ trình duyệt để khoảng cách phù hợp nhất quán trên tất cả các kích thước trình duyệt.
Tạo thư viện hình ảnh với các hiệu ứng cuộn
Bây giờ phần tiêu đề của chúng tôi đã hoàn tất, chúng tôi đã sẵn sàng xây dựng thư viện hình ảnh thực tế với các hiệu ứng cuộn câu đố trượt. Toàn bộ thư viện sẽ bao gồm ba hàng gồm 4 hình ảnh / cột trong mỗi hàng để tạo ra tổng số 12 hình ảnh. Tuy nhiên, bạn có thể dễ dàng thêm nhiều dòng và hình ảnh vào bố cục sau khi hoàn tất.
Tạo phần và dòng
Thêm một phần mới
Hãy bắt đầu bằng cách thêm một phần thông thường mới trong phần tiêu đề.
Thêm một hàng
Sau đó thêm một hàng với bốn cột vào phần.
Cài đặt dòng
Trong cài đặt dòng, cập nhật như sau:
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 1200 px (máy tính để bàn), 600 px (máy tính bảng), 300 px (điện thoại)
Cách độ rộng dòng xác định kích thước hình ảnh
Chiều rộng của hàng rất quan trọng đối với thiết kế này vì nó sẽ quy định chiều rộng của mỗi cột trong số bốn cột. Khi chúng tôi đặt chiều rộng rãnh nước thành 1, sẽ không còn lề giữa các hình ảnh.
Và khi chúng tôi đặt chiều rộng tối đa thành 1200px, bố cục bốn cột sẽ làm cho mỗi cột / hình ảnh rộng chính xác 300px (1200px / 4 = 300px).
Ngoài ra, vì mỗi hình ảnh đều là hình vuông, chúng ta biết rằng chiều cao của mỗi hình ảnh cũng sẽ là 300 pixel. Chúng ta không cần phải giữ nó như vậy nếu chúng ta không muốn.
Ví dụ: chúng tôi cũng có thể chọn bố cục ba cột với hình ảnh 400 x 400 pixel. Biết chiều rộng hình ảnh (300px) và chiều cao (cũng là 300px) sẽ là chìa khóa để tạo hiệu ứng cuộn sau này.
Thêm hình ảnh
Thêm hình ảnh 1
Hiệu ứng hình ảnh 1 cuộn
Mối quan hệ giữa kích thước hình ảnh và hiệu ứng cuộn
Khi sử dụng hiệu ứng cuộn dọc và ngang, điều quan trọng là phải hiểu giá trị số đã nhập đại diện cho điều gì. Trong ví dụ này, chúng ta có độ lệch bắt đầu di chuyển thẳng đứng là -3. -3 này thực tế là -300px (hoặc 300px xuống) là chiều rộng của hình ảnh.
Sau đó, độ lệch đạt đến 0 (vị trí chính) khi người dùng cuộn. Đây là những gì tạo ra hiệu ứng cuộn di chuyển hình ảnh đến chính xác một khối / khung hình. Chuyển động ngang bắt đầu từ 3 (300 pixel từ bên phải) và dừng ở vị trí mặc định của nó. Hai hiệu ứng này kết hợp với nhau để tạo ra hiệu ứng cuộn hai phần độc đáo.
Thêm hình ảnh 2
Sau khi thêm hiệu ứng cuộn vào ảnh 1. Thêm ảnh mới vào cột 2.
Chúng tôi sẽ để lại hình ảnh tĩnh này mà không có bất kỳ hiệu ứng cuộn.
Thêm hình ảnh 3
Sau đó, thêm một mô-đun hình ảnh khác vào cột 3 và cập nhật mô-đun bằng một hình ảnh mới.
Hiệu ứng hình ảnh 3 cuộn
Trong Cài đặt Hình ảnh, cập nhật các hiệu ứng cuộn sau:
Trong tab Di chuyển ngang ...
- Kích hoạt chuyển động ngang: CÓ
- Bắt đầu bù: -3 (ở mức 0% của cửa sổ)
- Độ lệch trung bình: 0 (ở 15% khung nhìn)
- Độ lệch cuối: 0 (ở 100% chế độ xem)
Thêm hình ảnh 4
Để tạo hình ảnh cuối cùng, hãy sao chép hình ảnh 1 và dán vào cột 4.
Tải lên hình ảnh mới trong cài đặt hình ảnh.
Hiệu ứng hình ảnh 4 cuộn
Sau đó cập nhật các hiệu ứng cuộn sau:
Trong tab Chuyển động dọc ...
- Kích hoạt chuyển động dọc: CÓ
- Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
- Độ lệch trung bình: 0 (ở mức 15% -28% của khung nhìn)
- Độ lệch cuối: 0 (ở 40% chế độ xem)
Trong tab Di chuyển ngang ...
- Kích hoạt chuyển động ngang: CÓ
- Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
- Độ lệch trung bình: 3 (ở 28% khung nhìn)
- Độ lệch cuối: 0 (ở 40% chế độ xem)
Dòng trùng lặp
Bây giờ các hiệu ứng cuộn hình ảnh đã được thực hiện cho hàng đầu tiên, tất cả những gì chúng ta cần làm là sao chép hàng để tạo thêm hình ảnh và các hiệu ứng cuộn tương ứng của chúng. Đối với ví dụ này, hãy nhân đôi hàng hai lần để tạo ra tổng cộng ba hàng.
Thay thế và sắp xếp lại hình ảnh khi cần thiết
Sau đó, chúng ta có thể di chuyển các hình ảnh bằng chức năng kéo và thả bất cứ nơi nào chúng ta muốn. Đây là nơi bạn có thể sáng tạo và xem các hình ảnh chuyển động sẽ cuộn như thế nào. Và khi các hình ảnh đã có sẵn, bạn có thể thay thế nội dung của mô-đun hình ảnh bằng các hình ảnh mới đáp ứng nhu cầu của Website.
Touch-up cuối cùng
Phần hiển thị
Vì hình ảnh của chúng ta có thể sẽ mở rộng ra bên ngoài phần / cửa sổ, hãy ẩn phần tràn để làm sạch nó một chút. Mở cài đặt phần và cập nhật phần sau:
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Phần đệm
Chúng tôi muốn hiệu ứng cuộn dọc của hình ảnh trên cùng (kéo dài phía trên phần) có thể nhìn thấy được mặc dù có phần tràn ẩn. Vì vậy, hãy thêm phần đệm trên và dưới bằng chiều cao hình ảnh (300 pixel).
Kết quả cho đến nay
Ngay bây giờ chúng ta có thể dừng ở đây nếu bạn muốn giữ nguyên thiết kế thư viện mà không có bất kỳ khoảng cách nào giữa các hình ảnh. Đây là kết quả cho đến nay. Chú ý cách các hình ảnh di chuyển theo chiều dọc và chiều ngang chính xác một khối / khung hình.
Thêm không gian giữa các hình ảnh
Bởi vì chúng tôi đặt chiều rộng rãnh nước thành 1, chúng tôi không còn có lề giữa các cột hoặc hình ảnh của chúng tôi. Để tạo lại khoảng cách tương tự, chúng ta có thể thêm tô vào mỗi khung.
Điều này sẽ cho phép chúng tôi tạo khoảng cách chúng tôi cần mà không ảnh hưởng đến chức năng của các hiệu ứng cuộn. Điều này có thể thực hiện được vì thêm phần đệm vào hình ảnh sẽ không làm tăng chiều rộng hoặc chiều cao của vùng chứa hình ảnh. Bạn cũng có thể tạo hiệu ứng tương tự bằng cách sử dụng đường viền.
Hình ảnh 1 Đệm
Mở cài đặt cho hình ảnh 1 và cập nhật phần sau:
- Đệm: 10 pixel ở trên cùng, 10 pixel ở dưới cùng, 10 pixel ở bên trái, 10 pixel ở bên phải
Mở rộng điền vào tất cả các hình ảnh
Trước khi lưu, nhấp chuột phải vào tùy chọn đệm và chọn "Mở rộng đệm". Trong cửa sổ bật lên Mở rộng Kiểu, nhấp vào nút Mở rộng để mở rộng phần tô này cho tất cả các hình ảnh trên trang.
Kết quả cuối cùng
Đây là kết quả của tất cả các công việc chúng tôi đã làm cho đến nay.
cuối cùng suy nghĩ
Hiệu ứng cuộn câu đố trượt được giới thiệu trong bài viết này không chỉ cung cấp cho chúng tôi một thiết kế độc đáo cho thư viện hình ảnh. Nó cũng chỉ ra rằng các hiệu ứng chuyển động ngang và dọc có thể được sử dụng cho các hiệu ứng cuộn chính xác hơn.
Hãy tự do khám phá các biến thể khác nhau của bố cục này bằng cách thay đổi các hiệu số và trộn các vị trí của hình ảnh.
Bạn cũng có thể thay đổi số lượng cột miễn là bạn hiểu kích thước cột / hình ảnh sẽ thay đổi như thế nào và sau đó cập nhật cách cập nhật hiệu ứng cuộn với giá trị tương ứng.
Một số tài nguyên được đề xuất
Bạn có thể sẽ tìm thấy những ressources thú vị vì chúng cũng sẽ cho phép bạn tạo thư viện ảnh trên blog WordPress.
- 10 plugin để tạo thư viện ảnh trên WordPress
- Cách tạo thư viện ảnh bằng plugin Envira
- Các plugin 5 WordPress để tạo thư viện ảnh
- Cách sử dụng mô-đun thư viện hình ảnh trên Divi
