اذهب إلى المحتوى
  • 0

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

Mohammed Hhhh

السؤال

Recommended Posts

  • 0

نقوم بفعل ذلك باستخدام 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 تعطيك كل من هذه المعلومات عن العنصر :

1.thumb.png.96b790eb8bbc282803b7011b05ba70b6.png


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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن عمل 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>
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يتم في هذا في الغالب توظيف مفهوم مراقبات التقاطع 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 > إظهار المحتوى أثناء التمرير

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...