วิธีเพิ่มแอนิเมชั่น Grid Staggering ให้กับแกลเลอรีรูปภาพใน Divi

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

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

แอบมอง

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

และนี่คือ 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

วิธีเพิ่มแอนิเมชั่นที่ส่ายไปยังแกลเลอรีรูปภาพ Divi

ส่วนที่ 1: การออกแบบเค้าโครงหน้าแกลเลอรี

มาตรา

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

• ไล่ระดับพื้นหลังซ้ายสี: #d915b5
• ไล่สีพื้นหลังด้านขวา: #000000
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 25%

ใต้แท็บการออกแบบ ให้อัปเดตการเติม:

• ช่องว่างภายใน: 0px บน, 0px ล่าง, 0px ซ้าย, 0px ขวา

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

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

แถวสำหรับชื่อหน้า

ภายในส่วน ให้เพิ่มแถวหนึ่งคอลัมน์ นี้จะถือชื่อหน้าของเรา

เปิดการตั้งค่าแถวและอัปเดตการเติม:

• ช่องว่างภายใน: บน 15px, ด้านล่าง 15px

โมดูลข้อความชื่อเรื่อง

ในการสร้างชื่อหน้า ให้เพิ่มโมดูลข้อความในแถว/คอลัมน์

จากนั้นอัปเดตเนื้อหาเนื้อหาด้วยหัวข้อ H1 ต่อไปนี้:

<h1>Gallery</h1>

ภายใต้การตั้งค่าการออกแบบข้อความ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของหัวเรื่อง: Poppins
• การจัดตำแหน่งข้อความหัวเรื่อง: center
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 100px (เดสก์ท็อป), 80px (แท็บเล็ต), 60px (โทรศัพท์)

แถวสำหรับโมดูลแกลเลอรี

ในส่วนเดียวกัน ให้สร้างแถวหนึ่งคอลัมน์ใหม่ซึ่งจะเก็บโมดูลแกลเลอรี

เปิดการตั้งค่าแถวและกำหนดพื้นหลังสีดำ:

• สีพื้นหลัง: #000000

ภายใต้การตั้งค่าการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 95%
• ความสูงขั้นต่ำ: 80vh
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• กล่องเงาตำแหน่งแนวนอน: 0px
• ความแรงของการกระจายเงาของกล่อง: 70px
• เงาสี: #000000

ส่วนที่ 2: การออกแบบโมดูลแกลเลอรี

สุดท้าย เราก็พร้อมที่จะเพิ่มและออกแบบโมดูลแกลเลอรีแล้ว ในการสร้างแกลเลอรี ให้เพิ่มโมดูลแกลเลอรีใหม่ลงในแถว

รูปภาพ

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

เมื่อรูปภาพถูกอัปโหลดไปยังแกลเลอรีแล้ว ให้อัปเดตสิ่งต่อไปนี้:

• จำนวนภาพ: 25
• แสดงชื่อและคำบรรยาย: NO
• แสดงเลขหน้า: ใช่

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

การออกแบบการวางซ้อนและการแบ่งหน้า

ใต้แท็บการออกแบบ ให้อัปเดตการออกแบบโอเวอร์เลย์:

• สีไอคอนซ้อนทับ: #ffffff
• สีพื้นหลังซ้อนทับ: rgba(217,21,181,0.55)
• ไอคอนโอเวอร์เลย์: ไอคอนบวก (ดูภาพหน้าจอ)

• การจัดตำแหน่งข้อความการแบ่งหน้า: Center
• ขนาดข้อความเลขหน้า: 2em
• ความสูงของเส้นแบ่งหน้า: 2em
• ช่องว่างภายใน: บน 10px ล่าง 10px ซ้าย 5px ขวา 5px

จัดแต่งทรงผมขั้นสูง

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

ขั้นแรก ให้เพิ่ม CSS บางส่วนลงในรายการแกลเลอรีดังนี้:

แกลเลอรีรายการ CSS (เดสก์ท็อป)

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

คลังภาพ CSS รายการ (แท็บเล็ต)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

แกลลอรี่ รายการ CSS (โทรศัพท์)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

สังเกตความกว้างของแต่ละรายการในแกลเลอรีที่เปลี่ยนแปลงไปในแต่ละอุปกรณ์ ความกว้าง 20% บนเดสก์ท็อปจะสร้าง 5 ภาพต่อแถว ความกว้าง 25% บนแท็บเล็ตจะสร้าง 4 ภาพต่อแถว และความกว้าง 50% บนโทรศัพท์จะสร้าง 2 ภาพต่อแถว

ถัดไป นำเส้นขอบของการแบ่งหน้าออก แต่เพิ่ม CSS ต่อไปนี้ลงในช่อง Gallery Pagination:

border-top: 0px !important;
padding-top: 20px; 

สุดท้าย เพิ่มสีที่กำหนดเองและน้ำหนักแบบอักษรให้กับลิงก์การแบ่งหน้าที่ใช้งานอยู่:

color: #d915b5 !important;
font-weight: bold;

ก่อนที่เราจะบันทึก ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาส CSS ต่อไปนี้ในโมดูลแกลเลอรี:

• CSS Class: et-anime-gallery

ส่วนที่ 3: การเพิ่มเอฟเฟกต์แอนิเมชั่นที่น่าทึ่งให้กับแกลเลอรีด้วย JQuery และ Anime.js

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

เมื่อต้องการทำเช่นนี้ เพิ่มโมดูลโค้ดภายใต้โมดูลแกลเลอรี

CSS

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

/*hide prev and next pagination links*/  
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  } 

ห้องสมุด Anime.js

ใต้แท็กสไตล์สิ้นสุด ให้วาง src ต่อไปนี้พร้อมกับแท็กสคริปต์เพื่อเรียกไลบรารี anime.js เพื่อให้เราสามารถใช้สำหรับ JavaScript/Jquery ด้านล่างได้

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

สคริปต์ควรมีลักษณะเช่นนี้ ...

JQuery

ใต้สคริปต์ที่เรียกไลบรารี anime.js ให้วาง JQuery ต่อไปนี้แล้วใส่แท็กสคริปต์ที่จำเป็น

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        opacity: [0, 1],
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#d915b5", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

ผลสุดท้าย

กำลังอัปเดตแกลเลอรีและโค้ด

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

var fromNum = pageNum*25-25;

สำหรับสิ่งนี้…

var fromNum = pageNum*20-20;

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

grid: [5, 5]

สำหรับสิ่งนี้…

grid: [4, 5]

นอกจากนี้ คุณสามารถเปลี่ยนค่าคุณสมบัติแอนิเมชั่นได้ตามต้องการ ตัวอย่างเช่น หากคุณต้องการเปลี่ยนสีของแอนิเมชั่นพื้นหลังรายการแกลเลอรี คุณสามารถอัปเดตสิ่งต่อไปนี้:

background: ["#000", "#d915b5", "#000"]

สำหรับสิ่งนี้…

background: ["#000", "#ffffff", "#000"]

วิธีนี้จะเปลี่ยนสีพื้นหลังสีชมพูเป็นสีขาวระหว่างภาพเคลื่อนไหว

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

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

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

ไชโย!