Ai không thích hình ảnh động? Hình ảnh động đóng một vai trò lớn trong thiết kế trang web. Hôm nay chúng ta sẽ học cách tạo hình bằng CSS và cách thêm hiệu ứng hoạt hình cho chúng. Chúng tôi đã từng sử dụng các giải pháp HTML như Canvas hoặc SVG để thêm các hoạt ảnh tùy chỉnh như vậy vào trang web, nhưng hôm nay chúng tôi sẽ xem cách có thể thiết kế mô hình trực quan như vậy với Divi bằng cách sử dụng CSS tùy chỉnh.
Đầu tiên, chúng ta sẽ học cách tạo một hình dạng tùy chỉnh bằng CSS và sau đó cung cấp hiệu ứng cuộn độc đáo. Chúng tôi sẽ thực hiện toàn bộ công việc bằng cách sử dụng các tính năng có sẵn của Divi . Vậy hãy bắt đầu.
Xem trước
Thiết kế cuối cùng của chúng tôi sẽ giống như vậy.
Hình động tùy chỉnh với CSS
Thêm: Hàng vào Phần ban đầu
Đầu tiên, chúng tôi sẽ thêm cấu trúc hàng được đánh dấu của hình ảnh vào phần chính của trang.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờ
Bây giờ thực hiện một số thay đổi trên cài đặt hàng tab thiết kế.
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Cân bằng độ cao cột: CÓ
- Chiều rộng: 95%
- Chiều rộng tối đa: 900px
Thêm: Mô-đun dải phân cách
Chúng tôi sẽ thêm một mô-đun phân chia để tạo khoảng cách trong cột sẽ chứa các hình dạng CSS.
Bây giờ, hãy mở cài đặt dải phân cách và thực hiện các thay đổi sau.
- Hiển thị dải phân cách: KHÔNG
- Chiều cao: 150px
Vì giá trị vị trí của các hình dạng của chúng ta sẽ là - tuyệt đối, chúng ta có thể điều chỉnh khoảng cách của cột chỉ bằng cách điều chỉnh chiều cao của dải phân cách. Bằng cách này, bạn cũng có thể tùy chỉnh dải phân cách như một phần tử thiết kế.
Hình dạng CSS số 1
Bây giờ chúng ta sẽ tạo các hình dạng CSS bằng cách sử dụng mô-đun phân chia. Tôi sẽ sử dụng đường viền xung quanh của mô-đun phân chia để tạo hình dạng, không phải mô-đun, để sử dụng các mô-đun khác như mô-đun văn bản hoặc mã sau này. Bây giờ, sao chép mô-đun bộ chia trước đó.
Bây giờ chỉnh sửa như hướng dẫn bên dưới.
- Chiều rộng: 0px
- Chiều cao: 0px
Tùy chọn đường viền
Bây giờ, chúng ta sẽ tạo một hình tam giác hướng đỉnh bên phải. Thực hiện các điều chỉnh đối với đường viền của dải phân cách để tạo ra thiết kế này. Gắn nhãn dải phân cách được nhân đôi là - Hình dạng 1. Nó sẽ hữu ích cho việc nhận dạng sau này.
- Màu viền: rgba (28,160,96,0,5)
- Chiều rộng đường viền trên cùng: 150px
- Chiều rộng đường viền trái: 150px
- Màu viền trái: trong suốt
Vì chúng ta sẽ thêm hoạt ảnh cuộn vào thiết kế của mình sau này, nên giá trị vị trí phải là tuyệt đối trong hình dạng này và trong các hình dạng mà chúng ta sẽ tạo trước vì các phần tử phải giữ nguyên trình tự chính xác. Hãy nhớ rằng - tất cả các hình đều có cùng một điểm bắt đầu. Đối với điều này, hãy thay đổi các giá trị sau.
- Chức vụ: Tuyệt đối
- Vị trí vị trí: Trên cùng bên phải (mặc định)
Chúng tôi vừa tạo hình tam giác CSS đầu tiên của mình. Bây giờ chúng ta hãy hướng tới nhiều hơn.
Hình dạng CSS số 2
Bây giờ chúng ta sẽ tạo một hình tam giác giống hệt khác bằng cách nhân bản mô-đun Divider của chúng ta có tên là Hình dạng 1 và đặt nhãn là Hình dạng 2.
Hoạt ảnh cuộn
Bây giờ, hãy mở cài đặt cho hình dạng 2 và thực hiện những thay đổi này.
- Hiệu ứng chuyển đổi cuộn: Xoay
- Bật xoay: CÓ
- Bắt đầu xoay: 0Â ° (ở 30%)
- Xoay giữa: 45 ° (ở 45%)
- Xoay kết thúc: 90 ° (ở 60%)
Hình dạng CSS số 3
Lần này, nhân đôi hình dạng 2 và gắn nhãn dải phân cách đã sao chép là Hình dạng 3.
Hoạt ảnh cuộn
Sau đó, thay đổi các giá trị xoay chuyển đổi.
- Xoay giữa: 90 °
- Xoay kết thúc: 180 °
Hình dạng CSS số 4
Một lần nữa, sao chép mô-đun trước đó và đặt tên là "Hình dạng 4".
Hoạt ảnh cuộn
Sau đó, thay đổi các giá trị xoay chuyển đổi.
- Xoay giữa: 180 °
- Xoay kết thúc: 270 °
Kiểm tra hoạt ảnh cuộn
Bây giờ để kiểm tra hoạt ảnh cuộn, bạn cần thêm một lề tạm thời ở trên và dưới dải phân cách.
- Biên: trên cùng 80vh, dưới 80vh
Thêm tiêu đề
Có một tiêu đề hoạt hình với thiết kế như vậy trên một trang web là khá tốt. Vì vậy, bây giờ chúng tôi sẽ thêm một tiêu đề cho nó. Trước đó, chúng tôi sẽ thêm một số mã CSS trong phần phần tử chính của tab Nâng cao của cột 2 (nơi tiêu đề sẽ nằm) để tiêu đề của chúng tôi được căn giữa theo chiều dọc.
display:flex;
flex-direction:column;
align-items:center;
Bây giờ hãy thêm một mô-đun văn bản vào cột 2 này và thêm một số tiêu đề H2 vào cột này.
Bây giờ từ tab thiết kế, hãy thay đổi các cài đặt sau.
- Phông chữ Heading 2: Poppins
- Tiêu đề 2 Căn chỉnh văn bản: mặc định (máy tính để bàn), trung tâm (máy tính bảng và điện thoại)
- Tiêu đề 2 Kích thước văn bản: 55px (máy tính để bàn), 45px (máy tính bảng), 35px (điện thoại)
- Chiều rộng: 100%
Bây giờ chúng ta sẽ thêm một số hiệu ứng cuộn vào văn bản này.
- Hiệu ứng chuyển đổi cuộn: Chuyển động ngang
- Bật chuyển động ngang: CÓ
- Giá khởi điểm: 2 (ở mức 20%)
- Chênh lệch giữa: 1 (ở mức 35%)
- Kết thúc bù đắp: Máy tính để bàn -0,6 (ở mức 50%), Máy tính bảng và Điện thoại 0 (ở mức 50%)
Khám phá được định hình từ các góc khác nhau
Bây giờ vì chúng ta đã hoàn thành thiết kế, bây giờ chúng ta có thể khám phá các hình dạng khác nhau cho thiết kế hình tam giác đỉnh. Để thực hiện việc này, hãy giữ lệnh (đối với mac) và điều khiển (đối với cửa sổ) và chọn tất cả 4 hình dạng và nhấp vào cài đặt của bất kỳ hình dạng nào. Thao tác này sẽ mở cài đặt kết hợp cho tất cả các hình dạng này. Và xem bạn thích thiết kế nào nhất.
Xem cuối cùng
Tất cả công việc của chúng ta đã xong, bây giờ chúng ta sẽ xem chúng ta có thể thêm bao nhiêu kiểu thiết kế vào trang web của mình.
Phần kết luận
Những người muốn mang lại một chiều hướng mới cho thiết kế web của họ sẽ luôn tìm kiếm thứ gì đó đặc biệt như kiểu thiết kế này. Hình dạng CSS tùy chỉnh với khả năng cuộn hoạt hình chắc chắn sẽ mở rộng vẻ đẹp cho dự án của bạn. Chúng rất dễ thiết kế với Divi , ngoài ra nó không cần thêm bất kỳ plugin bổ sung nào vì tất cả các tính năng đều được tích hợp sẵn. Tôi hy vọng bạn sẽ thích hướng dẫn hôm nay vì nó sẽ cung cấp cho bạn một ý tưởng hay về hoạt ảnh CSS Shape. Chúng tôi rất vui với những suy nghĩ của bạn về bài viết hôm nay và nếu bạn thích điều này, một bài chia sẻ sẽ rất thú vị.
