พอดีว่าได้ไอเดียจาก TED.com เห็นในหน้าแรกมี Highlight คล้ายๆ ว่าจะเป้น content พอเอาเมาสืไปวางก้มี hover effect อีก เข้าท่าดี เลยอยากลองทำดูบ้าง ถึงจะไม่รู้วธีก็ตาม
เริ่มจากคำถามของเว็บนี้ คล้ายๆกับที่ผมอยากได้พอดี
What’s the name of jQuery plugin which auto arranges div/image elements on page?
จากที่หาข้อมูลมาได้ และที่ถูกใจผม ก็มีตามนี้ (ยังไม่ได้ลองแกะโค้ด)
jQuery Masonry (DEMO)
โค้ดสั้นๆ ปรับแต่งได้หลายแบบ ใช้ได้ทั้งภาพ ข้อความ วิดีโอ
http://masonry.desandro.com/demos/basic-single-column.html
Seamless Responsive Photo Grid (DEMO)
เน้นรูปภาพ แต่น่าจะปรับแต่งให่ใช้กับข้อความได้ด้วย
http://css-tricks.com/seamless-responsive-photo-grid/
Isotope (DEMO)
ตัวนี้ดุคล้าย jQuery Masonry มาก แต่ลูกเล่นการเคลื่อนไหวเยอะกว่า เจ่งกว่ามาก
http://isotope.metafizzy.co/index.html
Automatic Image Montage with jQuery (DEMO)
ตัวนี้ถูกใจผมมาก เพราะมันคล้าย Blogger Dynamic View ขาดไปแค่การ Hover และ Link บนรูป ถ้าเอามาโมดีๆก็น่าจะใช้งานได้
http://tympanus.net/codrops/2011/08/30/automatic-image-montage/
Sponsor Flip Wall With jQuery & CSS (DEMO)
หน้าตาอาจจะไม่เกี่ยวกับการจัดหน้าเว้บ แต่ผมชอบตอนคลิ๊กเปิดรูป อาจจะเอามาใช้คล้ายๆกับ TED ก็ได้
http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
No comments: