NộI Dung
- 01. Thêm mã vào thẻ nội dung của trang của bạn
- 02. Tạo kiểu cho màn hình
- 03. Hiển thị trục trặc
- 04. Nắm giữ mọi thứ
- 05. Chạy trục trặc
- 06. Trở lại bình thường
- Nhận vé của bạn cho Generate New York ngay bây giờ
Một cách tuyệt vời để thu hút sự chú ý - và giữ vững điều đó - là tạo một bố cục trang web thể hiện tài năng của bạn ngay từ đầu (một người xây dựng trang web tử tế có thể giúp bạn xây dựng). Trang web Vintage’s của đại lý web Ukraine là một ví dụ tuyệt vời về điều này, thu hút bạn vào danh mục thiết kế VR của hãng với sự kết hợp bắt mắt giữa biểu trưng rung động được xây dựng từ các hạt thủy tinh và một chút trục trặc đáng yêu kích hoạt khi di chuột.
- Hoạt ảnh web: Không cần mã
Một hiệu ứng trục trặc đơn giản được sử dụng một cách ít có thể mang lại cho trang web của bạn một chút quan trọng về hình ảnh và nó dễ thực hiện một cách đáng ngạc nhiên. Đây là cách thực hiện.
Bạn có một trang web phức tạp trong tâm trí? Đảm bảo rằng dịch vụ lưu trữ web của bạn hoạt động tốt. Và giữ an toàn cho các tệp thiết kế của bạn trong bộ nhớ đám mây.
Tải xuống các tệp cho hướng dẫn này.
01. Thêm mã vào thẻ nội dung của trang của bạn
Tạo hiệu ứng trục trặc đơn giản có thể được thực hiện theo nhiều cách khác nhau. Ở đây chúng ta sẽ làm điều đó bằng cách đặt một GIF động trên đầu văn bản, sẽ được bật và tắt trên màn hình. Đầu tiên, hãy thêm mã này vào thẻ nội dung của trang của bạn.
div id = "Holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Tạo kiểu cho màn hình
Nội dung sẽ sử dụng một kiểu chữ cụ thể từ Google Fonts được gọi là Work Sans. Lấy liên kết từ đó và đặt nó trong phần đầu của bạn; sau đó thêm CSS vào các thẻ kiểu hoặc một tệp CSS riêng biệt. Trang được làm màu đen với văn bản màu trắng và ngăn giữ được tạo kiểu cho văn bản.
body {background: # 000; font-family: 'Work Sans', sans-serif; màu: #fff; } #holder {font-size: 6em; chiều rộng: 500px; chiều cao: 300px; margin: 0 auto; chức vụ: thân nhân; }
03. Hiển thị trục trặc
Hiệu ứng trục trặc sẽ là một hình nền được đặt trực tiếp trên đầu văn bản. Phần quan trọng ở đây là nó được ẩn đi bằng cách giảm độ mờ xuống 0 để nó không hiển thị cho đến khi người dùng tương tác với văn bản.
#glitch {vị trí: tuyệt đối; đầu: 0; trái: 0; chỉ số z: 10; chiều rộng: 100%; chiều cao: 100%; background: url (glitch.gif); độ mờ: 0; }
04. Nắm giữ mọi thứ
Thêm thẻ tập lệnh vào cuối phần nội dung và tạo tham chiếu được lưu trong bộ nhớ cache đến div 'trục trặc' trong tài liệu. Sau đó, một biến có tên 'over' được đặt thành false. Điều này sẽ được bật và tắt khi người dùng di chuyển qua văn bản.
var gl = document.getElementById ("trục trặc"); var over = false;
05. Chạy trục trặc
Chức năng trục trặc được gọi khi con chuột di chuyển qua văn bản. Nếu trục trặc không chạy thì chế độ hiển thị trục trặc được bật và tắt sau một giây rưỡi.Bạn có thể thử nghiệm điều này và sử dụng một số ngẫu nhiên để làm cho nó khó đoán hơn.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Trở lại bình thường
Hiệu ứng trục trặc không nên tiếp tục vì nó sẽ gây khó chịu cho người dùng, nhưng là một yếu tố tương tác, nó hoạt động tốt. Tại đây, mã đặt lại độ mờ trở lại 0 để nó không hiển thị trên đầu văn bản.
function normal () {gl.style.opacity = "0"; }
Nhận vé của bạn cho Generate New York ngay bây giờ
Sự kiện thiết kế web kéo dài ba ngày Generate New York đã trở lại. Diễn ra từ ngày 25-27 tháng 4 năm 2018, các diễn giả chính bao gồm SuperFriendly's Dan Mall, nhà tư vấn hoạt hình web Val Head, nhà phát triển JavaScript đầy đủ Wes Bos và hơn thế nữa. Ngoài ra còn có cả ngày hội thảo và các cơ hội kết nối có giá trị - đừng bỏ lỡ. Nhận vé Tạo của bạn ngay bây giờ.
Bài báo này ban đầu được xuất bản trong số 270 của tạp chí thiết kế web sáng tạo Web Designer. Mua số 270 tại đây hoặc là đăng ký Web Designer tại đây.
