السلام عليكم ورحمة الله ، اسعد الله مسائكم
أسألكم عن طريقة جعل الصور المتحركة تتحرك فقط إذا ظهرت بالشاشة ، وتوقيف حركتها إذا تجاووت مجال الشاشة .
أريد كود بالجيكوري لو سمحتم ،
وأورد لكم صورتان للعمل :
الأولى : متحركة :
https://2.bp.blogspot.com/-...والثانية ثابثة :
https://2.bp.blogspot.com/-...مع الإشارة إلى إمكانية التحويل من الصورة المتحركة إلى التابثة بتغيير s800 ب s800-c-k-rw ، وأقترح استعمال أمر replace
شكرا لكم مسبقا ودمتم دائمي العطاء
@يوسف سيد انتظر مرورك من هنا :)
عملت كود بسيط لنفس المطلوب
مثال حي للكود:
الصورة الاصلية (الثابتة) ضعها في src
والصورة المتحركة ضع الرابط الخاص بها في data-animate
مبدأ الكود قبل الوصول للصورة ب100 بيكسل (يمكنك تعديل المسافة) يقوم بتبديل ال src للصورة ووضع قيمة data-animate داخلها
وعند الانتهاء من الصورة او خروجها من الشاشة (المسافة من اعلى الصفحة + طول الصورة ) يقوم بارجاع قيمة src الاصلية
اذا كان الطول الخاص بالصورة غير معروف استخدم outerHeight() لقياس طول الصورة
تعديل : عند ظهور الصورة المتحركة يضيف كلاس ( animated ) للعنصر
شكرا لك على التفاعل مع سؤالي ،
المشكلة التي سأواجهها أن لدي الكثير من الصور ضمن كلاسات ، وبطريقتك لا تتحرك الصور الأولى
وأريد أن تتحرك الصورة بمجرد دخولها كاملة إلى الشاشة
الكود اللي وضعته فقط لشرح الفكرة (المبدأ)
اذا كان المقصد لاكثر من عنصر يمكنك استخدام اضافات جاهزة كـ Waypoints تستخدم لتحديد موقع العنصر وهل اصبح بالمنطقة المرئية للزائر
$('.notify').waypoint(function(direction) {
alert('Top of notify element hit top of viewport.');
});
بعد التعديل هذا الكود النهائي
الفانكشن المستخدم لتحديد موقع العنصر لست انا من مكتبه ومصدره موجود بالكود
التعليقات