ชนิดทำหน้าผลงานที่มี Flash บนเว็บไซต์ของคุณได้กลายเป็นของล้าสมัย วันนี้กับเครื่องได้เร็วขึ้นและเบราว์เซอร์รุ่นใหม่จริงๆสามารถเตะตูดบางคนที่มี Javascript และ CSS JQuery มีวิธีการอย่างมากที่จะจัดการกับผลกระทบบางส่วน ภาพเคลื่อนไหวทั้งหมดเกิดจากวิธีการที่ฐานที่เรียกว่า "ภาพเคลื่อนไหว" เคลื่อนไหวมัน tweens คุณสมบัติขององค์ประกอบ DOM เพื่อให้เรื่องยาวสั้นจะดูที่นี้
ดังนั้นคุณได้คลิกไปแล้วและเห็นใช่มั้ย? ตกลงถ้าคุณดูรหัสที่มันค่อนข้างง่าย
$ (เอกสาร). พร้อม (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". info_container") show (); $ ("div.portfolio_div"). โฉบ (function () { . $ (นี้) พบ ("info_container.") เคลื่อนไหว ({ชั้น: "0px"}, {ระยะเวลา: 400, บรรเทา: hover_in_easing}). } ฟังก์ชั่น () { . $ (นี้) พบ ("info_container.") เคลื่อนไหว ({ชั้น: "100px"}, {ระยะเวลา: 500, บรรเทา: hover_out_easing}). }); / / 100 พิกเซลคือขนาดของหน้ากาก });
โดยจะใช้ฟังก์ชั่นภาพเคลื่อนไหวให้เคลื่อนไหวหน้ากากมากกว่าภาพที่จะถูกเก็บไว้ซ่อนไว้โดยการวางตำแหน่งที่ค่อนข้าง และด้วยการทำให้สบายปลั๊กอินเราบรรลุบางผลเย็นของตีกลับเมื่อคุณเลื่อนออกจากภาพ คุณสามารถใส่ HTML ใด ๆ ภายใน info_container องค์ประกอบ DIV ตราบใดที่มันไม่ได้ไปไกลกว่าเส้นขอบ ดูที่สไตล์และคุณจะพบว่ามันเป็น gramatical คุณสามารถกำหนดขนาดชั้นเรียนโดยการปรับเปลี่ยน div
แรงบันดาลใจ: http://dibusoft.com/portfolio
ความเห็นล่าสุด