Parallax Overview - Google Web Designer

สวัสดีครับ ผมชื่อนิเวช นักพัฒนาซอฟต์แวร์
ของ Google Web Designer

วันนี้ผมจะมาพูดถึงภาพรวม

ของการใช้คอมโพเนนต์พารัลแลกซ์

เพื่อสร้างภาพเคลื่อนไหวพารัลแลกซ์

เมื่อผมเลื่อนหน้าขึ้นหรือลง

ภาพพื้นหน้าและพื้นหลัง

จะเคลื่อนไหวด้วยความเร็วที่ต่างกัน
เพื่อสร้างภาพลวงตาว่าภาพมีความลึก

คอมโพเนนต์พารัลแลกซ์
ต้องใช้เว็บไซต์ของผู้เผยแพร่โฆษณา

เพื่อส่งต่อเหตุการณ์การเลื่อนหน้า
ไปยังโฆษณา

ในการตอบสนองต่อเหตุการณ์การเลื่อน

คอมโพเนนต์พารัลแลกซ์
จะทำให้รูปภาพเคลื่อนไหว

คุณดูตัวอย่างภาพเคลื่อนไหว
พารัลแลกซ์อื่นๆ ได้

ใน "ไฟล์" "สร้างจากเทมเพลต..."

ในหมวดหมู่พารัลแลกซ์
สำหรับ Display & Video 360

ตัวอย่างพารัลแลกซ์จะมีลักษณะดังนี้
เมื่ออยู่ในเบราว์เซอร์

คุณจะเห็นว่ารูปภาพเคลื่อนไหวในแนวตั้ง

และแนวนอนเมื่อผมเลื่อนหน้า

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

ไปที่ "ไฟล์" "สร้าง"

สภาพแวดล้อมของคอมโพเนนต์พารัลแลกซ์
ต้องเป็น Display & Video 360

หากต้องการเพิ่มคอมโพเนนต์
พารัลแลกซ์ลงในโปรเจ็กต์

ให้เปิดแผงคอมโพเนนต์

แล้วลากคอมโพเนนต์พารัลแลกซ์

จากโฟลเดอร์การโต้ตอบลงในพื้นที่งาน

คุณกำหนดค่าคอมโพเนนต์พารัลแลกซ์ได้

โดยไปที่แผงคุณสมบัติ

แล้วคลิกส่วนควบคุมรูปภาพ

หรือดับเบิลคลิกคอมโพเนนต์ก็ได้

เริ่มด้วยการเพิ่มรูปภาพลงใน
ภาพเคลื่อนไหวพารัลแลกซ์

คุณจะเพิ่มรูปภาพได้โดยการลากไฟล์

จากระบบไฟล์ลงในพื้นที่งาน

หรือแผงเลเยอร์

หรือจะคลิกปุ่มเครื่องหมายบวกในแผงเลเยอร์

แล้วเพิ่มรูปภาพจากระบบไฟล์ก็ได้

คุณเรียงลำดับเลเยอร์ได้โดยการลาก

และวางเลเยอร์ในแผงเลเยอร์

ลำดับของเลเยอร์จะบอกว่าเลเยอร์ใด
แสดงอยู่หน้าเลเยอร์อื่น

เลเยอร์ที่สูงกว่าจะแสดงอยู่ด้านหน้า
เลเยอร์ที่ต่ำกว่า

คุณยังแสดงหรือซ่อนรูปภาพได้ด้วย

โดยคลิกบริเวณภาพขนาดย่อ

หรือคลิกไอคอนรูปดวงตา

เพื่อแสดงและซ่อนรูปภาพทั้งหมด

การซ่อนเลเยอร์ช่วยให้ทำงาน
ในเลเยอร์อื่นได้ง่ายขึ้น

เช่น ผมจะซ่อนเลเยอร์ทั้งหมด

ยกเว้นตัวผลิตภัณฑ์ ข้อความ
และใบไม้ใหญ่นี้

กล่องโต้ตอบการตั้งค่ามี 3 แท็บ

เริ่มต้น สิ้นสุด และพรีวิว

คุณจะกำหนดค่า
ภาพเคลื่อนไหวพารัลแลกซ์ได้

โดยวางตำแหน่งแต่ละเลเยอร์
ในจุดที่จะปรากฏขึ้น

ที่ช่วงต้นและช่วงท้ายของภาพเคลื่อนไหว

ตำแหน่งเริ่มต้นคือ
เมื่อคอมโพเนนต์ปรากฏขึ้นในหน้าเว็บ

ส่วนนี้คือตอนที่คอมโพเนนต์
ปรากฏขึ้นเป็นครั้งแรก

และตำแหน่งสิ้นสุดคือ

เมื่อคอมโพเนนต์หายไปจากวิวพอร์ต

มากำหนดค่าตำแหน่งเริ่มต้นกัน

ผมจะซ่อนใบไม้ใหญ่อีกครั้งและจะย้ายส่วนนี้

โดยใช้เมาส์เลื่อนผลิตภัณฑ์มาไว้ตรงกลาง

หรือจะใช้แป้นลูกศรก็ได้

ผมจะกดแป้น Shift ค้างไว้

เพื่อย้ายส่วนนี้ทีละ 10 พิกเซล

หรือจะพิมพ์ลงในแผงคุณสมบัติ
ของเลเยอร์โดยตรงก็ได้

และที่ตำแหน่งสิ้นสุด คุณคัดลอกค่า
จากตำแหน่งเริ่มต้นได้อย่างรวดเร็ว

โดยการคลิกปุ่มจับคู่ตำแหน่งตรงนี้

ขอผมปรับตำแหน่งใบไม้ใหญ่ในตำแหน่งเริ่มต้น
และตำแหน่งสิ้นสุดก่อน

ทีนี้ผมจะกดแป้น Shift ค้างไว้
เพื่อยึดการเคลื่อนไหว

เมื่อผมลากเมาส์

ผมจะย้ายใบไม้นี้ไปไกลๆ ที่ตำแหน่งสิ้นสุด

ผมจะเปิดตัวเลือก "แสดง Ghost"
ในคุณสมบัติขั้นสูง

เพื่อแสดงภาพโปร่งแสงของอีกแท็บหนึ่ง

ซึ่งเป็นแท็บที่คุณไม่ได้แก้ไขอยู่

Ghost มีไว้อ้างอิงและจะไม่แสดงในพรีวิว

หรือในไฟล์ที่เผยแพร่

มาพรีวิวกัน

คุณเลื่อนขึ้นและลงได้

และดูลักษณะการทำงานของเลเยอร์ที่มองเห็นได้
ในอุปกรณ์เคลื่อนที่ตัวอย่าง

คุณคลิกแท็บ "เริ่มต้น" หรือ "สิ้นสุด"
เพื่อแก้ไขไฟล์ต่อได้

ผมจะเปลี่ยนตัวเลือกการค่อยๆ เปลี่ยน
เป็นค่อยๆ เข้า-ออก

และจะทำให้ข้อความ
ค่อยๆ เข้มขึ้นจาก 0.3 เป็น 1

มาพรีวิวอีกครั้งกัน

คุณจะกำหนดความกว้าง
และความสูงของเลเยอร์ด้วยก็ได้

ผมจะเปลี่ยนความกว้างของใบไม้
เป็น 250 พิกเซล

และเนื่องจากสัดส่วนภาพล็อกอยู่

ความสูงก็จะปรับตามโดยอัตโนมัติ

เลเยอร์จะมีขนาดเท่าที่ระบุไว้

ทั้งในจุดเริ่มต้นและจุดสิ้นสุด

หมายความว่าขนาดจะไม่มีการเคลื่อนไหว

เมื่อพอใจกับคอมโพเนนต์แล้ว

ให้คลิก "บันทึก" แล้วคุณจะกลับไปที่

อินเทอร์เฟซปกติของ Google Web Designer

เพื่อไม่ให้เสียเวลา
ผมจะกลับไปที่ไฟล์เทมเพลต

ที่ตั้งค่าภาพเคลื่อนไหวไว้แล้ว

แล้วเราจะไปที่แผงคุณสมบัติ

แล้วไปที่ส่วนระยะการเลื่อนตรงนี้

คุณสมบัติระยะการเลื่อนใช้เพื่อแสดงใน
พื้นที่งาน Google Web Designer เท่านั้น

คุณดูได้ว่าโฆษณาจะมีลักษณะอย่างไร
เมื่อใช้ระยะการเลื่อนที่ต่างกัน

โดยการอัปเดตค่านี้

คุณพรีวิวโฆษณาในเบราว์เซอร์ได้ด้วย

เมื่อพรีวิวในเบราว์เซอร์

หน้าพรีวิวจะจำลองวิธีที่โฆษณา
จะแสดงในหน้าเว็บ

โดยมีเนื้อหาเพียงพอให้คุณเลื่อนขึ้น
และลงจากคอมโพเนนต์

คุณจะเห็นลักษณะของภาพเคลื่อนไหวพารัลแลกซ์

ในบริบทของโฆษณาโดยรวม

เช่น เมื่อมีปุ่ม CTA และการดำเนินการเพื่อออก

ขอขอบคุณที่ติดตามชมครับ