saos

ภาพเคลื่อนไหว Svelte บน Scroll

ส่วนประกอบ svelte ขนาดเล็กมากเพื่อทำให้องค์ประกอบของคุณเคลื่อนไหวเมื่อเลื่อน

SAoS ช่วยให้คุณสร้างภาพเคลื่อนไหวหนึ่งครั้งหรือหลายครั้งองค์ประกอบในการเลื่อน คุณสามารถกำหนด "ทริกเกอร์" ด้านบนและด้านล่างและ css ของ div ภายใน (ไม่แนะนำ แต่สามารถช่วยได้ในบางกรณี) ดูด้านล่างการสาธิตวิธีการติดตั้ง และตัวอย่างบางส่วน ?

ในแง่ของประสิทธิภาพ lib นี้ใช้ Intersection Observer สำหรับเบราว์เซอร์ส่วนใหญ่ (น่าเสียดายกับ Internet Explorer ของคุณ)

⚡ การสาธิต

---

วิธีการติดตั้ง

• น

 npm i saos --save-dev

• เส้นด้าย

 yarn add -D saos

หมายเหตุ: Sapper รองรับ libs เป็นการพึ่งพา DEV เท่านั้น หากคุณต้องการใช้ lib นี้เป็นการพึ่งพาปกติของ Sapper ตรวจสอบให้แน่ใจว่าได้นำเข้าเช่นนี้ import Saos from 'saos/src/Saos.svelte'; ไม่เช่นนั้นคุณจะมีปัญหากับ SSR!

วิธีใช้

การใช้งานขั้นพื้นฐาน:

• ขั้นแรกให้นำเข้าแพ็คเกจบน Svelte

 import Saos from "saos" ;

• จากนั้นกำหนดแอนิเมชั่น @keyframes ของคุณเป็น -global- on svelte

 @keyframes -global-from-left {
  0 % {
    transform : rotateX ( 50 deg ) translateX ( -200 vw ) skewX ( -50 deg );
    opacity : 1 ;
  }
  100 % {
    transform : rotateX ( 0 deg ) translateX ( 0 ) skewX ( 0 deg );
    opacity : 1 ;
  }
}

• สุดท้ายให้เพิ่มชื่อคีย์เฟรมโดยไม่มีพารามิเตอร์ -global- และพารามิเตอร์ภาพเคลื่อนไหวอื่นๆ

 < Saos animation = { "from-left 4s cubic-bezier(0.35, 0.5, 0.65, 0.95) both"} >
  < div > < p > animation: from-left </ p > </ div >
</ Saos >

นอกเหนือจากพารามิเตอร์ภาพเคลื่อนไหว คุณสามารถใช้:

• Animation_out -> เพื่อเล่นภาพเคลื่อนไหวเมื่อองค์ประกอบไม่ "มองเห็น" อีกต่อไป (ใช้ด้านบนและด้านล่างเพื่อกำหนดสิ่งนี้) ค่าเริ่มต้น: "none; ความทึบ: 0"
• หนึ่งครั้ง -> หากภาพเคลื่อนไหวจะเล่นเพียงครั้งเดียวหรือหลายครั้ง ค่าเริ่มต้น: false
• top -> ด้านบนของผู้สังเกตการณ์ ใช้ค่าบวกเพื่อเล่นแอนิเมชั่นหลังจากที่มองเห็นด้านบนแล้ว ค่าเริ่มต้น: 0
• ด้านล่าง -> ด้านล่างของผู้สังเกตการณ์ ใช้ค่าบวกเพื่อเล่นภาพเคลื่อนไหวหลังจากมองเห็นด้านล่างแล้ว ค่าเริ่มต้น: 0
• css_observer -> css ของ div ที่เป็นผู้สังเกตการณ์ ไม่แนะนำให้ใช้ แต่อยู่ที่นี่ ? ค่าเริ่มต้น: ""
• css_animation -> css ของ div ที่เป็นภาพเคลื่อนไหว ไม่แนะนำให้ใช้ แต่อยู่ที่นี่ ? ค่าเริ่มต้น: ""

และเราก็มีการจัดส่งแบบโต้ตอบด้วย!

คุณสามารถทำสิ่งเช่น:

 // Create a handler on your script

function handleObserver ( x ) {
  console . info ( x . detail . observing ) ;
}

// Use the `update` event on your html that will be dispatched every time that the `observing` update!

< Saos on : update = { handleObserver } > ... < / Saos >

และมันจะได้ผล! น่าทึ่งใช่ไหมล่ะ? ดูการ์ดใบสุดท้ายในการสาธิตของเรา

และคุณสามารถเห็นการใช้งานมากมายได้ที่นี่

หากคุณขี้เกียจ (เช่นฉัน) ในการสร้างแอนิเมชั่นของคุณเอง ลองดูที่แอนิเมชั่น