เทคนิคการทำให้วัตถุขยับเมื่อเลื่อนหน้าจอไปถึง

foot

(บล็อกวันนี้ เป็นด้านเทคนิคนะครับ เหมาะสำหรับคนที่สนใจเขียนโค้ด HTML5 ครับ)

ตอนที่เปิดตัวเว็บเม่น สตูดิโอ, น้อง ฮั้นท์ มาแซวว่าชอบตารางเวลาด้านล่าง มันแร่ดดี

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

แต่พอดูโค้ด scrollReveal พบว่ามันอ้วนเทอะทะไป จริงๆ ผมแค่อยากให้มัน “เปลี่ยน CSS Class” เมื่อ “เอา Mouse scroll ไปถึง” เพราะผมรู้ว่า ถ้าสั่งเปลี่ยน CSS Class ได้ เราไปสั่งใน CSS ให้มัน Animate ได้ สะดวกกว่าสั่งเคลื่อนไหวด้วย jQuery และ CSS Animation บนมือถือก็ลื่นมากด้วย

เลยค้นคำว่า change css class when object appear on scroll

ก็เจอลิงก์ของ CSS Tricks อีกแล้ว ยอมไอ้หมอนี่เลย โค้ดอยู่ที่บล็อก Slide In (as you scroll down) Boxes ซึ่งอ้างถึงปลั๊กอิน Checking if an element is visible on-screen using jQuery

โลกของ Open Source เป็นเช่นนี้เอง ความรู้จากที่หนึ่ง ส่งต่อไปอีกที่หนึ่ง โดยให้เครดิตกัน มันเลยพัฒนาได้เร็ว

ผมเลยขอส่งต่อมั่ง ด้วยการมาแปลงเป็นโค้ดสั้นๆ อ่านง่ายๆ ตามตัวอย่างด้านล่าง (ลองดูผลลัพท์ โดย scroll ในช่องขาวๆ ด้านล่างดูก่อนได้ครับ แล้วไปคลิกอ่านโค้ด ที่ HTML/CSS/JS )

See the Pen Moving when you scroll down. by Menn Studio (@MennStudio) on CodePen.

 

HTML

มีแค่ div 4 ตัว แสดงบาร์ทั้ง 4 (สำหรับคนที่ไม่คุ้น การสั่งคลาส แล้วมีเว้นวรรค คือสั่งให้ก้อนนี้เป็นทั้งสองคลาสนะครับ คือเป็นทั้ง .bar และ .b1)

CSS

สั่งให้ div ทุกก้อนกว้าง 10px ไว้ก่อน แต่ว่าถ้ามีคลาสพิเศษด้านล่าง (คือ .b1.expand) ค่อยเปลี่ยนความกว้างนะ
สังเกตว่ามี transition: width 2s ease; ช่วยสั่งว่า ถ้าเปลี่ยนแปลงความกว้าง (width) เมื่อไหร่ ให้หน่วง 2 วินาทีนะ

JS

ต้องเรียก jQuery ก่อนนะ แล้วใช้ปลั๊กอิน visible ที่เห็นโค้ดมันยุ่งๆ นั่นแหละ (พอดีปลั๊กอินมันเล็กๆ เลยก็อบแปะเลย)

ส่วนของ jQuery จะเริ่มสั่งตอน .scroll คือบอกว่า ให้ดูนะ ตอนที่มีการ scroll ถ้าเป็น visible เมื่อไหร่ (คือวัตถุโผล่มาแล้ว) ให้ใส่คลาส expand ให้ก้อน .bar ด้วย

แต่ถ้าพ้นจอไป (คือไม่เป็น visible ละ) ก็เอาคลาส expand ออก เวลาที่ scroll ใหม่ มันจะได้ขยับใหม่

จบ

ลองเล่นดูครับ ถ้างงถามไว้ในคอมเม้นท์ได้ แต่เวลาตอบ จะตอบเป็นคีย์เวิร์ดให้ไปค้น Google ต่อนะ 😀

works