เพิ่มเอฟเฟกต์ความผิดพลาดให้กับเว็บไซต์ของคุณ

เนื้อหา

• 01. เพิ่มโค้ดในแท็กเนื้อหาของเพจของคุณ
• 02. จัดรูปแบบการแสดงผล
• 03. แสดงความผิดพลาด
• 04. ยึดทุกอย่าง
• 05. วิ่งผิดพลาด
• 06. กลับสู่ภาวะปกติ
• รับตั๋วของคุณสำหรับ Generate New York ตอนนี้

วิธีที่ยอดเยี่ยมในการดึงดูดความสนใจและรักษามันไว้คือการสร้างเค้าโครงเว็บไซต์ที่แสดงความสามารถของคุณตั้งแต่เริ่มต้น (เครื่องมือสร้างเว็บไซต์ที่ดีสามารถช่วยในการสร้างได้) เว็บไซต์ของ บริษัท Vintage ของยูเครนเป็นตัวอย่างที่ดีในเรื่องนี้โดยดึงคุณเข้าสู่ผลงานการออกแบบ VR ด้วยการผสมผสานที่สะดุดตาของโลโก้ที่เร้าใจซึ่งสร้างจากอนุภาคแก้วและความผิดพลาดเล็กน้อยที่เปิดใช้งานเมื่อวางเมาส์เหนือ

• ภาพเคลื่อนไหวบนเว็บ: ไม่ต้องใช้รหัส

เอฟเฟกต์ความผิดพลาดง่ายๆที่ใช้เพียงเล็กน้อยสามารถทำให้ไซต์ของคุณมีความสนใจด้านภาพเพิ่มขึ้นเล็กน้อยและใช้งานได้ง่ายอย่างน่าประหลาดใจ วิธีการทำมีดังนี้

มีเว็บไซต์ที่ซับซ้อนอยู่ในใจหรือไม่? ตรวจสอบให้แน่ใจว่าเว็บโฮสติ้งของคุณสามารถทำงานได้จริง และเก็บไฟล์การออกแบบของคุณให้ปลอดภัยในที่เก็บข้อมูลบนคลาวด์

ดาวน์โหลดไฟล์ สำหรับบทช่วยสอนนี้

01. เพิ่มโค้ดในแท็กเนื้อหาของเพจของคุณ

การสร้างเอฟเฟกต์ความผิดพลาดง่ายๆสามารถทำได้หลายวิธี ที่นี่เราจะทำโดยให้ GIF เคลื่อนไหวอยู่ด้านบนของข้อความซึ่งจะเปิดและปิดในจอแสดงผล ก่อนอื่นให้เพิ่มโค้ดนี้ลงในแท็กเนื้อหาของเพจของคุณ

div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>

02. จัดรูปแบบการแสดงผล

เนื้อหาจะใช้แบบอักษรเฉพาะจาก Google Fonts ที่เรียกว่า Work Sans หยิบลิงค์จากที่นั่นและวางไว้ในส่วนหัวของคุณ จากนั้นเพิ่ม CSS ลงในแท็กสไตล์หรือไฟล์ CSS แยก หน้าเว็บเป็นสีดำพร้อมข้อความสีขาวและตัวยึดได้รับการออกแบบให้เหมาะกับข้อความ

ร่างกาย {พื้นหลัง: # 000; font-family: 'Work Sans', sans-serif; สี: #fff; } #holder {font-size: 6em; ความกว้าง: 500px; ความสูง: 300px; ระยะขอบ: 0 อัตโนมัติ; ตำแหน่ง: ญาติ; }

03. แสดงความผิดพลาด

เอฟเฟกต์ความผิดพลาดจะเป็นภาพพื้นหลังที่วางไว้ด้านบนของข้อความโดยตรง ส่วนสำคัญที่นี่คือการทำให้มองไม่เห็นโดยการลดความทึบลงเป็นศูนย์เพื่อไม่ให้แสดงจนกว่าผู้ใช้จะโต้ตอบกับข้อความ

#glitch {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ดัชนี z: 10; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: url (glitch.gif); ความทึบ: 0; }

04. ยึดทุกอย่าง

เพิ่มแท็กสคริปต์ที่ส่วนท้ายของส่วนเนื้อหาและสร้างการอ้างอิงที่แคชไปยัง div "glitch" ในเอกสาร จากนั้นตัวแปรชื่อ "over" จะถูกตั้งค่าเป็น "เท็จ" สิ่งนี้จะเปิดและปิดเมื่อผู้ใช้เลื่อนไปที่ข้อความ

var gl = document.getElementById ("ความผิดพลาด"); var มากกว่า = เท็จ;

05. วิ่งผิดพลาด

ฟังก์ชันความผิดพลาดถูกเรียกใช้เมื่อเมาส์เลื่อนไปที่ข้อความ หากความผิดพลาดไม่ทำงานแสดงว่าการมองเห็นความผิดพลาดจะเปิดขึ้นและจะปิดหลังจากผ่านไปหนึ่งวินาทีครึ่งคุณสามารถทดลองกับสิ่งนี้และใช้ตัวเลขสุ่มเพื่อให้คาดเดาไม่ได้มากขึ้น

ฟังก์ชัน glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (ฟังก์ชัน () {normal ();}, 1500); }}

06. กลับสู่ภาวะปกติ

เอฟเฟกต์ความผิดพลาดไม่ควรอยู่ต่อเนื่องจากจะสร้างความรำคาญให้กับผู้ใช้มากเกินไป แต่ในฐานะที่เป็นองค์ประกอบแบบโต้ตอบจึงทำงานได้ดี ที่นี่รหัสจะรีเซ็ตความทึบกลับเป็นศูนย์เพื่อไม่ให้มองเห็นที่ด้านบนของข้อความ

ฟังก์ชันปกติ () {gl.style.opacity = "0"; }

รับตั๋วของคุณสำหรับ Generate New York ตอนนี้

งานออกแบบเว็บสามวัน Generate New York กลับมาแล้ว ซึ่งจัดขึ้นระหว่างวันที่ 25-27 เมษายน 2018 ผู้บรรยายหัวข้อข่าว ได้แก่ Dan Mall ของ SuperFriendly ที่ปรึกษาด้านเว็บแอนิเมชั่น Val Head ผู้พัฒนา JavaScript แบบเต็มสแต็ก Wes Bos และอีกมากมาย นอกจากนี้ยังมีเวิร์กช็อปเต็มวันและโอกาสในการสร้างเครือข่ายที่มีค่าอย่าพลาด รับตั๋วสร้างของคุณตอนนี้

บทความนี้ตีพิมพ์ครั้งแรกในฉบับที่ 270 ของนิตยสาร Web Designer Web Designer ซื้อฉบับที่ 270 ที่นี่ หรือ สมัครสมาชิก Web Designer ที่นี่.