للحصول على الإصدار المستقر الأخير (الإصدار 2)، انتقل هنا
للحصول على فهم أفضل لكيفية عمل ذلك في الواقع، أشجعك على مراجعة مقالتي حول حيل CSS.
إضافة أنماط في <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 );
}
}المسافة الافتراضية للرسوم المتحركة المضمنة هي 100 بكسل. طالما أنك تستخدم 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، مع خطوة 50 مللي ثانية، لأنه يتم التعامل معها بواسطة CSS، وحتى لا أجعل CSS أطول مما هو عليه بالفعل، قمت بتنفيذ مجموعة فرعية فقط. أعتقد أن هذه يجب أن تغطي معظم الحالات.
إذا لم يكن الأمر كذلك، يمكنك كتابة CSS بسيط يضيف مدة أخرى، على سبيل المثال:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} سيضيف هذا الرمز مدة تبلغ 4000 مللي ثانية متاحة لك لتعيينها على عناصر AOS، أو لتعيينها كمدة عامة أثناء تهيئة البرنامج النصي AOS. لاحظ أن مضاعفة [data-aos][data-aos] - ليس خطأ، بل خدعة، لجعل الإعدادات الفردية أكثر أهمية من الإعدادات العامة، دون الحاجة إلى كتابة "!مهم" قبيحة هناك :)
مثال على الاستخدام:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > تتلاشى الرسوم المتحركة:
الوجه الرسوم المتحركة:
الرسوم المتحركة الشريحة:
تكبير الرسوم المتحركة:
إذا وجدت خطأ ما، أو كان لديك سؤال أو فكرة، يرجى مراجعة دليل مساهمة AOS ولا تتردد في إنشاء إصدارات جديدة.
