Scrollmagic: การออกแบบเว็บที่สนุก
สารบัญ:
ใน การออกแบบเว็บ เทรนด์ก็เหมือนกับสไตล์ที่ถูกนำมาใช้เพื่อทำให้ไซต์ที่ได้รับการยอมรับจากผู้ใช้เป็นปกติในช่วงเวลาชั่วคราว ส่วนหนึ่งของแนวโน้มจนถึงปี 2559 และเห็นได้ชัดว่าจะยังคงตั้งค่าเสียงในปี 2560 เป็น ภาพเคลื่อนไหว และส่วนยาวที่มีการ เลื่อนจำนวนมาก
มันไม่ได้เป็นความลับที่สไตล์นี้ค่อนข้างน่าสนใจและสนุกสำหรับผู้ใช้ด้วยภาพเคลื่อนไหวที่เราสามารถทำให้การนำทางเว็บไซต์ใช้งานง่ายและสนุกสนานตราบเท่าที่พวกเขาจะใช้ดี ด้วยเหตุนี้เราจึงสร้างบทช่วยสอนเพื่อรวมการเลื่อนภาพเคลื่อนไหวบน เว็บไซต์ ของคุณโดยใช้ปลั๊กอิน jQuery ScrollMagic
ScrollMagic: การออกแบบเว็บที่สนุกสนาน
ScrollMagic เป็นห้องสมุดที่สร้างขึ้นใน จาวาสคริปต์ เพื่อให้เกิดการโต้ตอบเมื่อมีการย้ายเว็บไซต์ มันเป็นการเขียนที่สมบูรณ์ของ Superscrollorama รุ่นก่อนและสถาปัตยกรรมนั้นใช้ปลั๊กอินที่ให้การปรับแต่งและขยายได้ง่าย
มันเหมาะถ้าเราต้องการใช้สิ่งต่อไปนี้:
- ภาพเคลื่อนไหวขึ้นอยู่กับตำแหน่งหรือการกระจัดของไซต์ทริกเกอร์แอนิเมชันหรือซิงโครไนซ์กับการเคลื่อนไหวของการเลื่อนเพิ่มเอฟเฟ็กต์พารัลแลกซ์โดยไม่ต้องใช้ความพยายามมากสร้างเพจที่มีการเลื่อนแบบไม่มีที่สิ้นสุด
คุณสมบัติ ScrollMagic
- ประสิทธิภาพที่ ดีที่สุดมันเบายืดหยุ่นและสามารถขยายได้การจัดการเหตุการณ์และ การ เขียนโปรแกรม เชิงวัตถุ รองรับ การ ออกแบบ เว็บแบบปรับ ได้สนับสนุนการเคลื่อนที่ ทั้งสองทิศทาง (แนวนอนและแนวตั้ง) รองรับการเคลื่อนไหวภายในคอนเทนเนอร์ (div) มันทำงานได้อย่างสมบูรณ์แบบสำหรับ เบราว์เซอร์: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+ ในพื้นที่เก็บข้อมูล GitHub มีเอกสารรายละเอียดและตัวอย่างแอปพลิเคชันมากมาย
รับ ScrollMagic
มันสามารถหาได้ในหลากหลายวิธี
1: GitHub
git clone git: //github.com/janpaepke/ScrollMagic.git
2: Bower
ซุ้มติดตั้ง scrollmagic
3: ตัวจัดการแพ็กเกจโหนด
npm ติดตั้ง scrollmagic
4: CDN
cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
คุณสามารถอ่านวิธีปรับแต่งการออกแบบอีเมลใน Outlook ได้ด้วยตนเอง
ติดตั้งและใช้งาน
การติดตั้งนั้นง่ายมากเรารวมไฟล์เคอร์เนลไว้ในไฟล์ html ที่เราต้องการใช้เท่านั้น
;
สำหรับการใช้งานปลั๊กอินนั้นมีรูปแบบการออกแบบที่เน้นการควบคุมโดยเพิ่มฉากหนึ่งฉากขึ้นไป ฉากเหล่านี้ใช้เพื่อกำหนดสิ่งที่เกิดขึ้นในตู้คอนเทนเนอร์เมื่อพวกเขาย้ายไปยังจุดที่กำหนด
นี่จะเป็นตัวอย่างพื้นฐาน:
// init คอนโทรลเลอร์ var controller = ใหม่ ScrollMagic.Controller (); // สร้างฉากใหม่ ScrollMagic.Scene ({ระยะเวลา: 100, // ฉากควรอยู่ในระยะเลื่อน 100px ออฟเซ็ต: 50 // เริ่มฉากนี้หลังจากเลื่อน 50px}).setPin ("# my-sticky- องค์ประกอบ ") // ปักหมุดองค์ประกอบสำหรับช่วงเวลาที่เกิดเหตุ. addTo (ตัวควบคุม); // กำหนดฉากให้กับคอนโทรลเลอร์
ตัวอย่างขั้นสูงจะบรรลุผลการชดเชยหลายรหัสแหล่งที่มาของมันจะเป็น:
$ (ฟังก์ชั่น () {// รอเอกสารพร้อม // คอนโทรลเลอร์คอนโทรลเลอร์ var คอนโทรลเลอร์ = ใหม่ ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, ง่ายดาย: Linear.easeNone}); // สร้างฉาก var scene = ใหม่ ScrollMagic.Scene ({triggerElement: "#multiDirect", ระยะเวลา: 400, offset: 250}).setTween (ทวีต).setPin ("# animate") addIndicators ({ชื่อ: "ปรับขนาด"}) // เพิ่มตัวบ่งชี้ (ต้องใช้ปลั๊กอิน). เพิ่มไปยัง (ตัวควบคุม); / / ตัวควบคุมเริ่มต้นแนวนอน var controller_h = ใหม่ ScrollMagic.Controller ({แนวตั้ง: เท็จ}); // สร้าง tween แนวนอนทวี tween_h = TweenMax.to ("# animate", 0.5, {การหมุน: 360, ความง่ายในการ: Linear.easeNone}); // สร้างฉาก var scene_h = ScrollMagic.Scene ใหม่ ({ระยะเวลา: 700}).setTween (tween_h) setPin ("# animate").addIndicators ({name: "หมุน"}) // เพิ่มตัวบ่งชี้ (ต้องใช้ปลั๊กอิน).addTo (controller_h);});
คุณสามารถค้นหาตัวอย่างเพิ่มเติมได้ด้วยซอร์สโค้ดในเอกสารประกอบปลั๊กอิน
เราขอแนะนำให้คุณทำการติดตั้ง Windows 10 โดยใช้ USB stick ได้อย่างไร
