Giao diện động trên trang web của bạn sẽ thu hút sự chú ý của người dùng và tăng lưu lượng truy cập. Tạo tiêu đề động cho một trang web không khó như thoạt nhìn có vẻ như.
Hướng dẫn
Bước 1
Hãy thử tạo một tiêu đề động, tiêu đề này sẽ thay đổi cấu hình của nó khi con trỏ chuột di chuột qua nó. Ví dụ: một hình ảnh đen trắng trong tiêu đề đã được chuyển đổi thành màu khi tương tác hoặc được thay đổi sang hình ảnh khác.
Bước 2
Cài đặt thư viện jQuery trên máy tính của bạn sau khi tải xuống từ trang web chính thức (jquery.com).
Bước 3
Liên kết thư viện với tệp html của bạn giữa các thẻ head bằng thẻ script:
Bước 4
Chọn hai ảnh sẽ thay thế nhau khi người dùng tương tác với tiêu đề. Nếu bạn muốn chuyển từ đen trắng sang màu, hãy tạo một bản sao của bức tranh và khử bão hòa trong Photoshop.
Bước 5
Tạo danh sách hai mục trong tài liệu html và đính kèm ảnh vào mỗi mục bằng thẻ hình ảnh. Ví dụ: áp dụng một lớp kiểu cho chính danh sách
Bước 6
Làm điều này trong div chịu trách nhiệm về tiêu đề trang web của bạn. Đầu tiên, chỉ định địa chỉ của hình ảnh sẽ được phản ánh ở trạng thái tĩnh, sau đó là địa chỉ xuất hiện khi di chuột.
Bước 7
Thêm class = "pervaya" vào hình ảnh đầu tiên và class: "vtoraya" vào hình ảnh thứ hai.
Bước 8
Trong tệp css đính kèm, chỉ định vị trí tuyệt đối của các phần tử (vị trí: tuyệt đối;), chiều cao và chiều rộng cố định (chiều cao và chiều rộng) cho các lớp này.
Bước 9
Xếp lớp các bức tranh chồng lên nhau. Sử dụng kiểu z-index cho việc này. Nó cho phép bạn căn chỉnh các phần tử dọc theo trục z, cách xa chúng ta theo chiều sâu của màn hình.
Bước 10
Đối với chính danh sách, hãy chỉ định thụt lề, căn lề bạn cần và xóa các mục danh sách (list-style-type: none;).
Bước 11
Tạo tệp.js và dán mã sau vào đó:
$ (tài liệu).ready (function () {
$ ("img.grey"). hover (chức năng () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, chức năng () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Bước 12
Mã này sẽ làm cho tiêu đề của bạn hoạt động. Đừng quên kết nối tệp.js với tài liệu html.
