ใส่ animation on scrolling ให้กับ Blogger

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

เวบที่ทำบน Blogger (เวบนี้) ก็ใช้วิธีตัดแปะเอาเหมือนกัน ผมไปหา Theme ฟรีที่มีความลักษณะและลูกเล่นใกล้เคียงกับที่อยากได้ จากนั้นก็แก้ไข และตัดไปลงไปเป็นอันเสร็จพิธี

จนมาถึงเวบล่าสุดที่เป็น Web Portfolio งาน UX ของผมเองซึ่งก็ทำบน Bloggerเหมือนกัน ใน Versionแรกที่ทำออกมามามันค่อนข้างแห้งๆ บวกกับเวบที่มีเนื้อหาหนักๆ ทำให้ดูไม่น่าสนใจ ผมเลยพยายามมองหา Animation on scrolling เข้ามาช่วยทำให้เวบมันดูไม่น่าเบื่อเกินไป

Animation on scrolling เป็น animation ที่เกิดขึ้นเวลาคุณ Scroll ลงล่างเพื่อดู Content เพิ่มเติม ในขณะที่หน้าจอเลื่อนลง Content จะค่อยๆปรากฏขึ้นมา (progressive discolsure) อาจจะเลื่อนมาจากทางซ้าย ขวาหรือล่างก็ได้ ทำให้ดูลักษณะมีการเล่าเรื่อง

ตัวอย่าง Animation on scrolling

ผมพอรู้มาบ้างว่า Blogger สามารถทำอะไรได้เยอะประมาณนึงจากการลองติดตั้ง Theme เจ๋งๆ ซึ่งถ้าเขียน Code เป็นผมก็จะทำอะไรกับมันได้มากขึ้น ทางลัดสำหรับผมคือหา Theme ที่มันมีอยู่แล้วมาตัดแปะแบบที่ผมถนัด แต่ Animation on scrolling ผมมักจะเห็นแค่ Landing page (หน้าหลักหน้าแรก) หน้าเดียว แต่เวบที่ผมทำผมไม่ได้ต้องการจะเขียนหน้าหลักหน้าแรกด้วยการ Hard Coding หรือเขียน Code เอาดื้อๆ ผมต้องการเอาหน้าปกติที่เขียนจากเมนู Post, หรือ Page มาทำ Landing page โดยใช้วิธี redirect เอาเพื่อให้มีการแก้ไขเปลี่ยนแปลงเนื้อหาภายหลังง่ายๆ

วิธีการ Redirect https://www.blogger.com/blog/post/preview/3944150741357506805/799713612087152485

ผมเลยต้องทำการค้นหาวิธีการ Apply animation on scrolling กับ Post เอง ซึ่ง Blogger นี่ Underdog มาก ไม่ค่อยมีคนใช้ ก็เลยไม่ค่อยมีคนแชร์เรื่องการ Customize แบบที่ผมต้องการมากนัก ผมพยายามหาจนเกือบเลิกไปแล้ว จนกระทั่งมาเปลี่ยน Keyword เป็นประมาณ Reaveal on scroll effect ก็พบคนๆนึงที่แชร์วิธีทำใน Youtube แต่ด้วยความที่ version ของ Blogger ที่เค้าใช้น่าจะเก่ากว่าทำให้ Interface ไม่เหมือนกันเสียทีเดียวต้องใช้วิธีการหาทางอยู่พักนึง จนในที่สุดผมก็ทำให้ Code กากๆที่ผมเอามาตัดแปะ Run และใช้งานได้

📌 วิธีการต้องบอกว่าไม่ยากเลย แต่ก็ต้องพอเดาๆ หรืออ่าน code เป็นประมาณนึง

วิธีทำ

Part ที่ 1 : สร้างหน้าที่จะให้มี Animation

1 ไปที่ https://github.com/livebloggerofficial/Reveal-On-Scroll-Animation จากนั้นก็ Copy source code จากไฟล์ Index.html ตรงส่วน Body สังเกตจากเส้นสีแดง

2. จากนั้นก็แก้ไข Code ในส่วนของ Link image ที่ผมสร้างกรอบสีแดงไว้จะเห็นได้ว่า Link มันจะไม่เกี่ยวข้องกับ Blog เราเท่าไร ให้ทำการ Upload Image ไว้ที่ไหนก็ได้ แล้ว click ขวา เลือก 'Copy image address' มาใส่แทน

URL ของ image ยังเป็นของเดิมต้องเปลี่ยนเป็นรูปที่เราจะใช้สร้าง Animation

Copy URL ของ image ที่ต้องการ ทำได้โดยการอัพโหลดเข้า Blog เราก็ได้แล้ว Copy URL มาใช้

ตัวอย่าง URL ที่ Copy มาแทน src="image/image3.jpg" ทำยังงี้กับรูปอื่นๆที่เราต้องการให้ครบ สามารถลบหรือเพิ่มรูปได้โดย Copy Code ไปใช้

3. จากนั้นสามารถ กด Publish ได้เลย แต่ขั้นตอนยังไม่จบนะ

Part ที่ 2 : ใส่ CSS ให้กับ Theme ของเวบ

ให้ไปที่ Theme จากนั้นให้กดปุ่ม Customize จากนั้นก็ Copy CSS จากที่เดิม https://github.com/livebloggerofficial/Reveal-On-Scroll-Animation มาใส่ใน Blogger ของเรา

เลือก Customize

ที่ เมนู Advanced จะมี Dropdownให้เลือก Add CSS

ช่องสำหรับเอา CSS จาก https://github.com/livebloggerofficial/Reveal-On-Scroll-Animation มาใส่

Copy มาใส่ทั้งชุดได้เลย

ซึ่งใน CSS ด้านบนนี้เราสามารถแก้ๆไขเรื่อง Font Size, Font style, Border ได้จากตรงนี้ หรือสามารถแก้ไขภายหลังได้จากการ Edit HTML ได้เหมือนกัน ผมเองก็ใส่ไปก่อนแล้วค่อยแก้ไขภายหลัง