تحريك العناصر عند ظهورها على الصفحة بأستعمال مكتبة "AOS.JS" استعمال هذه المكتبة بسيط جدا . كل ما عليك فعله هو: أولا: استيراد المكتبة: بعد انشاء صفحة الhtml قم باضافة السطر التالي داخل عنصر <head> : كود HTML: <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" /> اضف ايضا في نهاية عنصر <body> السطر التالي: كود: <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> ثانيا: تهيئة المكتبة: المكتبة بحاجة لسطر من الجافاسكريبت لتجهز للعمل . قم بانشاء عنصر <script> في نهاية عنصر <body> و هو : كود: AOS.init(); ثالثا: تحديد العناصر التي تريد تحريكها : يمكن تحديد العناصر التي تريد أن تتحرك عند ظهورها من خلاص اضافة خاصية 'attribute' الى العنصر و هي : data-aos ثم تحدد نوع الحركة بداخلها . مثلا كود HTML: <h1 data-aos="zoom-out "></h1> "سيظهر العنصر بالتدريج بطريقة التكبير." كود HTML: <h1 data-aos="fade-in"></h1> سيظهر العنصر بالانتقال من الشفاف الى الواضحهناك خصائص أخرى يمكن اضافتها للتحكم في تحريك العنصر. مثلا: data-aos-duration : مدة التحريك . data-aos-delay : تأخير التحريك data-aos-once : تشغيل التحريك مرة واحدة فقط الكود كامل : كود HTML: <!DOCTYPE html> <html dir="rtl"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title> AOS </title> <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> </head> <body> <h1 data-aos="fade-in">مكتبة AOS</h1> <h4 data-aos="zoom-in" data-aos-delay="500">الخيارات</h4> <ul data-aos="fade-in" data-aos-delay="1000" class="options"> <li data-aos="fade-right">الخيار رقم 1</li> <li data-aos="fade-left">الخيار رقم 2</li> <li data-aos="fade-right">الخيار رقم 3</li> <li data-aos="fade-left">الخيار رقم 4</li> <li data-aos="fade-right">الخيار رقم 5</li> <li data-aos="fade-left">الخيار رقم 6</li> <li data-aos="fade-right">الخيار رقم 7</li> <li data-aos="fade-left">الخيار رقم 8</li> <li data-aos="fade-right">الخيار رقم 9</li> <li data-aos="fade-left">الخيار رقم 10</li> <li data-aos="fade-right">الخيار رقم 11</li> <li data-aos="fade-left">الخيار رقم 13</li> <li data-aos="fade-right">الخيار رقم 15</li> <li data-aos="fade-left">الخيار رقم 16</li> <li data-aos="fade-right">الخيار رقم 17</li> <li data-aos="fade-left">الخيار رقم 18</li> <li data-aos="fade-right">الخيار رقم 19</li> <li data-aos="fade-left">الخيار رقم 20</li> </ul> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> <script> AOS.init(); </script> </body> </html> كود الـ CSS : كود: html, body { max-width: 100%; overflow-x: hidden; background-color: rgb(7, 2, 20); color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; } .options { list-style: none; padding: 20px; } .options li { padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
