ربط الـScrollY مع حركات العناصر و الـ keyframes

Salah Almalawi · 12 مارس

السلام عليكم ورحمة الله وبركاته ،

الله يعطيكم العافيه 🌹 ،

اخواني انا عندي سؤال ان شاء الله احصل له اجابه بحثت في كل مكان ولم اجد له حل ولم اجد من يعطيني الفكرة الاساسية بس ،

كيف اربط الاسكرول بحركة العناصر بحيث اذا ( مثلاً كنت انزل في الصفحة اذا وصلت الى طول الصفحة 700px يبدأ عنصر يتحرك بنائاً على keyframes ويبدأ يدخل الى الصفحة من جهة اليمين ولنفترض يتغير لونه ويدور حول نفسه واذا وصل الى طول صفحة 800px يخرج من جهة اليسار واذا ذهبت الى اعلى الصفحة ووصلت الى طول صفحة 800px يبدأ العنصر يدخل من جهة اليسار ويرجع الى ادراجه ) اتمنى وصلت الفكرة ،

اظن يسمى ( التحكم السلس )

اثق في مجتمع اكاديمية حسوب لإجاد الحل ❤️❤️.

وشكراً

امثله على شرحي

هذا الموقع

ملاحظة انا ابتعد عن استخدام المكتبات لأن لا يوجد لها شرح عربي واريد فهم الفكرة لوحدها

حمزة عباد · 12 مارس

هذا الأمر يمكن القيام به باستخدام JavaScript في صفحة الويب. الشيء الأساسي في مثل هذه التطبيقات هو التنصّت على الحدث scroll، وفي الدالة التي تقوم بعمليّة التنصّت يمكنها قراءة الخصائص window.scrollY و window.scrollX لمعرفة مقدار الإزاحة الحالي. بناء على هذا المقدار، يمكنك تحريك أو تغيير لون أو حجم أي عنصر في الصفحة بتعديل خصائص CSS التي يمكن الوصول إليها من JavaScript. العنصر الذي يمكن تحريكه يجب أن يكون لديه تموضع مطلق (absolute).

إنشاء كود مثل هذا قد يحتاج تفكيرا وعملا، لذلك توجد مكتبات تسهل هذا، لكن إذا كنت تريد نقطة انطلاق فإليك هذا الكود الذي قمت بكتابته، والذي يحرك عنصرا بشكل عشوائي (ليس لدي وقت للتفكير في كيفية فعل هذا بشكل أحسن، يمكنك أن تتدرب على تحسينه إن أردت):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <style>
    html {
      height: 100%;
      width: 100%;
    }

    .movable {
      border: 1px solid gray;
      border-radius: 0.5em;
      box-shadow: 0em 0em 0.2em black;
      padding: 0.5em;
      width: fit-content;
      background-color: lightgray;
      color: cornflowerblue;
    }
  </style>
</head>

<body>
  <p class="movable">Hello world</p>
  <script>
  for (var i=0; i<100; i++) {
    p = document.createElement("p")
    p.innerText = "Test text " + i
    document.body.appendChild(p)
  }

  movable_p = document.getElementsByClassName('movable')[0]
  movable_p.style.position = 'absolute'
  movable_p.style.left = '10px'
  movable_p.style.top = '10px'

  window.addEventListener('scroll', function() {
    movable_p.style.left = (Math.random() * 0.5 * window.innerWidth - movable_p.clientWidth / 2 ) + 'px'
    movable_p.style.top = (Math.random() * 0.5 * window.innerHeight - movable_p.clientHeight / 2) + 'px'
  })
  </script>
</body>

</html>

Mustafa Suleiman · 12 مارس

ما تريده يتم تنفيذه بواسطة intersection observer API وهي الطريقة الحديثة في جافاسكريبت لتنفيذ أمر معين في الصفحة عند الوصول لنقطة معينة بها.

وبشكل بسيط مراقب التقاطع أو intersection observer API هو واجهة برمجية (API) في جافاسكريبت تسمح لك بمراقبة ظهور عنصر معين في منطقة عرض الصفحة (viewport).

وكمثال:

const element = document.getElementById("my-element");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // تشغيل الوظيفة عندما يظهر العنصر
      console.log("The element is visible!");
    } else {
      // تشغيل الوظيفة عندما يختفي العنصر
      console.log("The element is hidden!");
    }
  });
});

observer.observe(element);

نقوم بمراقبة عنصر #my-element. عندما يظهر العنصر في منطقة العرض، يتم تشغيل الوظيفة التي تسجل "The element is visible!"، وعندما يختفي العنصر، يتم تشغيل الوظيفة التي تسجل "The element is hidden!".

ستجد شرح مفصل هنا:

ربط الـScrollY مع حركات العناصر و الـ keyframes

السؤال

Salah Almalawi

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

Recommended Posts

حمزة عباد

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية