จะเพิ่มภาพเคลื่อนไหวแบบเลื่อนในเว็บไซต์ WordPress ได้อย่างไร

เผยแพร่แล้ว: 2024-10-24

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

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

ในบล็อกนี้ เราจะช่วยคุณเรียนรู้วิธีเพิ่ม Scroll Animation ใน WordPress ได้อย่างง่ายดายที่สุด

ดังนั้นคอยติดตามและอ่านโพสต์จนจบ

แต่ก่อนหน้านั้นให้เราทำความเข้าใจว่าการเพิ่ม Scroll Animation ใน WordPress คืออะไร


สารบัญ
ประโยชน์ของการเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress
จะเพิ่ม Scroll Animation ใน WordPress ได้อย่างไร? (วิธีการต่างๆ)
บทสรุป

ประโยชน์ของการเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress

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

1. เพิ่มการมีส่วนร่วมของผู้ใช้

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

2. ปรับปรุงประสบการณ์ผู้ใช้ (UX)

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

3. เพิ่มความน่าดึงดูดทางสายตา

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

4. โอกาสในการเล่าเรื่อง

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

5. การโต้ตอบที่เป็นมิตรกับมือถือ

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

6. ประโยชน์ของ SEO

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

7. การสร้างแบรนด์อย่างมืออาชีพ

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

8. คำแนะนำโดยละเอียดสำหรับผู้ใช้

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

ตอนนี้เรามาดูกันว่าคุณสามารถทำได้อย่างไร


จะเพิ่ม Scroll Animation ใน WordPress ได้อย่างไร? (วิธีการต่างๆ)

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

นี่คือรายการ:

  • การใช้ปลั๊กอิน WordPress เพื่อเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress
  • ใช้ตัวสร้าง Elementer
  • การใช้ดิวิ
  • การใช้แท็ก Anchor

เพิ่ม Scroll Animation ใน WordPress โดยใช้ปลั๊กอิน WordPress

หนึ่งในวิธีที่ง่ายที่สุดในการเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress คือการใช้ปลั๊กอินที่เรียกว่า Scrollsequence

Scrollsequence WordPress Plugin
ปลั๊กอิน WordPress ลำดับเลื่อน

แม้ว่าจะมีปลั๊กอิน WordPress อื่น ๆ นอกเหนือจาก Scrollsequence แต่เราพบว่าปลั๊กอินนี้มีความเสถียรและเต็มไปด้วยฟีเจอร์มากที่สุด

ดังนั้น สำหรับบล็อกนี้ เราจึงเลือกบล็อกนี้เพื่อแสดงวิธีเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress

ต่อไปนี้เป็นวิธีการทีละขั้นตอนเพื่อให้คุณปฏิบัติตาม:

ขั้นตอนที่ 1: ติดตั้งปลั๊กอินและเปิดใช้งาน

  • ไปที่แดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ:
    ขั้นแรก เข้าสู่ระบบไซต์ WordPress ของคุณ > ค้นหา “Scrollsequence” ในส่วนปลั๊กอิน > ติดตั้งเวอร์ชันฟรี > เปิดใช้งานปลั๊กอินหลังการติดตั้ง
Installing ScrollSequence WordPress plugin

ขั้นตอนที่ 2: เข้าถึงเมนู Scrollsequence

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

ขั้นตอนที่ 3: เตรียมภาพเคลื่อนไหวของคุณ

  • ทำความเข้าใจว่า Scrollsequence ทำงานอย่างไร:
    Scrollsequence สร้างภาพเคลื่อนไหวโดยใช้ชุดภาพนิ่ง เช่น ฟลิปบุ๊ก เพื่อให้ดูเหมือนวิดีโอเมื่อผู้ใช้เลื่อนหน้าลง
  • แปลงวิดีโอของคุณให้เป็นรูปภาพ:
    หากต้องการสร้างภาพเคลื่อนไหว ขั้นแรกคุณต้องมีวิดีโอสั้น ๆ (ความยาวประมาณ 5-10 วินาที) ใช้เครื่องมือฟรีเช่น Ezgif เพื่อแปลงวิดีโอนี้เป็นเฟรมรูปภาพแยกกัน (รูปแบบ JPEG) ซึ่งหมายความว่าคุณจะได้รับรูปภาพหลายรูปจากวิดีโอของคุณ ซึ่ง Scrollsequence จะใช้ในการสร้างภาพเคลื่อนไหว

ขั้นตอนที่ 4: สร้างภาพเคลื่อนไหวแบบเลื่อนใหม่

  • เริ่มลำดับการเลื่อนใหม่:
    ในเมนู Scrollsequence ให้มองหาปุ่มที่ระบุว่า Add New Scrollsequence แล้วคลิกที่มัน
  • เพิ่มฉาก:
    คลิกที่ เพิ่มฉาก เมนูแบบเลื่อนลงจะปรากฏขึ้น ซึ่งคุณสามารถเลือกลำดับภาพที่คุณต้องการใช้สำหรับภาพเคลื่อนไหวได้
Animating Scrolling sequences for Rotating Watch demo
การสร้างภาพเคลื่อนไหวลำดับการเลื่อนสำหรับการสาธิตนาฬิกาแบบหมุน
  • อัพโหลดภาพของคุณ:
    ตอนนี้ อัปโหลดภาพที่คุณได้รับจากวิดีโอของคุณ การดำเนินการนี้อาจใช้เวลาเล็กน้อย ขึ้นอยู่กับความเร็วอินเทอร์เน็ตของคุณ

ขั้นตอนที่ 5: ปรับแต่งภาพเคลื่อนไหว

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

ขั้นตอนที่ 6: ดูตัวอย่างและบันทึก

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

ขั้นตอนที่ 7: ใช้ภาพเคลื่อนไหวบนเว็บไซต์ของคุณ

  • รับรหัสย่อ:
    หลังจากเผยแพร่แล้ว ให้กลับไปที่เมนู Scrollsequence คุณจะพบ รหัสย่อ (รหัสพิเศษ) สำหรับแอนิเมชั่นใหม่ของคุณ
Drafted sequence and its Shortcode
ลำดับร่างและรหัสย่อ
  • วางรหัสย่อ:
    คัดลอกรหัสย่อนี้และวางลงในหน้าหรือโพสต์ที่คุณต้องการให้ภาพเคลื่อนไหวปรากฏ คุณสามารถเพิ่มภาพเคลื่อนไหวได้มากเท่าที่คุณต้องการในหน้าเดียวกัน

ตอนนี้ไซต์ WordPress ของคุณมีภาพเคลื่อนไหวแบบเลื่อนที่สนุกสนานและโต้ตอบได้!


เพิ่ม Scroll Animation ใน WordPress โดยใช้ Elementor

ในวิธีการข้างต้น เราใช้วิดีโอแทนรูปภาพ แต่ในวิธี Elementor นี้ เราจะใช้แนวทางที่แตกต่างออกไป

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

ขั้นตอนที่ 1: สร้างหน้าใหม่

  • เริ่มต้นด้วยการสร้างหน้าใหม่บนเว็บไซต์ WordPress ของคุณ

ขั้นตอนที่ 2: แก้ไขด้วย Elementor

  • คลิกที่ แก้ไขด้วย Elementor Elementor เป็นเครื่องมือสร้างเพจที่ช่วยให้คุณออกแบบเพจของคุณได้อย่างง่ายดาย

ขั้นตอนที่ 3: แทรกรูปภาพ

  • เมื่ออยู่ในเครื่องมือแก้ไข Elementor ให้มองหาตัวเลือกในการ แทรกรูปภาพ ลงในเพจ
  • เคล็ดลับ: ภาพเคลื่อนไหวทำงานได้ดีที่สุดกับรูปภาพโปร่งใส คุณสามารถใช้ PNG (ซึ่งรองรับความโปร่งใส) หรือ ไฟล์ SVG (ซึ่งเป็นรูปแบบเวกเตอร์ด้วย)

ขั้นตอนที่ 4: ตั้งค่าขนาดภาพ

  • ปรับขนาดภาพของคุณ ตรวจสอบให้แน่ใจว่ามันใหญ่พอที่จะให้ผู้คนสังเกตเห็นการเคลื่อนไหวเมื่อพวกเขาเลื่อน ตัวอย่างเช่น คุณสามารถตั้งค่าเป็นขนาด กลาง ซึ่งมีขนาดประมาณ 300 x 300 พิกเซล
Adjusting Image Size for scrolling effect in Elementor
การปรับขนาดรูปภาพสำหรับเอฟเฟกต์การเลื่อนใน Elementor

ขั้นตอนที่ 5: เลือกรูปภาพ

  • คลิกที่ภาพที่คุณเพิ่งเพิ่มเพื่อเลือก

ขั้นตอนที่ 6: เข้าถึงการตั้งค่าขั้นสูง

  • มองหาแท็บ ขั้นสูง ในการตั้งค่าทางด้านซ้ายของเครื่องมือแก้ไข Elementor

ขั้นตอนที่ 7: เปิดใช้งานเอฟเฟกต์การเคลื่อนไหว

  • เลื่อนลงเพื่อค้นหา Motion Effects
  • เปิด เอฟเฟ็กต์การเลื่อน ซึ่งจะทำให้คุณสามารถเพิ่มการเคลื่อนไหวให้กับภาพของคุณได้

ขั้นตอนที่ 8: ตั้งค่าทิศทางการเลื่อนแนวนอน

  • เนื่องจากคุณต้องการให้รูปภาพของคุณเลื่อนไปทั่วหน้า ให้มองหาตัวเลือกที่มีข้อความว่า เลื่อนแนวนอน
  • เปลี่ยนการตั้ง ค่าทิศทาง เป็นไป ทางขวา ซึ่งหมายความว่ารูปภาพจะเลื่อนจากซ้ายไปขวาเมื่อผู้ใช้เลื่อนหน้าลง
Set Horizontal Scroll Direction using Elementor
ตั้งค่าทิศทางการเลื่อนแนวนอนโดยใช้ Elementor

ขั้นตอนที่ 9: ทดสอบเอฟเฟกต์

  • เลื่อนหน้าลงเพื่อดูว่ารูปภาพของคุณเคลื่อนไหวอย่างไร นี่เป็นตัวอย่างง่ายๆ แต่จะแสดงให้คุณเห็นว่าการสร้างเอฟเฟกต์ที่น่าสนใจนั้นง่ายดายเพียงใด

หมายเหตุเพิ่มเติม

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

เพิ่ม Scroll Animation ใน WordPress โดยใช้ Divi

ในกรณีที่คุณไม่ใช่ผู้ใช้ Elementor แต่ใช้ Divi แทน คุณยังคงสามารถสร้างเอฟเฟกต์ที่คล้ายกันได้

นี่คือวิธีที่คุณสามารถทำได้

ตัวอย่างเช่น เรากำลังพิจารณาเว็บไซต์ฟุตบอล

ขั้นตอนที่ 1: สร้างหน้าใหม่

สิ่งแรกที่คุณต้องทำคือสร้างเพจใหม่และเลือก Divi Page Builder สิ่งนี้จะช่วยให้คุณสามารถออกแบบเพจของคุณโดยใช้คุณสมบัติของ Divi

Creating new page for soccer tournament website
การสร้างเพจใหม่สำหรับเว็บไซต์การแข่งขันฟุตบอล

ขั้นตอนที่ 2: เลือกเค้าโครง (ไม่บังคับ)

  • ตอนนี้เพื่อทำให้สิ่งต่าง ๆ เร็วขึ้นเล็กน้อย ให้เลือกเค้าโครงที่สร้างไว้ล่วงหน้าของ Divi ตัวอย่างเช่น เลือกเค้าโครงสำหรับ ไซต์ฝึกสอนเทนนิส

ขั้นตอนที่ 4: เพิ่มรูปภาพของคุณ

  • หากต้องการสร้างเอฟเฟกต์การเลื่อน คุณจะต้องมีรูปภาพ ในตัวอย่างนี้ คุณจะใช้รูปภาพคะแนน
  • ตรวจสอบให้แน่ใจว่ารูปภาพคะแนนมี พื้นหลังโปร่งใส (รูปแบบ PNG ทำงานได้ดีที่สุด) อัปโหลดภาพนี้ไปยังเพจของคุณ

ขั้นตอนที่ 5: เข้าถึงการตั้งค่ารูปภาพ

  • คลิกที่ภาพคะแนนที่คุณเพิ่งเพิ่มเพื่อเปิดการตั้งค่า
  • มองหาแท็บ ขั้นสูง ในเมนูการตั้งค่า

ขั้นตอนที่ 6: เปิดใช้งานเอฟเฟกต์การเลื่อน

  • ในการตั้งค่าขั้นสูง ให้ค้นหาส่วน เอฟเฟกต์การเลื่อน
  • คุณจะเห็นตัวเลือกต่างๆ สำหรับเอฟเฟกต์การเลื่อน

ขั้นตอนที่ 7: เลือกเอฟเฟกต์ของคุณ

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

ขั้นตอนที่ 8: ทดสอบการเคลื่อนที่ของการเลื่อนของคุณ

  • หลังจากตั้งค่าเอฟเฟกต์แล้ว ให้เลื่อนหน้าลงเพื่อดูว่าภาพคะแนนเคลื่อนไหวอย่างไร

ขั้นตอนที่ 9: บันทึกการเปลี่ยนแปลงของคุณ

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

เพิ่มแอนิเมชั่นการเลื่อนขั้นพื้นฐานและราบรื่นใน WordPress โดยใช้แท็ก Anchor และ CSS

วิธีนี้ไม่มีตัวเลือกแฟนซีในการเพิ่มภาพเคลื่อนไหวแบบเลื่อนใน WordPress แต่สามารถช่วยให้คุณเพิ่มภาพเคลื่อนไหวแบบง่ายๆ ลงในไซต์ WordPress ของคุณได้ด้วยวิธีที่ง่ายที่สุด

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

แต่เราสามารถทำให้การเคลื่อนไหวนี้ราบรื่นได้ โดยให้ผู้อ่านรู้สึกเหมือนเลื่อนภาพเคลื่อนไหว แทนที่จะกระโดดกะทันหัน

นี่คือวิธีที่คุณสามารถทำได้

ขั้นตอนที่ 1 : ตั้งค่าแท็ก Anchor : คุณต้องสร้างส่วนของเพจของคุณก่อนเพื่อ "ข้ามไปที่" ซึ่งทำได้โดยการเพิ่มคำ (แท็ก Anchor) ลงในช่อง HTML Anchor ซึ่งทำหน้าที่เป็นเป้าหมายสำหรับลิงก์

Setting up anchor tags in WordPress site
การตั้งค่าแท็ก Anchor ในเว็บไซต์ WordPress

ขั้นตอนที่ 2 : สร้างลิงก์ : เชื่อมโยงแท็กจุดยึดกับข้อความหรือปุ่มบนหน้า ลิงก์ควรเขียนด้วยแฮชแท็กตามด้วยข้อความยึด (เช่น #section1)

Creating anchor link
การสร้างลิงค์สมอ

ขั้นตอนที่ 3 : เผยแพร่เพจ : เมื่อคุณเผยแพร่เพจ การคลิกลิงก์จะนำคุณไปยังแท็ก Anchor แต่อาจรู้สึกกระทันหัน

Adding short code for making scrolling effect smooth
เพิ่มโค้ดสั้นเพื่อทำให้เอฟเฟกต์การเลื่อนราบรื่น

ขั้นตอนที่ 4 : แก้ไขด้วยการเลื่อนอย่างราบรื่น : เพื่อให้การเลื่อนราบรื่น คุณจะต้องเพิ่มโค้ด CSS ชิ้นเล็กๆ (พฤติกรรมการเลื่อน: ราบรื่น) ลงในส่วน “CSS เพิ่มเติม” ใน WordPress

html{
scroll-behavior: smooth;
}

โค้ดนี้ทำให้การเลื่อนดูค่อยเป็นค่อยไปและสวยงามราวกับเป็นภาพเคลื่อนไหว

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


WPOven Dedicated Hosting

บทสรุป

ตอนนี้คุณได้เรียนรู้แล้วว่าการเพิ่มภาพเคลื่อนไหวแบบเลื่อนลงในไซต์ WordPress ไม่จำเป็นต้องมีทักษะทางเทคนิคพิเศษหรือความช่วยเหลือจากนักพัฒนา ปลั๊กอินหรือตัวสร้างเพจแบบธรรมดาก็เพียงพอที่จะช่วยคุณสร้างเพจแบบไดนามิกและน่าดึงดูดได้ภายในไม่กี่นาที

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

หากคุณมีข้อสงสัยหรือต้องการแบ่งปันความคิดเห็นอันมีค่าของคุณ โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง