Mohammed Hhhh نشر 22 سبتمبر 2022 أرسل تقرير مشاركة نشر 22 سبتمبر 2022 الحين انا لاحظت ان بعض المواقع تعمل انميشن لل عانصر لما توصل عندها scroll كيف ممكن اسوي هذا الشيء و شكرا 3 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 22 سبتمبر 2022 أرسل تقرير مشاركة نشر 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 من هنا. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي عبد محسن نشر 22 سبتمبر 2022 أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 23 سبتمبر 2022 أرسل تقرير مشاركة نشر 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 > إظهار المحتوى أثناء التمرير اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohammed Hhhh
الحين انا لاحظت ان بعض المواقع تعمل انميشن لل عانصر لما توصل عندها scroll كيف ممكن اسوي هذا الشيء و شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.