اظهار العنصر بشكل تدريجي عند فتح الصفح في css

Mohammed Hhhh · 22 سبتمبر 2022

الحين انا لاحظت ان بعض المواقع تعمل انميشن لل عانصر لما توصل عندها scroll كيف ممكن اسوي هذا الشيء و شكرا

عمر قره محمد · 22 سبتمبر 2022

نقوم بفعل ذلك باستخدام JS، حيث نقوم بفحص مكان العنصر اثناء عمل الـ scrolling وذلك بإضافة eventListener على الـ scrolling وعند الوصول للمكان المناسب تقوم بإضافة الخاصيات التي نريدها للعنصر، لاحظ المثال التالي والذي نضيف فيه animation لكل عنصر من النوع section في الصفحة.

نضيف الـ style الخاص بنا في البداية :

section{
  transform: translateY(60%);
  opacity: 0;
}

@keyframes slideFromTheTop {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

ثم نقوم بإضافة أكواد الجافاسكريبت :

// section نقوم بإحضار كل العناصر من النوع
const sections = document.getElementsByTagName("section");

// بالشكل التالي scroll للـ  EventListener نقوم بإضافة  
document.addEventListener("scroll", () => {
  // scroll عند كل clientHeight نتحقق من الـ 
  // وهو عبارة عن ارتفاع شاشة العرض
  const clientHeight = document.documentElement.clientHeight;
  
  // section نقوم بالدوران في حلقة على العنصار من النوع
  for (let index = 0; index < sections.length; index++) {
    
    // index حسب رقمه  sections نحضر العنصر من الـ 
    const section = sections[index];
    // getBoundingClientRect عبر وظيفة جاهزة في جافاسكريبت تسمى y, bottom نحضر الـ
    // لاحظ الصورة في الاسفل y, bottom للاطلاع على الـ 
    const { y, bottom } = section.getBoundingClientRect();
	
    // تكون صحيحة عندما يكون العنصر ظاهر في الشاشة bottom < 0
    // animation تحدد المقدرار الذي سيظهر من العنصرب قبل عمل الـ  y < clientHeight + 160
    if (y < clientHeight + 160 || bottom < 0) {
      // الخاص بنا للعنصر animation عند تحقق الشرط نقوم بإضافة الـ
      section.style.animation =
        "1s ease-in-out  0s 1 normal forwards running slideFromTheTop";
    }
  }
});

الخاصية getBoundingClientRect تعطيك كل من هذه المعلومات عن العنصر :

تعرف أكثر عن الـ animation من هذه المقالة :

تعرف أكثر على الخاصية getBoundingClientRect من هنا.

علي عبد محسن · 22 سبتمبر 2022

يمكن عمل animation لعنصر ما عندما يعمل المستخدم scroll ويصبح العنصر في مجال الرؤية داخل الصفحة viewport من خلال css و javascript.

أولا: ننشئ مراقب observer ونقوم بربطه بالعنصر المستهدف

ثانياً: ننشئ التنسيق والحركة المطلوبين من خلال css

ثالثا: نتحكم في بدء الحركة وإيقافها من خلال صنف css يتضمن تعريف الحركة المطلوبة بواسطة animation, transition, transform.. الخ

...
/* CSS */
.square {
    width: 200px;
    height: 200px;
    background: teal;
    border-radius: 8px;
    opacity: 0;
    /* العنصر مخفي قبل أن يصبح في مجال الرؤية */

}


.square-transition {
    /* تعريفات الحركة */

    opacity: 1;
    /* إظهار العنصر  */
    transform: translate(50%);
    transition: opacity 1.5s ease, transform 1.5s ease;

}
...
<body >

<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<div class="square-wrapper">
    <!-- scroll العنصر الذي نريد تحريكه عند عمل  -->
    <div class="square square-transition"></div>
</div>

<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<p>scroll </p>
<script>

const square = document.querySelector('.square');// الوصول على العنصر 
square.classList.remove('square-transition');// في كانت الحركة نشطة نوقفها

// نقوم بإنشاء المراقب 
const observer = new IntersectionObserver(entries => { 
  entries.forEach(entry => { //scroll حلقة تكرار للمرور على العناصر عندما نعمل
    if (entry.isIntersecting) { // أذا الصور في ظاهر للمستخدم
      square.classList.add('square-transition'); // نفعل الحرمة المرتبة بهذا الصنف من خلال إضافته للعنصر
      return;
    }
    square.classList.remove('square-transition'); // إيقاف الحركة
  });
});

observer.observe(document.querySelector('.square-wrapper')); // تشغيل المراقب وإسناد نطاق عمله على العنصر الحاوي للعنصر المستهدف بالحركة
</script>
</body>

Adnane Kadri · 23 سبتمبر 2022

يتم في هذا في الغالب توظيف مفهوم مراقبات التقاطع Intersection observers بشكل أو بآخر.

يستعمل البعض على سبيل المثال اطر عمل ومكتبات من مثل WOW.js او Animate.css أو Modernizr أو AOS (Animate on scroll) وغيرها من هاته الأطر والمكتبات.

أجد استعمال الأخير اسهل وابسط، يتم التثبيت اما عن طريق تضمين الملفات المصدرية:

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

أو عن طريق مدير الحزم npm:

npm install --save aos@next

ثم تهيئة المكتبة:

AOS.init();

ثم لن يكون عليك إلا وصف الخواص التي تتحكم في هاته الحركيات وارفاقها بالقيم المناسبة.

اعرف أكثر عن التحريك في css > إظهار المحتوى أثناء التمرير

اظهار العنصر بشكل تدريجي عند فتح الصفح في css

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

علي عبد محسن

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية