NộI Dung
- 01. Hiệu ứng văn bản di chuột qua
- 02. Tạo CSS
- 03. Vị trí của từ
- 04. Lên và hơn
- 05. Di chuột xuống
- 06. Tự động cho người dân
- 07. Thêm các lớp xen kẽ
Liên kết cuộn qua là một cách tuyệt vời để thu hút sự chú ý của người dùng, đặc biệt nếu họ làm điều gì đó bất thường hoặc độc đáo. Middle Child có một hiệu ứng tuyệt vời, hiếm khi thấy ở những nơi khác, đó là chụp từng chữ cái và tách chúng ra bằng hoạt ảnh, khởi động khi khách truy cập di chuột qua từ đó. Hình ảnh động giúp truyền tải tính cách vui tươi của thương hiệu bánh sandwich.
Trong bài viết này, chúng tôi hướng dẫn bạn cách tạo lại hiệu ứng trên trang web của bạn. Để có thêm cảm hứng, hãy xem hướng dẫn của chúng tôi về các ví dụ hoạt ảnh CSS tốt nhất (kèm theo hướng dẫn về cách viết mã chúng). Đối với điều gì đó khác biệt một chút, hãy thử một trình xây dựng trang web hàng đầu hoặc lựa chọn lưu trữ đám mây tốt nhất của chúng tôi. Và nếu bạn đang làm cho trang web của mình phức tạp hơn, hãy đảm bảo rằng dịch vụ lưu trữ web của bạn đang hoạt động tốt.
01. Hiệu ứng văn bản di chuột qua
Một trong những hiệu ứng văn bản tuyệt vời trên trang web Middle Child là cho các hiệu ứng cuộn qua trên menu, nơi các chữ cái tách ra trên văn bản và xoay nhẹ. Bắt đầu điều này với một số thẻ HTML đơn giản.
div> div> Bữa sáng / div> / div>
02. Tạo CSS
Sử dụng tệp CSS riêng biệt hoặc các thẻ kiểu để thêm các quy tắc CSS sau đây và làm cho trang có kích thước đầy đủ của trình duyệt bằng cách đảm bảo phần nội dung và trình bao bọc có chiều cao đầy đủ có sẵn.
thân {chiều rộng: 100%; chiều cao: 100%; lề: 0; đệm: 0; } .wrapper {display: grid; chiều cao: 100%; }
03. Vị trí của từ
Các từ ngữ lớp căn giữa từ trong lưới. Bất kỳ văn bản nào được cung cấp từ ngữ lớp có thể áp dụng điều này. Các lên lớp sẽ được áp dụng cho mọi chữ cái khác và những chữ cái này sẽ di chuyển lên trên.
.word {font-size: 3em; margin: auto tự động; } .word .up {display: inline-block; biến đổi: translate3d (0px, 0px, 0px) xoay (0deg); chuyển tiếp: dễ dàng trong 0,5 giây; }
04. Lên và hơn
Bây giờ xuống lớp chia sẻ các cài đặt rất giống với lên nhưng di chuột cho thấy chuyển động lên trên cho lên sự đảo lộn. Phía trên cũng được xoay một chút để tăng cường giao diện.
.word .down {display: inline-block; biến đổi: translate3d (0px, 0px, 0px) xoay (0deg); chuyển tiếp: dễ dàng trong 0,5 giây; } .word: hover .up {biến đổi: translate3d (0px, -8px, 0px) xoay (12deg); màu: # 058b05}
05. Di chuột xuống
Khi người dùng di chuột qua văn bản, lớp xuống sẽ di chuyển văn bản xuống dưới. Sau đó trong JavaScript, văn bản sẽ được chia thành các nhịp riêng biệt với các lớp được thêm tự động vào các nhịp thay thế.
.word: hover .down {biến đổi: translate3d (0px, 8px, 0px) xoay (-12deg); màu: # 058b05; }
06. Tự động cho người dân
Sẽ hơi phức tạp khi phải đặt mọi chữ cái trong các khoảng xen kẽ với các lớp khác nhau, vì vậy chúng tôi sẽ tự động hóa quy trình bằng cách sử dụng JavaScript để truy vấn bộ chọn và lấy từng chữ cái. Đây str biến lấy ký tự hiện tại khi nó chạy qua văn bản.
script> var Elements = document.querySelectorAll (’.word’); for (var i = 0, l = Elements.length; i l; i ++) {var str = Elements [i] .textContent; các phần tử [i] .innerHTML = ’’;
07. Thêm các lớp xen kẽ
Bây giờ, một vòng lặp khác đặt mỗi chữ cái trong phần tử span của riêng nó và thêm vào lên hoặc là xuống lớp cho các nhịp. Nếu bạn nhìn vào điều này trong trình duyệt, bạn sẽ thấy văn bản được chia theo từng chữ cái lên và xuống, trong khi xoay nhẹ.
Bạn có thể thấy hiệu ứng trên trang web Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); các phần tử [i] .appendChild (spn); spn.textContent = str [j]; cho pos = (j% 2)? 'lên xuống'; spn.classList.add (pos); }} / script>
Bài viết này ban đầu được xuất bản trên tạp chí thiết kế web sáng tạo Nhà thiết kế web.Mua số báo 286 hoặc là đăng ký.
