วิธีสร้างภาพซ้อนทับด้วยการออกแบบแอนิเมชั่นชัตเตอร์ข้อความแบบแยกส่วนใน Divi

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

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

มาเริ่มกันเลยดีกว่า!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของการออกแบบภาพซ้อนทับจากบทช่วยสอนนี้

และนี่คือ codepen ที่แสดงการออกแบบเดียวกันกับที่ใช้ในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการวางมือบนการออกแบบแอนิเมชั่นชัตเตอร์แบบข้อความแยกส่วนที่ซ้อนทับรูปภาพจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ส่วนที่ 1: การสร้างภาพซ้อนทับด้วยหน้าต่างข้อความแบบแยกส่วน

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

แถว

ในการเริ่มต้น ให้เพิ่มแถวสองคอลัมน์ในส่วนปกติ

ก่อนเพิ่มโมดูล เปิดการตั้งค่าแถวและอัปเดตความกว้างของรางน้ำ:

• ความกว้างของรางน้ำ: 2

กำลังอัปเดตคอลัมน์

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

ในการกำหนดคอลัมน์ของเราเป็น "คอลัมน์ชัตเตอร์" และเพื่อทำให้เคลื่อนไหวในภายหลัง "เมื่อโฮเวอร์" ให้เพิ่มคลาส CSS ต่อไปนี้ลงในคอลัมน์:

• CSS Class: คอลัมน์ชัตเตอร์บนโฮเวอร์

จากนั้นอัปเดตโอเวอร์โฟลว์เป็นซ่อนไว้ เพื่อที่เราจะไม่เห็นองค์ประกอบที่แปลงแล้ว เมื่อพวกเขาไปนอกคอนเทนเนอร์คอลัมน์ระหว่างแอนิเมชัน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การเพิ่มภาพหลัก

ภายในคอลัมน์ 1 เพิ่มโมดูลรูปภาพ ซึ่งจะทำหน้าที่เป็นภาพหลักที่เราจะนั่งหลังโอเวอร์เลย์ชัตเตอร์

อัปโหลดรูปภาพไปยังโมดูลรูปภาพ

จากนั้นกำหนดการจัดตำแหน่งภาพให้อยู่ตรงกลาง

การสร้างชัตเตอร์ระดับบนด้วย Split Text

เมื่อรูปภาพของเราเข้าที่แล้ว เราจะเพิ่มชัตเตอร์ด้านบนโดยใช้โมดูลข้อความ เพิ่มโมดูลข้อความใหม่ใต้รูปภาพ

อัปเดตเนื้อหาโมดูลข้อความโดยเพิ่มข้อความ "divi" ลงในพื้นที่เนื้อหา

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: หนัก
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 200px (เดสก์ท็อป), 30vw (แท็บเล็ตและโทรศัพท์)
• ระยะห่างระหว่างตัวอักษร: -0.03em
• ความสูงของบรรทัดข้อความ: 0em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ถัดไป อัปเดตตัวเลือกการปรับขนาดและระยะห่าง:

• ความกว้าง: 100%
• ส่วนสูง: 50%
• ระยะขอบ: 0px ด้านล่าง

ภายใต้แท็บขั้นสูง ให้อัปเดตสิ่งต่อไปนี้:

• CSS Class: ชัตเตอร์ด้านบน

เราจะใช้คลาส CSS เพื่อสลับเปิดและปิดแอนิเมชั่นการแปลงด้วยโค้ดของเราในภายหลัง

จากนั้นเพิ่ม CSS ที่กำหนดเองนี้ไปยังองค์ประกอบหลัก:

display:flex;
align-items:flex-end;
justify-content:center;

โค้ดนี้ใช้ flex เพื่อให้แน่ใจว่าข้อความอยู่ในแนวตั้งที่ด้านล่างของโมดูล เนื่องจากข้อความมีความสูงบรรทัดเท่ากับ 0 ข้อความจะแสดงเป็นเส้นแบ่งแสดงเฉพาะครึ่งบน

ในการวางตำแหน่งชัตเตอร์ด้านบน เราต้องซ่อนข้อความที่ล้นออกมาก่อน จากนั้นจึงกำหนดตำแหน่งที่แน่นอนดังนี้:

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน
• ตำแหน่ง: Absolute

การดำเนินการนี้จะเลื่อนชัตเตอร์ไปไว้เหนือครึ่งบนของภาพ

การสร้างชัตเตอร์ด้านล่างด้วยการจับคู่ข้อความแยก

ตอนนี้เราสร้างชัตเตอร์ด้านบนเสร็จแล้ว เราสามารถเริ่มสร้างชัตเตอร์ด้านล่างได้ด้วยการทำซ้ำโมดูลข้อความชัตเตอร์ด้านบน

จากนั้นเปิดโมดูลข้อความที่ซ้ำกันและอัปเดตสิ่งต่อไปนี้:

• CSS Class: ชัตเตอร์ด้านบน

อัปเดต CSS องค์ประกอบหลักโดยแทนที่ "flex-end" ด้วย "flex-start" สำหรับคุณสมบัติ align-ites นี่คือ CSS สุดท้าย:

display:flex;
align-items:flex-start;
justify-content:center;

ด้วย "flex-start" ข้อความจะถูกจัดแนวตามแนวตั้งที่ด้านบนของโมดูล และเนื่องจากข้อความมีความสูงบรรทัดเป็น 0 ข้อความจะแสดงเป็นเส้นแบ่งแสดงเฉพาะครึ่งล่าง

จากนั้นอัปเดตตำแหน่งสัมบูรณ์ด้วยออฟเซ็ตแนวตั้งดังนี้:

• ออฟเซ็ตแนวตั้ง: 50%

ซึ่งจะทำให้โมดูลข้อความชัตเตอร์อยู่เหนือครึ่งล่างของภาพ

ข้อความแยกบนบานประตูหน้าต่างทั้งสองควรจัดตำแหน่งให้ตรงกันอย่างสมบูรณ์แบบ

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

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

ส่วนที่ 2: รหัส

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

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

CSS

วาง CSS ต่อไปนี้ลงในกล่องโค้ดเพื่อให้แน่ใจว่าได้ใส่แท็ก รูปแบบที่ จำเป็นแล้ว:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

CSS นี้ง่ายมาก ทั้งหมดที่มันทำคือใช้การ แปลง: ไม่มี กับบานประตูหน้าต่างภายในคอลัมน์ที่มีคลาส "divi-transform-none" คลาสนี้จะเปิดและปิดด้วย JS เพื่อสร้างแอนิเมชั่น การ เปลี่ยนแปลง: การแปลง 1 วินาที จะกำหนดระยะเวลาของการเปลี่ยนภาพ (หรือภาพเคลื่อนไหว) เป็น 1 วินาทีสุดท้าย

JS

หลังจาก CSS ให้เพิ่ม JQuery ต่อไปนี้ลงในกล่องโค้ดเพื่อให้แน่ใจว่าได้ใส่แท็ก สคริปต์ที่ จำเป็นแล้ว:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

ส่วนแรกของโค้ดจะเพิ่มฟังก์ชันการทำงานที่สลับภาพเคลื่อนไหวการเปลี่ยนรูปแบบชัตเตอร์ เมื่อโฮเวอร์ เมื่อใดก็ตามที่คอลัมน์มีคลาส "shutter-column on-hover Divi-transform-none"

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

ส่วนที่สองของโค้ดเพิ่มฟังก์ชันการทำงานที่สลับภาพเคลื่อนไหวการเปลี่ยนรูปแบบชัตเตอร์ เมื่อคลิก เมื่อใดก็ตามที่คอลัมน์มีคลาส "shutter-column on-click divi-transform-none"

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

ส่วนที่ 3: การออกแบบแอนิเมชั่นชัตเตอร์ข้อความแบบแยกส่วน

การออกแบบ #1

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

เพิ่มคุณสมบัติการเปลี่ยนรูปไปที่ชัตเตอร์ด้านบน

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

หากต้องการเพิ่มการออกแบบการเปลี่ยนรูปแบบให้กับชัตเตอร์ด้านบน ให้เปิดการตั้งค่าโมดูลข้อความชัตเตอร์ด้านบนและอัปเดตสิ่งต่อไปนี้:

• มาตราส่วนการแปลง (X และ Y): 150%
• แปลงแกนแปล Y: -101%
• กำเนิดการเปลี่ยนแปลง: ศูนย์ด้านบน

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

เพิ่มคุณสมบัติการเปลี่ยนรูปไปที่ชัตเตอร์ด้านล่าง

สำหรับชัตเตอร์ด้านล่าง ให้อัปเดตตัวเลือกการออกแบบการแปลงต่อไปนี้:

• มาตราส่วนการแปลง (X และ Y): 150%
• แปลงแกนแปล Y: 101%
• กำเนิดการแปลง: ศูนย์กลางด้านล่าง

เพิ่มคลาสเพื่อปิดใช้งานการออกแบบการแปลงในขั้นต้น

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

เนื่องจากโค้ด CSS ที่กำหนดเองที่เราเพิ่มไว้ก่อนหน้านี้ การออกแบบจึงจะปรากฏโดยไม่มีการออกแบบการแปลงใดๆ

เพิ่มฟังก์ชันการทำงานเมื่อคลิกด้วยคลาสเดียว

ในการเรียกแอนิเมชั่นเดียวกันเมื่อคลิกแทนที่จะเป็นโฮเวอร์ สิ่งที่เราต้องทำคือแทนที่คลาสเดียวในคอลัมน์

ขั้นแรก ทำซ้ำคอลัมน์ 1 ด้วยตัวอย่างการทำงานแรกของเราเมื่อวางเมาส์เหนือ จากนั้นลบคอลัมน์ว่าง ตอนนี้คุณควรมีสองคอลัมน์ที่เหมือนกันโดยมีคลาสและเนื้อหาเหมือนกัน

เปิดการตั้งค่าสำหรับคอลัมน์ 2 และแทนที่คลาส "on-hover" ด้วยคลาส "on-click" นี่คือสิ่งที่สามคลาสสุดท้ายควรเป็น:

• CSS Class: คอลัมน์ชัตเตอร์เมื่อคลิก Divi-transform-none

ผลลัพธ์

การกลับภาพเคลื่อนไหวของชัตเตอร์บน Hover

หากคุณต้องการให้แสดงรูปภาพหลักในตอนแรก แล้วเพิ่มโอเวอร์เลย์เมื่อวางเมาส์เหนือรูปภาพ (ซึ่งกลับเป็นวิธีการทำงานในตอนนี้) คุณสามารถลบคลาส "divi-transform-none" ในคอลัมน์ที่ใช้สำหรับชัตเตอร์ . สิ่งนี้จะให้เอฟเฟกต์ต่อไปนี้แก่คุณ

การออกแบบ #2

ในการสร้างภาพเคลื่อนไหวชัตเตอร์ที่สอง เราสามารถใช้ส่วนก่อนหน้าซ้ำกับภาพเคลื่อนไหวชัตเตอร์แรกของเรา

อัพเดทบานประตูหน้าต่าง

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

• ความเป็นมา: #ffffff
• สีข้อความ: #000000
• โหมดผสมผสาน: หน้าจอ

ผลลัพธ์

การออกแบบ #3

ในการสร้างการออกแบบภาพซ้อนทับภาพเคลื่อนไหวชัตเตอร์ที่สาม ให้ทำซ้ำส่วนก่อนหน้า

เพิ่มรูปภาพใหม่

จากนั้นอัปเดตโมดูลรูปภาพด้วยรูปภาพใหม่

อัพเดทบานประตูหน้าต่าง

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

• เนื้อหาในร่างกาย: d

• พื้นหลัง: rgba(0,0,0,0.9)
• สีข้อความ: #ffffff
• ขนาดข้อความ: 450px (เดสก์ท็อป), 70vw (แท็บเล็ตและโทรศัพท์)
• โหมดผสมผสาน: ทวีคูณ

เปิดการตั้งค่าโมดูลข้อความชัตเตอร์ด้านบนและอัปเดตตัวเลือกการแปลงต่อไปนี้:

• มาตราส่วนการแปลง (X และ Y): 100% (ค่าเริ่มต้น)
• แปลงแกนแปล Y: -101%
• เปลี่ยนแกนหมุน Z: -45deg
• ต้นกำเนิดการแปลง: บนซ้าย

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความชัตเตอร์ด้านล่างและอัปเดตตัวเลือกการแปลงต่อไปนี้:

• มาตราส่วนการแปลง (X และ Y): 100% (ค่าเริ่มต้น)
• แปลงแกนแปล Y: 101%
• เปลี่ยนแกนหมุน Z: -45deg
• ต้นกำเนิดการแปลง: ล่างขวา

ผลลัพธ์

ตัวอย่างเพิ่มเติมและความเป็นไปได้

ตัวอย่างการออกแบบเพิ่มเติมอีกสองสามแบบโดยใช้เทคนิคเดียวกันนี้

นี่คือสิ่งที่คล้ายกับการออกแบบ #2 แต่ไม่มีมาตราส่วนการแปลงบนบานประตูหน้าต่าง นอกจากนี้ยังแสดงให้เห็นว่าเอฟเฟกต์ไลท์บ็อกซ์ยังคงทำงานบนรูปภาพอย่างไร

และนี่คืออีกตัวอย่างหนึ่งที่ใช้การแปลงการแปลงเพื่อเลื่อนบานประตูหน้าต่างในแนวนอน

ผลลัพธ์สุดท้าย

ความคิดสุดท้าย

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!