كيف أجعل صور gif تتحرك فقط إذا وصلت إلى مساحة الشاشة المرئية بالجيكوري

السلام عليكم ورحمة الله ، اسعد الله مسائكم

أسألكم عن طريقة جعل الصور المتحركة تتحرك فقط إذا ظهرت بالشاشة ، وتوقيف حركتها إذا تجاووت مجال الشاشة .

أريد كود بالجيكوري لو سمحتم ،

وأورد لكم صورتان للعمل :

الأولى : متحركة :

https://2.bp.blogspot.com/-...

والثانية ثابثة :

https://2.bp.blogspot.com/-...

مع الإشارة إلى إمكانية التحويل من الصورة المتحركة إلى التابثة بتغيير s800 ب s800-c-k-rw ، وأقترح استعمال أمر replace

شكرا لكم مسبقا ودمتم دائمي العطاء

@يوسف سيد انتظر مرورك من هنا :)


omaraldaja أضف ردا

عملت كود بسيط لنفس المطلوب

مثال حي للكود:

الصورة الاصلية (الثابتة) ضعها في src

والصورة المتحركة ضع الرابط الخاص بها في data-animate

مبدأ الكود قبل الوصول للصورة ب100 بيكسل (يمكنك تعديل المسافة) يقوم بتبديل ال src للصورة ووضع قيمة data-animate داخلها

وعند الانتهاء من الصورة او خروجها من الشاشة (المسافة من اعلى الصفحة + طول الصورة ) يقوم بارجاع قيمة src الاصلية

اذا كان الطول الخاص بالصورة غير معروف استخدم outerHeight() لقياس طول الصورة

  • كود css للمثال فقط ليس له داعي بالكود :)

تعديل : عند ظهور الصورة المتحركة يضيف كلاس ( animated ) للعنصر

شكرا لك على التفاعل مع سؤالي ،

المشكلة التي سأواجهها أن لدي الكثير من الصور ضمن كلاسات ، وبطريقتك لا تتحرك الصور الأولى

وأريد أن تتحرك الصورة بمجرد دخولها كاملة إلى الشاشة

الكود اللي وضعته فقط لشرح الفكرة (المبدأ)

اذا كان المقصد لاكثر من عنصر يمكنك استخدام اضافات جاهزة كـ Waypoints تستخدم لتحديد موقع العنصر وهل اصبح بالمنطقة المرئية للزائر

$('.notify').waypoint(function(direction) {
  alert('Top of notify element hit top of viewport.');
});
mohamed asfar أضف ردا

@omaraldaja شاهد المثال الذي أعمل عليه