สำหรับเวอร์ชันเสถียรล่าสุด (v2) ไปที่นี่
เพื่อให้เข้าใจได้ดีขึ้นว่าสิ่งนี้ทำงานอย่างไร ฉันขอแนะนำให้คุณตรวจสอบโพสต์ของฉันเกี่ยวกับ CSS-tricks
เพิ่มสไตล์ใน <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> เพิ่มสคริปต์ก่อนแท็กปิด </body> และเริ่มต้น AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > ติดตั้งแพ็คเกจ aos :
yarn add aos@nextnpm install --save aos@nextนำเข้าสคริปต์ สไตล์ และเริ่มต้น AOS:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;เพื่อให้ใช้งานได้ คุณจะต้องตรวจสอบให้แน่ใจว่ากระบวนการสร้างของคุณมีการกำหนดค่าตัวโหลดสไตล์ และรวมกลุ่มทั้งหมดอย่างถูกต้อง หากคุณใช้พัสดุ มันจะทำงานนอกกรอบตามที่ให้ไว้
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos : < div data-aos =" fade-in " > </ div > และปรับพฤติกรรมโดยใช้แอตทริบิวต์ data-aos-* :
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >ดูรายการภาพเคลื่อนไหว การค่อยๆ เปลี่ยน และตำแหน่งจุดยึดทั้งหมดทั้งหมด
นอกจากนี้ยังมีการตั้งค่าที่สามารถใช้ได้เฉพาะตามองค์ประกอบเท่านั้น:
data-aos-anchor - องค์ประกอบที่จะใช้ออฟเซ็ตเพื่อทริกเกอร์ภาพเคลื่อนไหวแทนที่จะเป็นของจริงตัวอย่าง:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >วิธีนี้ทำให้คุณสามารถทริกเกอร์ภาพเคลื่อนไหวบนองค์ประกอบหนึ่งในขณะที่คุณเลื่อนไปยังองค์ประกอบอื่น ซึ่งมีประโยชน์ในการสร้างภาพเคลื่อนไหวองค์ประกอบคงที่
ออบเจ็กต์ AOS ถูกเปิดเผยเป็นตัวแปรร่วม ขณะนี้มีสามวิธีที่สามารถใช้ได้:
init - เริ่มต้น AOSrefresh - คำนวณออฟเซ็ตและตำแหน่งขององค์ประกอบทั้งหมดใหม่ (เรียกว่าการปรับขนาดหน้าต่าง)refreshHard - เริ่มต้นอาร์เรย์ใหม่ด้วยองค์ประกอบ AOS และทริกเกอร์ refresh (เรียกว่าการเปลี่ยนแปลง DOM ที่เกี่ยวข้องกับองค์ประกอบ aos )ตัวอย่างการดำเนินการ:
AOS . refresh ( ) ; ตามค่าเริ่มต้น AOS กำลังเฝ้าดูการเปลี่ยนแปลง DOM และหากมีองค์ประกอบใหม่ใด ๆ ที่โหลดแบบอะซิงโครนัสหรือเมื่อมีบางสิ่งถูกลบออกจาก DOM จะเรียก refreshHard โดยอัตโนมัติ ในเบราว์เซอร์ที่ไม่รองรับ MutationObserver เช่น IE คุณอาจต้องเรียก AOS.refreshHard() ด้วยตัวเอง
วิธี refresh เรียกว่าการปรับขนาดหน้าต่างและอื่นๆ เนื่องจากไม่จำเป็นต้องสร้างร้านค้าใหม่ด้วยองค์ประกอบ AOS และควรเบาที่สุดเท่าที่จะเป็นไปได้
AOS จัดส่งสองเหตุการณ์ในเอกสาร: aos:in และ aos:out เมื่อใดก็ตามที่องค์ประกอบใด ๆ เคลื่อนไหวเข้าหรือออก เพื่อให้คุณสามารถทำสิ่งพิเศษใน JS:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; คุณยังบอกให้ AOS ทริกเกอร์เหตุการณ์ที่กำหนดเองในองค์ประกอบที่ต้องการได้ด้วยการตั้งค่าแอตทริบิวต์ data-aos-id ดังนี้
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >จากนั้นคุณจะสามารถฟังเหตุการณ์ที่กำหนดเองได้สองเหตุการณ์:
aos:in:super-duperaos:out:super-duperบางครั้งภาพเคลื่อนไหวในตัวอาจไม่เพียงพอ สมมติว่าคุณต้องการหนึ่งกล่องเพื่อให้มีภาพเคลื่อนไหวที่แตกต่างกันขึ้นอยู่กับความละเอียด ต่อไปนี้คือวิธีที่คุณสามารถทำได้:
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}จากนั้นใช้ใน HTML:
< div data-aos =" new-animation " > </ div >องค์ประกอบนี้จะทำให้เคลื่อนไหวได้เฉพาะความทึบบนอุปกรณ์เคลื่อนที่ แต่จากความกว้าง 768 พิกเซล ก็จะเลื่อนจากขวาไปซ้ายด้วย
เช่นเดียวกับภาพเคลื่อนไหวที่คุณสามารถเพิ่มการค่อยๆ เปลี่ยนแบบกำหนดเองได้:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}ระยะห่างเริ่มต้นสำหรับภาพเคลื่อนไหวในตัวคือ 100px ตราบใดที่คุณใช้ SCSS คุณสามารถแทนที่มันได้:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; อย่างไรก็ตาม คุณต้องกำหนดค่ากระบวนการสร้างของคุณเพื่ออนุญาตให้นำเข้าสไตล์จาก node_modules ล่วงหน้า
ใช้ animatedClassName เพื่อเปลี่ยนพฤติกรรมเริ่มต้นของ AOS เพื่อใช้ชื่อคลาสที่อยู่ภายใน data-aos เมื่อเลื่อน
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; องค์ประกอบด้านบนจะมีสองคลาส: animated และ fadeInUp เมื่อใช้การตั้งค่าทั้งสามแบบข้างต้นร่วมกัน คุณควรจะสามารถรวมไลบรารีภาพเคลื่อนไหว CSS ภายนอกใดก็ได้
ไลบรารีภายนอกไม่สนใจสถานะภาพเคลื่อนไหวก่อนภาพเคลื่อนไหวจริงมากนัก ดังนั้น หากคุณต้องการให้องค์ประกอบเหล่านั้นไม่ปรากฏก่อนที่จะเลื่อน คุณอาจต้องเพิ่มสไตล์ที่คล้ายกัน:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayระยะเวลาและความล่าช้ายอมรับค่าตั้งแต่ 50 ถึง 3000 ด้วยขั้นตอน 50ms เนื่องจากค่าเหล่านั้นได้รับการจัดการโดย CSS และเพื่อไม่ให้ css ยาวเกินกว่าที่เป็นอยู่แล้ว ฉันจึงใช้งานเพียงชุดย่อยเท่านั้น ฉันเชื่อว่าสิ่งเหล่านั้นควรครอบคลุมกรณีส่วนใหญ่
ถ้าไม่เช่นนั้น คุณสามารถเขียน CSS ธรรมดาที่จะเพิ่มระยะเวลาอื่นได้ เช่น:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} รหัสนี้จะเพิ่มระยะเวลา 4,000 มิลลิวินาทีเพื่อให้คุณตั้งค่าบนองค์ประกอบ AOS หรือเพื่อตั้งเป็นระยะเวลารวมในขณะที่เริ่มต้นสคริปต์ AOS โปรดสังเกตว่า double [data-aos][data-aos] - ไม่ใช่ข้อผิดพลาด แต่เป็นกลอุบายที่จะทำให้การตั้งค่าส่วนบุคคลมีความสำคัญมากกว่าระดับโลกโดยไม่จำเป็นต้องเขียน "!important" ที่น่าเกลียดที่นั่น :)
ตัวอย่างการใช้งาน:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > ภาพเคลื่อนไหวจางลง:
พลิกภาพเคลื่อนไหว:
ภาพเคลื่อนไหวสไลด์:
ภาพเคลื่อนไหวแบบซูม:
หากคุณพบจุดบกพร่อง มีคำถามหรือแนวคิด โปรดตรวจสอบคู่มือการมีส่วนร่วมของ AOS และอย่าลังเลที่จะสร้างปัญหาใหม่
