ไอเดีย สร้าง PRELOADER สำหรับโหลดหน้าเพจ

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

วันนี้แอดมิน รวบรวมไอเดียการสร้าง PRELOADER สำหรับโหลดหน้าเพจ จาก Codepen มาฝากแฟนๆ GDB กันจ้า ไปดูกันว่ามีไอเดียยังไงบ้าง

Loading Micro Animation

เป็น PRELOADER ที่ออกแบบให้เป็นเหมือนเครื่องจักรที่ผลิตเครื่องดื่มบรรจุขวด ออกแบบได้สวยและไม่ซ้ำใคร

See the Pen <a href='http://codepen.io/khadkamhn/pen/ORVNrW/'>Loading Micro Animation</a> by Mohan Khadka (<a href='http://codepen.io/khadkamhn'>@khadkamhn</a>) on <a href='http://codepen.io'>CodePen</a>.

Bookshelf loader

อนิเมชั่นชั้นวางหนังสือที่เรียงรายกันเป็นแถวๆมีเล่มหนังสือโพล่ขึ้นมาและหายไป

See the Pen <a href='http://codepen.io/ikoshowa/pen/qOMvpy/'>#Codevember – Day 6 – Bookshelf loader</a> by Grélard Antoine (<a href='http://codepen.io/ikoshowa'>@ikoshowa</a>) on <a href='http://codepen.io'>CodePen</a>.

ironing

อนิเมชั่นการรีดผ้า เหมาะมากสำหรับเว็บไซต์ที่รับซักรีดต่างๆ

See the Pen <a href='http://codepen.io/pawelqcm/pen/mPYgLE/'>ironing</a> by Pawel (<a href='http://codepen.io/pawelqcm'>@pawelqcm</a>) on <a href='http://codepen.io'>CodePen</a>.

Rainbow Rotating Dots

การสร้างจุดให้มีหลากสีสันเหมือนสีรุ้งให้มีเคลื่อนไหวหมุนวนไปมา

See the Pen <a href='http://codepen.io/nicksheffield/pen/xOAYRL/'>Rainbow Rotating Dots</a> by Nick Sheffield (<a href='http://codepen.io/nicksheffield'>@nicksheffield</a>) on <a href='http://codepen.io'>CodePen</a>.

Sponsered link

Loader a Day (day 2)

เป็นอีกอนิเมชั่นที่น่าสนใจ มีการเปลี่ยนจากหน้าจอ pc ไปเป็น แท็บเล็ตและมือถือ

See the Pen <a href='http://codepen.io/TheDutchCoder/pen/mgswv/'>Loader a Day (day 2)</a> by Reinier Kaper (<a href='http://codepen.io/TheDutchCoder'>@TheDutchCoder</a>) on <a href='http://codepen.io'>CodePen</a>.

Rubik loader

เป็น PRELOADER รูบิกที่บิดวนไปมา

See the Pen <a href='http://codepen.io/FilipVitas/pen/aNLgZz/'>Rubik loader</a> by Filip Vitas (<a href='http://codepen.io/FilipVitas'>@FilipVitas</a>) on <a href='http://codepen.io'>CodePen</a>.

DNA Animation

การใช้ css แสดงถึงโครงสร้าง DNA ที่เคลื่อนไหวไปมา

See the Pen <a href='http://codepen.io/ghost028/pen/KgrZAN/'>DNA Animation</a> by Ghost (<a href='http://codepen.io/ghost028'>@ghost028</a>) on <a href='http://codepen.io'>CodePen</a>.

Project Deadline

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

See the Pen <a href='http://codepen.io/jonathansilva/pen/mEoEVw/'>#2 – Project Deadline – SVG animation with CSS3</a> by Jonathan Silva (<a href='http://codepen.io/jonathansilva'>@jonathansilva</a>) on <a href='http://codepen.io'>CodePen</a>.

SVG Car Drift Loader

PRELOADER การดริฟท์รถ เหมาะที่จะนำไปใช้กับเว็บไซต์รถยนต์ต่างๆ

See the Pen <a href='http://codepen.io/chrisgannon/pen/zqMBXB/'>SVG Car Drift Loader</a> by Chris Gannon (<a href='http://codepen.io/chrisgannon'>@chrisgannon</a>) on <a href='http://codepen.io'>CodePen</a>.

ดูตัวอย่าง PRELOADER กันไปเยอะแล้ว ชอบแบบไหนลองนำไปใช้กับเว็บไซต์ของคุณดูนะค่ะ

ขอบคุณข้อมูล http://photoshopvip.net
ขอบคุณข้อมูล Codepen
เรียบเรียงโดย YUDYMOVEE

Sponsered link

SVG Car Drift Loader

Comments

Related Posts