NộI Dung
- 01. Khởi tạo tài liệu HTML
- 02. Nội dung HTML hiển thị
- 03. Khởi tạo CSS
- 04. Hộp chứa hoạt ảnh
- 05. Bắt đầu hoạt ảnh
- 06. Hoạt ảnh vào chế độ xem
- 07. Hoàn thiện hoạt ảnh
Love Lost by Canada’s Jam3 là một bài thơ tương tác tuyệt đẹp, sẵn sàng cho thiết bị di động với trái tim thực về những cảm xúc day dứt xung quanh tình yêu đã mất. Bố cục trang web được xây dựng bằng HTML5 với thư viện GSAP cung cấp năng lượng cho hoạt ảnh của nó, một trong những tính năng trực quan nổi bật nhất của nó là văn bản 3D hoạt hình thực sự mang chất thơ của Love Lost vào cuộc sống.
- Tạo hiệu ứng kiểu chữ 3D tương tác
Nó trông thật ấn tượng và không khó để kết hợp vào công việc của riêng bạn để tạo ra trải nghiệm người dùng hấp dẫn; đây là cách nó được thực hiện.
Bạn muốn tạo trang web hấp dẫn của riêng bạn? Hãy thử một công cụ tạo trang web và giữ cho mọi thứ hoạt động trơn tru bằng cách chọn dịch vụ lưu trữ web phù hợp.
01. Khởi tạo tài liệu HTML
Bước đầu tiên là xác định cấu trúc của tài liệu HTML. Điều này bao gồm vùng chứa HTML khởi tạo tài liệu, chứa phần đầu và phần nội dung. Trong khi phần đầu chủ yếu được sử dụng để tải tệp CSS bên ngoài, phần nội dung sẽ lưu trữ nội dung trang hiển thị được tạo ở bước 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * BƯỚC 2 HERE / body> / html>
02. Nội dung HTML hiển thị
Nội dung HTML hiển thị bao gồm một vùng chứa bài viết có chứa văn bản hiển thị. Phần quan trọng của vùng chứa bài viết là thuộc tính 'data-animate', thuộc tính này sẽ được CSS tham chiếu để áp dụng hiệu ứng hình ảnh. Văn bản bên trong bài viết được tạo từ thẻ h1 để cho biết rằng nội dung là tiêu đề chính của trang.
article data-animate = "move in"> h1> Xin chào! / h1> / article>
03. Khởi tạo CSS
Tạo một tệp mới có tên là 'styles.css'. Bộ hướng dẫn đầu tiên đặt vùng chứa và nội dung HTML của trang có nền đen, cũng như không có khoảng cách đường viền hiển thị. Màu trắng cũng được đặt làm màu văn bản mặc định cho tất cả các phần tử con trên trang kế thừa; tránh màu đen mặc định của văn bản làm cho nội dung hiển thị như ẩn.
html, body {background: # 000; đệm: 0; lề: 0; màu: #fff; }
04. Hộp chứa hoạt ảnh
Vùng chứa nội dung được tham chiếu với thuộc tính 'data-animate' có các kiểu cụ thể được áp dụng. Kích thước của nó được đặt để phù hợp với kích thước đầy đủ của màn hình bằng cách sử dụng các đơn vị đo vw và vh, cũng như được xoay nhẹ. Một hoạt ảnh được gọi là 'moveIn' được áp dụng, sẽ kéo dài trong 20 giây và sẽ lặp lại vô hạn.
[data-animate = "move in"] {vị trí: tương đối; chiều rộng: 100vw; chiều cao: 100vh; độ mờ: 1; animation: moveIn 20s vô hạn; text-align: center; biến đổi: xoay (20deg); }
05. Bắt đầu hoạt ảnh
Hoạt ảnh 'moveIn' được tham chiếu ở bước trước yêu cầu định nghĩa bằng @keyframes. Khung đầu tiên bắt đầu từ 0% hoạt ảnh đặt kích thước phông chữ mặc định, vị trí văn bản và bóng hiển thị. Ngoài ra, mục này được đặt với độ mờ bằng không để ban đầu nó vô hình - tức là. hiển thị ngoài tầm nhìn.
@keyframes moveIn {0% {font-size: 1em; trái: 0; độ mờ: 0; text-shadow: không có; } * * * BƯỚC 6 TẠI ĐÂY}
06. Hoạt ảnh vào chế độ xem
Khung tiếp theo được đặt ở mức 10% thông qua hoạt ảnh. Khung này đặt độ mờ để có thể nhìn thấy hoàn toàn, dẫn đến văn bản dần dần được làm động trong chế độ xem.Ngoài ra, nhiều bóng đổ được thêm vào với các giá trị màu xanh lam và giảm dần để tạo ảo giác về chiều sâu 3D cho văn bản.
10% {độ mờ: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * BƯỚC 7 TẠI ĐÂY
07. Hoàn thiện hoạt ảnh
Các khung hình cuối cùng xảy ra ở 80% và ở cuối hoạt ảnh. Chúng chịu trách nhiệm tăng kích thước phông chữ và di chuyển phần tử về phía bên trái. Các cài đặt mới cũng được áp dụng để bóng văn bản hoạt ảnh theo hướng, đồng thời làm mờ văn bản ra khỏi khung hình từ 80% đến 100%.
80% {font-size: 8em; trái: -8em; độ mờ: 1; } 100% {font-size: 10em; trái: -10em; độ mờ: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Lưu ý: bất kỳ dự án nào bạn đang thực hiện, việc có bộ nhớ đám mây có thể đối phó là điều cần thiết (hướng dẫn của chúng tôi sẽ hữu ích).
Bài báo này ban đầu được xuất bản trong số 273 của tạp chí thiết kế web sáng tạo Web Designer. Mua số 273 tại đây hoặc là đăng ký Web Designer tại đây.
