อินเทอร์เฟซแบบไดนามิกบนไซต์ของคุณจะดึงดูดความสนใจของผู้ใช้และเพิ่มการเข้าชม การสร้างส่วนหัวแบบเคลื่อนไหวสำหรับเว็บไซต์นั้นไม่ยากอย่างที่คิดในแวบแรก
คำแนะนำ
ขั้นตอนที่ 1
มาลองสร้างส่วนหัวแบบเคลื่อนไหวกัน ซึ่งจะเปลี่ยนการกำหนดค่าเมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือส่วนหัว ตัวอย่างเช่น รูปภาพขาวดำในส่วนหัวจะถูกแปลงเป็นสีเมื่อมีการโต้ตอบหรือเปลี่ยนเป็นภาพอื่น
ขั้นตอนที่ 2
ติดตั้งไลบรารี jQuery บนคอมพิวเตอร์ของคุณหลังจากดาวน์โหลดจากเว็บไซต์ทางการ (jquery.com)
ขั้นตอนที่ 3
เชื่อมโยงไลบรารีกับไฟล์ html ของคุณระหว่างแท็ก head โดยใช้แท็กสคริปต์:
ขั้นตอนที่ 4
เลือกรูปภาพสองรูปที่จะแทนที่กันเมื่อผู้ใช้โต้ตอบกับส่วนหัว หากคุณต้องการเปลี่ยนจากขาวดำเป็นสี ให้สร้างสำเนาของรูปภาพและทำให้ภาพนั้นดูจืดชืดใน Photoshop
ขั้นตอนที่ 5
สร้างรายการของสองรายการในเอกสาร html และแนบรูปภาพกับแต่ละรายการโดยใช้แท็กรูปภาพ ใช้คลาสสไตล์กับรายการ ตัวอย่างเช่น itself
ขั้นตอนที่ 6
ทำสิ่งนี้ใน div ที่รับผิดชอบส่วนหัวของเว็บไซต์ของคุณ ขั้นแรก ระบุที่อยู่ของรูปภาพที่ควรแสดงในสถานะคงที่ จากนั้นให้ระบุที่อยู่ที่ปรากฏเมื่อวางเมาส์เหนือ
ขั้นตอนที่ 7
เพิ่ม class = "pervaya" ให้กับรูปภาพแรก และ class: "vtoraya" ให้กับรูปภาพที่สอง
ขั้นตอนที่ 8
ในไฟล์ css ที่แนบมา ระบุตำแหน่งที่แน่นอนขององค์ประกอบ (ตำแหน่ง: สัมบูรณ์;) ความสูงและความกว้างคงที่ (ความสูงและความกว้าง) สำหรับคลาสเหล่านี้
ขั้นตอนที่ 9
วางรูปภาพทับซ้อนกัน ใช้สไตล์ดัชนี z สำหรับสิ่งนี้ ช่วยให้คุณสามารถจัดแนวองค์ประกอบตามแกน z ซึ่งจะหายไปจากเราในระดับความลึกของหน้าจอ
ขั้นตอนที่ 10
สำหรับรายการเอง ให้ระบุการเยื้อง การจัดตำแหน่งที่คุณต้องการและลบรายการในรายการ (list-style-type: none;)
ขั้นตอนที่ 11
สร้างไฟล์.js และวางโค้ดต่อไปนี้ลงไป:
$ (เอกสาร).ready (ฟังก์ชัน () {
$ ("img.grey") โฮเวอร์ (ฟังก์ชัน () {
$ (นี้).stop () เคลื่อนไหว ({"ความทึบ": "0"}, "ช้า");
}, ฟังก์ชัน () {
$ (นี้).stop () เคลื่อนไหว ({"ความทึบ": "1"}, "ช้า");
});
});
ขั้นตอนที่ 12
รหัสนี้จะทำให้ส่วนหัวของคุณเคลื่อนไหว อย่าลืมเชื่อมต่อไฟล์.js กับเอกสาร html