เนื้อหา
- 01. เอฟเฟกต์ข้อความแบบโรลโอเวอร์
- 02. สร้าง CSS
- 03. วางตำแหน่งคำ
- 04. ขึ้น ๆ ลง ๆ
- 05. วางเมาส์ลง
- 06. อัตโนมัติสำหรับประชาชน
- 07. เพิ่มชั้นเรียนสลับกัน
ลิงก์แบบโรลโอเวอร์เป็นวิธีที่ดีในการดึงดูดความสนใจของผู้ใช้โดยเฉพาะอย่างยิ่งหากพวกเขาทำสิ่งที่ผิดปกติหรือเป็นต้นฉบับ Middle Child มีเอฟเฟกต์ที่ยอดเยี่ยมซึ่งแทบจะไม่มีให้เห็นในที่อื่นโดยจะจับตัวอักษรแต่ละตัวและแยกออกจากกันด้วยภาพเคลื่อนไหวซึ่งจะเตะเข้าเมื่อผู้เยี่ยมชมเลื่อนไปมาเหนือคำนั้น แอนิเมชั่นช่วยสื่อถึงบุคลิกขี้เล่นของแบรนด์แซนวิช
ในบทความนี้เราจะแสดงวิธีสร้างเอฟเฟกต์บนไซต์ของคุณใหม่ สำหรับแรงบันดาลใจเพิ่มเติมโปรดดูคำแนะนำของเราเกี่ยวกับตัวอย่างภาพเคลื่อนไหว CSS ที่ดีที่สุด (พร้อมคำแนะนำเกี่ยวกับวิธีการเขียนโค้ด) สำหรับสิ่งที่แตกต่างออกไปเล็กน้อยลองใช้เครื่องมือสร้างเว็บไซต์ชั้นนำหรือตัวเลือกที่เก็บข้อมูลบนคลาวด์ที่ดีที่สุดของเรา และหากคุณกำลังทำให้ไซต์ของคุณซับซ้อนขึ้นตรวจสอบให้แน่ใจว่าเว็บโฮสติ้งของคุณตรงประเด็น
01. เอฟเฟกต์ข้อความแบบโรลโอเวอร์
เอฟเฟกต์ข้อความที่ยอดเยี่ยมอย่างหนึ่งในเว็บไซต์ Middle Child คือเอฟเฟกต์แบบโรลโอเวอร์บนเมนูซึ่งตัวอักษรแยกออกจากกันบนข้อความและหมุนเล็กน้อย เริ่มต้นด้วยแท็ก HTML ง่ายๆ
div> div> อาหารเช้า / div> / div>
02. สร้าง CSS
ใช้ไฟล์ CSS หรือแท็กสไตล์แยกต่างหากเพื่อเพิ่มกฎ CSS ต่อไปนี้และทำให้หน้าเว็บเต็มขนาดของเบราว์เซอร์โดยตรวจสอบให้แน่ใจว่าเนื้อหาและ Wrapper มีความสูงเต็มที่พร้อมใช้งาน
ร่างกาย {กว้าง: 100%; ความสูง: 100%; ระยะขอบ: 0; ช่องว่างภายใน: 0; } .wrapper {display: grid; ความสูง: 100%; }
03. วางตำแหน่งคำ
คำ คลาสจะเน้นคำในตาราง ข้อความใด ๆ ที่ได้รับ คำ ชั้นเรียนสามารถนำไปใช้ ขึ้น ชั้นเรียนจะถูกนำไปใช้กับตัวอักษรอื่น ๆ ทุกตัวอักษรและสิ่งเหล่านี้จะเลื่อนขึ้นไป
.word {font-size: 3em; ระยะขอบ: auto auto; } .word .up {display: inline-block; แปลง: translate3d (0px, 0px, 0px) หมุน (0deg); การเปลี่ยนแปลง: ทุก 0.5 วินาทีเข้า - ออกได้อย่างง่ายดาย }
04. ขึ้น ๆ ลง ๆ
ตอนนี้ ลง คลาสแชร์การตั้งค่าที่คล้ายกันมากกับไฟล์ ขึ้น แต่การวางเมาส์จะแสดงการเคลื่อนที่ขึ้นไปสำหรับ ขึ้น กลิ้งไป. นอกจากนี้ยังหมุนขึ้นเล็กน้อยเพื่อเพิ่มรูปลักษณ์
.word .down {display: inline-block; แปลง: translate3d (0px, 0px, 0px) หมุน (0deg); การเปลี่ยนแปลง: ทุก 0.5 วินาทีเข้า - ออกได้อย่างง่ายดาย } .word: hover .up {transform: translate3d (0px, -8px, 0px) หมุน (12deg); สี: # 058b05}
05. วางเมาส์ลง
เมื่อผู้ใช้วางเมาส์เหนือข้อความชั้นล่างจะย้ายข้อความลง ในภายหลังใน JavaScript ข้อความจะถูกแบ่งออกเป็นช่วงที่แยกจากกันโดยมีการเพิ่มคลาสให้กับช่วงอื่นโดยอัตโนมัติ
.word: hover .down {transform: translate3d (0px, 8px, 0px) หมุน (-12deg); สี: # 058b05; }
06. อัตโนมัติสำหรับประชาชน
เป็นเรื่องยุ่งยากเล็กน้อยที่จะต้องใส่ตัวอักษรทุกตัวสลับช่วงกับคลาสที่แตกต่างกันดังนั้นเราจะดำเนินการโดยอัตโนมัติโดยรับ JavaScript เพื่อค้นหาตัวเลือกและใช้ตัวอักษรแต่ละตัว ที่นี่ str ตัวแปรจะจับตัวอักษรปัจจุบันเมื่อมันวนผ่านข้อความ
สคริปต์> องค์ประกอบ var = document.querySelectorAll ('.word'); สำหรับ (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; องค์ประกอบ [i] .innerHTML = ’';
07. เพิ่มชั้นเรียนสลับกัน
ตอนนี้อีกวงหนึ่งวางตัวอักษรแต่ละตัวในองค์ประกอบช่วงของตัวเองและเพิ่ม ขึ้น หรือ ลง คลาสไปจนถึงช่วง หากคุณดูสิ่งนี้ในเบราว์เซอร์คุณจะเห็นข้อความแยกตามตัวอักษรแต่ละตัวขึ้นและลงในขณะที่หมุนเล็กน้อย
คุณสามารถดูผลที่เกิดขึ้นได้ในเว็บไซต์ Middle Child
สำหรับ (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); องค์ประกอบ [i] .appendChild (spn); spn.textContent = str [j]; ให้ pos = (j% 2)? 'ขึ้นลง'; spn.classList.add (pos); }} / script>
บทความนี้ตีพิมพ์ครั้งแรกในนิตยสารการออกแบบเว็บเชิงสร้างสรรค์ นักออกแบบเว็บไซต์.ซื้อฉบับที่ 286 หรือ ติดตาม.
