مكتبة AOS (Animate On Scroll): تخصيص الحركات بسهولة

لست بحاجة إلى إطار عمل ثقيل لصنع موقع جميل وتفاعلي. مع HTML نظيف وCSS حديث
وأداة خفيفة مثل AOS (Animate On Scroll)، ستنشر صفحات سريعة وجذابة
بلمسة فاخرة من دون تضخيم الشيفرة. فكّر كم من المواقع تراها يوميًا تبدو ثابتة ومسطّحة—
وربما مملة قليلًا. تخيّل صفحتك الرئيسية: مجرد تلاشي لطيف، دوران ناعم أو انزلاق بسيط
كفيل بأن يميّز تصميمك فورًا. سيشعر الزائر أن الموقع حيّ ويتجاوب—وهذا التفصيل الصغير
يجعل المستخدم يتوقف عن التمرير ويلتفت للمحتوى.

إضافة لمسة خفيفة من الحركات المرتبطة بالتمرير تغيّر الانطباع كليًا. فجأةً يبدو التخطيط مقصودًا وحديثًا،
وتبدو علامتك أكثر صقلًا، ويصبح المحتوى ذا إيقاع وتدفّق بدل تراصّه في كتل. والأفضل؟
AOS خفيف وسهل التثبيت للغاية ولا يتطلب إتقان إطار جافاسكريبت ضخم.
إنها من الأدوات التي تمنحك خلال عشر دقائق فقط نتيجة تبدو كأنها أسابيع من تصميم الحركة المخصص.

إذا كان موقعك ما يزال يبدو “جامدًا” مقارنةً بالمنافسين، فهذه فرصة التحسين الأسهل.
أضِف AOS، جرّب بعض الحركات، وراقب كيف يكتسب معرض أعمالك أو مدونتك أو متجرك إحساسًا فاخرًا بسرعة.
تحدَّ نفسك: قدّم للزوار أكثر من معلومات—قدّم تجربة لا تُنسى.

Add CSS to your website header

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks