إتقان تقدم الرسوم المتحركة: نظرة متعمقة على جداول CSS الزمنية للتمرير

في عالم تصميم وتطوير الويب الديناميكي، يعد إنشاء تجارب مستخدم جذابة وتفاعلية أمرًا بالغ الأهمية. يتوقع المستخدمون بشكل متزايد رسومًا متحركة سلسة وانتقالات سلسة تستجيب بديهيًا لأفعالهم. من بين التفاعلات الأكثر قوة وبديهية للمستخدم التمرير. يوفر الاستفادة من التمرير كعنصر تحكم مباشر للرسوم المتحركة طريقة فريدة لتوجيه المستخدمين عبر المحتوى وتعزيز سرد القصص على الويب. هذا هو المكان الذي تظهر فيه جداول CSS الزمنية للتمرير، مما يُحدث ثورة في كيفية تتبعنا لتقدم الرسوم المتحركة والتحكم فيه بناءً على موضع التمرير.

بالنسبة لجمهور عالمي، تقدم هذه التكنولوجيا فرصة لتقديم تجارب تفاعلية متسقة وعالية الجودة عبر أجهزة متنوعة وتفضيلات المستخدمين. سواء كنت تقوم بإنشاء موقع ويب يعتمد على السرد لشركة متعددة الجنسيات، أو ملف تعريف تفاعلي لمبدع محترف، أو منصة تعليمية تصل إلى الطلاب في جميع أنحاء العالم، فإن فهم وتنفيذ جداول CSS الزمنية للتمرير يمثل مهارة مهمة لمطوري ومصممي الويب العصريين.

ما هي جداول CSS الزمنية للتمرير؟

تقليديًا، غالبًا ما يتم تشغيل الرسوم المتحركة على الويب عن طريق أحداث المستخدم مثل النقرات أو التحركات، أو كانت تعمل على جدول زمني ثابت مستقل عن تفاعل المستخدم. في حين أن مكتبات JavaScript مثل GreenSock (GSAP) لطالما قدمت إمكانات الرسوم المتحركة المستندة إلى التمرير، فإن جداول CSS الزمنية للتمرير تجلب هذه القوة مباشرة إلى مواصفات CSS. هذا يعني أنه يمكن للمطورين تحقيق رسوم متحركة متطورة تعتمد على التمرير باستخدام JavaScript أقل، مما يؤدي إلى تحسين الأداء وتبسيط التعليمات البرمجية.

في جوهرها، يربط الجدول الزمني للتمرير تقدم الرسوم المتحركة مباشرة بموضع التمرير لحاوية تمرير محددة. بدلاً من تقدم الرسوم المتحركة بناءً على الوقت (على سبيل المثال، animation-duration: 5s)، فإنها تتقدم بناءً على المسافة التي قام المستخدم بالتمرير بها داخل عنصر معين.

المفاهيم الأساسية:

• حاوية التمرير: هذا هو العنصر الذي يحتوي على محتوى قابل للتمرير. يمكن أن يكون المستند الرئيسي (منفذ العرض) أو أي عنصر آخر يحتوي على خاصية CSS overflow: auto; أو overflow: scroll;.
• تقدم التمرير: يشير هذا إلى موضع شريط التمرير داخل حاوية التمرير. تسمح لنا جداول CSS الزمنية للتمرير بربط تقدم التمرير هذا بتقدم الرسوم المتحركة.
• نطاق الرسوم المتحركة: يحدد هذا الجزء المحدد من شريط تمرير حاوية التمرير الذي سيتحكم في الرسوم المتحركة. على سبيل المثال، قد ترغب في أن تبدأ الرسوم المتحركة عندما يدخل الجزء العلوي من عنصر ما إلى منفذ العرض وينتهي عندما يغادره.

آليات جداول CSS الزمنية للتمرير

يتم التعامل مع تنفيذ الرسوم المتحركة المستندة إلى التمرير في CSS بشكل أساسي بواسطة خاصية animation-timeline. تسمح لك هذه الخاصية بتحديد الجدول الزمني الذي يجب أن تتبعه الرسوم المتحركة.

خاصية animation-timeline

تقبل الخاصية animation-timeline عدة قيم، ولكن الأكثر صلة بالرسوم المتحركة المستندة إلى التمرير هي:

• auto: هذا هو الافتراضي. تستخدم الرسوم المتحركة جدولاً زمنياً يعتمد على شريط التمرير الخاص بالمستند (عادةً منفذ العرض).
• scroll(): تتيح لك هذه الدالة تحديد حاوية تمرير معينة واتجاه (مضمّن أو كتلة) لاستخدامها كجدول زمني.
• view(): على غرار scroll()، لكنها مرتبطة تحديدًا بمنفذ العرض وتقدم مزيدًا من التحكم في تحديد نطاق الرسوم المتحركة بناءً على رؤية العنصر.

تحديد نطاق الرسوم المتحركة باستخدام animation-range

بينما تحدد animation-timeline حاوية التمرير التي تقود الرسوم المتحركة، تحدد animation-range الجزء من تقدم هذا التمرير الذي يتوافق مع المدة الكاملة للرسوم المتحركة. هذا هو المكان الذي تحدث فيه السحر الحقيقي.

يتم تعريف الخاصية animation-range باستخدام قيمتين، تمثلان نقطتي البداية والنهاية لنطاق التمرير الذي يتوافق مع بداية ونهاية الرسوم المتحركة.

مثال: تحريك عنصر أثناء دخوله إلى منفذ العرض

لنفترض أنك تريد أن يتلاشى عنصر ما وينزلق لأعلى عندما يصبح مرئيًا في منفذ العرض. يمكنك تحقيق ذلك عن طريق تعيين animation-timeline إلى view-timeline: --my-timeline; ثم تحديد animation-range لهذا الجدول الزمني.

مثال مفاهيمي (باستخدام خصائص زائفة للتوضيح):

            
.element {
  animation-name: fadeInSlideUp;
  animation-timeline: --my-timeline;
  animation-range: --my-timeline 0% 100%; /* Animation starts at 0% scroll progress, ends at 100% */
}

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

            

              
                Copy
              
            
          

لجعل هذا أكثر تحديدًا، نحتاج إلى تحديد الجدول الزمني للعرض ونطاقه. تُستخدم الدالة view() لهذا الغرض:

            
.element {
  animation-name: fadeInSlideUp;
  animation-timeline: --my-view-timeline;
  animation-range: --my-view-timeline entry 100%; /* Start when element enters viewport, ends 100px further */
}

@view-timeline --my-view-timeline {
  /* This is conceptual; actual definition is within @keyframes or animation-range */
}

            

              
                Copy
              
            
          

غالبًا ما يتضمن النهج الأكثر مباشرة باستخدام بناء الجملة الحالي تحديد الجدول الزمني مباشرة داخل خاصية animation-range عند استخدام scroll() أو ضمنيًا باستخدام auto وview().

تحديد النطاق الدقيق

يمكن تعريف animation-range باستخدام وحدات مختلفة:

• النسب المئوية (%): بالنسبة إلى بُعد منفذ التمرير.
• وحدات البكسل (px): قيم مطلقة.
• الكلمات الأساسية: entry (عندما يدخل العنصر إلى منفذ التمرير) وexit (عندما يخرج العنصر من منفذ التمرير).

على سبيل المثال، سيعني animation-range: entry 50% exit 100% أن الرسوم المتحركة تبدأ عندما يدخل العنصر إلى منفذ العرض وينتهي في منتصف الطريق خلال نطاق التمرير الخاص بالعنصر، وينتهي عندما يخرج العنصر بالكامل من منفذ العرض.

النمط الشائع والقوي هو ربط الرسوم المتحركة برؤية العنصر نفسه داخل منفذ العرض. غالبًا ما يتم التعبير عن ذلك باستخدام الدالة view() (على الرغم من أن دعم المتصفح وبناء الجملة يمكن أن يتطور):

            
.animated-element {
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entered 0% exit 50%; /* Animation starts when element enters, ends halfway down the element's scrollable height */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

            

              
                Copy
              
            
          

يمكن أن يكون بناء جملة animation-range هو `[start end]`, حيث يمكن أن يكون `start` و`end` مجموعة من الكلمات الأساسية (entry، exit) والنسب المئوية أو وحدات البكسل. على سبيل المثال، يحدد animation-range: entry 75% exit 25% نطاقًا يبدأ عندما يدخل العنصر إلى منفذ العرض وينتهي عندما يكون على بعد 75% من طريقه عبر ارتفاعه القابل للتمرير (أو 25% من الأسفل إذا كان التمرير رأسيًا). يمكن أن يكون التفسير الدقيق لهذه النطاقات دقيقًا ويعتمد على اتجاه حاوية التمرير.

دالة scroll() للحاويات المحددة

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

            
.scrollable-content {
  overflow-y: scroll;
  height: 400px;
}

.scrollable-content .animated-item {
  animation: slide-in linear forwards;
  animation-timeline: scroll(block block);
  animation-range: 100px 500px; /* Animation controlled by the scrollbar of .scrollable-content */
}

@keyframes slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

في هذا المثال:

• scroll(block block): يخبر هذا الرسوم المتحركة باستخدام الجدول الزمني للتمرير لأقرب سلف مع overflow: scroll أو auto، ويشير إلى بُعد block (رأسي لمعظم اللغات) لحاوية التمرير هذه. يمكنك أيضًا استخدام scroll(inline block) للجداول الزمنية للتمرير الأفقي.
• animation-range: 100px 500px;: ستبدأ الرسوم المتحركة عندما يكون شريط التمرير الخاص بـ .scrollable-content قد مرر 100 بكسل، وستكتمل عندما يكون قد مرر 500 بكسل.

رسوم متحركة متعلقة بمنفذ العرض باستخدام view()

تُعد الدالة view() قوية بشكل خاص لإنشاء تأثيرات مرتبطة برؤية عنصر ما داخل منفذ العرض، بغض النظر عن حاويات التمرير الأخرى في الصفحة.

            
.hero-image {
  animation: parallax-scroll linear forwards;
  animation-timeline: view();
  animation-range: entry 0% exit 100%; /* Affects the animation as the hero image moves through the viewport */
}

@keyframes parallax-scroll {
  from { transform: translateY(-50px); }
  to { transform: translateY(50px); }
}

            

              
                Copy
              
            
          

هنا، ستتحرك .hero-image لأعلى أو لأسفل بناءً على موقعه داخل منفذ العرض. عندما يدخل لأول مرة، يكون تقدم الرسوم المتحركة 0%. عندما يتمرر لأعلى ويخرج، يصل تقدم الرسوم المتحركة إلى 100%. تعني 0% exit 100% في animation-range أن الرسوم المتحركة تبدأ عندما يدخل العنصر إلى منفذ العرض وتكتمل عندما يخرج العنصر من منفذ العرض.

حالات الاستخدام العملي للجمهور العالمي

تفتح جداول CSS الزمنية للتمرير مستوى جديدًا من الصقل والتفاعل الذي يمكنه تحسين تفاعل المستخدم بشكل كبير عبر سياقات ثقافية ولغوية مختلفة.

1. سرد القصص الإخبارية ومرشدات المحتوى

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

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

2. عروض المنتجات التفاعلية

يمكن لمواقع التجارة الإلكترونية والصفحات المقصودة للمنتجات استخدام الجداول الزمنية للتمرير لعرض المنتجات بالتفصيل. بدلاً من الصور الثابتة أو الأوصاف المطولة، يمكن للمستخدمين التمرير عبر ميزات المنتج والرسوم المتحركة وسيناريوهات الاستخدام.

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

3. تحسين التنقل وتدفق المستخدم

يمكن أن تجعل الرسوم المتحركة التي تعتمد على التمرير التنقل أكثر سهولة، خاصة في الصفحات الطويلة أو الواجهات المعقدة. يمكن أن تتحرك العناصر في العرض أثناء قيام المستخدم بالتمرير عبر أقسام مختلفة، أو يمكن أن تشير أشرطة التقدم بصريًا إلى مكان وجود المستخدم داخل مستند أو عملية متعددة الخطوات.

• مثال: بوابة طلبات التوظيف التي تحتوي على أقسام متعددة. يمكن لمؤشر التقدم المرئي في الجزء العلوي من الصفحة أن يحرك ملئه بينما يكمل المستخدم كل قسم، مما يوفر ردود فعل واضحة بشأن تقدمه. تتجاوز هذه الإشارة المرئية العالمية الحواجز اللغوية.
• مثال: موقع إلكتروني لإدراج العقارات. أثناء قيام المستخدمين بالتمرير لأسفل صفحة عقار، يمكن أن تتحرك التفاصيل مثل معارض الصور ومواقع الخرائط وقوائم وسائل الراحة للتركيز، مما يخلق عرضًا تقديميًا سلسًا ومنظمًا.

4. إنشاء تأثيرات اختلاف المنظر الجذابة

التمرير اختلاف المنظر، حيث تتحرك عناصر الخلفية بسرعة مختلفة عن عناصر المقدمة، هو أسلوب شائع. تجعل جداول CSS الزمنية للتمرير من السهل والأكثر كفاءة تنفيذ تأثيرات اختلاف المنظر المتطورة.

• مثال: موقع ويب ترويجي لشركة سفر. أثناء قيام المستخدم بالتمرير، يمكن أن تتحرك صور الخلفية لوجهات غريبة بشكل أبطأ من النص الأمامي والعبارات التي تحث على اتخاذ إجراء، مما يخلق إحساسًا بالعمق والانغماس الذي يأسر المستخدمين عالميًا.

5. فوائد الأداء للوصول العالمي

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

دعم المتصفح والاعتبارات

تعد جداول CSS الزمنية للتمرير مواصفة CSS جديدة نسبيًا، وبينما يزداد دعم المتصفح بسرعة، من الضروري أن تكون على دراية بالمشهد الحالي.

الدعم الحالي

تقوم المتصفحات الرئيسية مثل Chrome وEdge وSafari بإضافة دعم تدريجيًا للرسوم المتحركة التي تعتمد على التمرير. من الضروري التحقق من أحدث جداول التوافق مع المتصفح (على سبيل المثال، على MDN Web Docs أو Can I Use) قبل تنفيذ هذه الميزات في بيئات الإنتاج. يمكن أن يتطور بناء الجملة والميزات المتاحة أيضًا مع نضج المواصفة.

اكتشاف الميزات والبدائل

لتجربة المستخدم المثلى عبر جميع المتصفحات، ضع في اعتبارك تنفيذ اكتشاف الميزات. يمكنك استخدام JavaScript للتحقق مما إذا كانت جداول التمرير مدعومة:

            
if ('animationTimeline' in Element.prototype) {
  // Scroll Timelines are supported, apply CSS or JS.
  console.log('Scroll Timelines are supported!');
} else {
  // Fallback: Provide a graceful degradation for browsers that don't support it.
  console.log('Scroll Timelines are not supported. Providing fallback...');
  // You might apply simpler animations, static content, or JavaScript fallbacks here.
}

            

              
                Copy
              
            
          

بالنسبة للمتصفحات التي لا تدعم الجداول الزمنية للتمرير، يمكنك توفير:

• المحتوى الثابت: يتم تقديم المحتوى بوضوح، ولكن بدون الرسوم المتحركة.
• رسوم متحركة CSS أبسط: الرجوع إلى رسوم متحركة أساسية تعتمد على `animation-duration`.
• بدائل JavaScript: استخدم مكتبات مثل GSAP's ScrollTrigger لتوفير تأثيرات مماثلة.

تطور بناء الجملة

شهد بناء جملة تحديد الجداول الزمنية والنطاقات بعض التكرارات. يجب على المطورين البقاء على اطلاع بأحدث التوصيات من مجموعة عمل CSS. على سبيل المثال، ربما استخدم الاقتراح الأولي أسماء خصائص أو هياكل دالة مختلفة عما يتم تنفيذه أو اقتراحه حاليًا للتوحيد القياسي.

أفضل الممارسات للتنفيذ العالمي

عند التصميم والتطوير باستخدام جداول CSS الزمنية للتمرير لجمهور عالمي، ضع في اعتبارك أفضل الممارسات التالية:

1. إعطاء الأولوية للمحتوى وإمكانية الوصول

يجب أن تعمل الرسوم المتحركة على تحسين تجربة المستخدم، وليس إعاقتها. تأكد من أن المحتوى الخاص بك يمكن الوصول إليه لجميع المستخدمين، بغض النظر عن قدرتهم على إدراك الرسوم المتحركة. قم بتوفير خيارات لتقليل الحركة إذا كان ذلك ممكنًا، وتأكد دائمًا من أن المعلومات الحاسمة يتم نقلها بشكل فعال حتى بدون الرسوم المتحركة.

• التدويل: تأكد من أن الرسوم المتحركة لا تتداخل مع توسيع النص أو تقلصه بلغات مختلفة. على سبيل المثال، قد تنكسر الرسوم المتحركة التي تعتمد على التباعد الأفقي الدقيق إذا كان النص المترجم أطول أو أقصر بشكل ملحوظ.
• تباين الألوان: تأكد من أن العناصر المتحركة تحافظ على تباين ألوان كافٍ مع خلفياتها لتكون قابلة للقراءة للمستخدمين ذوي الإعاقات البصرية.

2. التحسين لتحقيق الأداء

حتى مع أداء جداول CSS الزمنية للتمرير، من الضروري تحسين الرسوم المتحركة الخاصة بك. الاستخدام المفرط للرسوم المتحركة المعقدة، وخاصة تلك التي تتضمن تغييرات كبيرة في التحويل أو العتامة على العديد من العناصر في وقت واحد، لا يزال بإمكانه إجهاد قدرات العرض.

• الحد من عدد العناصر المتحركة: ركز الرسوم المتحركة على العناصر الرئيسية التي تضيف أكبر قيمة.
• استخدم transform وopacity: هذه الخصائص أكثر أداءً بشكل عام حيث يمكن التعامل معها بواسطة وحدة معالجة الرسومات.
• الاختبار على أجهزة مختلفة: قم بمحاكاة ظروف الشبكة وقدرات الجهاز المختلفة للتأكد من أن موقعك يعمل جيدًا على مستوى العالم.

3. تصميم لتجربة عالمية

تجنب الافتراضات الثقافية أو الرموز التي قد لا تترجم جيدًا على مستوى العالم. ركز على الإشارات والتفاعلات المرئية المفهومة عالميًا.

• البساطة: حافظ على الرسوم المتحركة واضحة ومباشرة. يمكن أن يُساء تفسير الإيماءات أو الاستعارات المرئية المعقدة والمحددة ثقافيًا.
• المشغلات البديهية: الرسوم المتحركة التي تعتمد على التمرير بديهية بطبيعتها. إنها تتبع تفاعل المستخدم الطبيعي مع الصفحة.

4. إدارة التوقعات من خلال ردود فعل واضحة

عندما تعتمد الرسوم المتحركة على التمرير، يجب أن يشعر المستخدم دائمًا بالتحكم. يجب أن يرتبط تقدم الرسوم المتحركة بوضوح بإجراء التمرير الخاص به.

• الإشارات المرئية: استخدم إشارات مرئية خفية للإشارة إلى أن العنصر متحرك أو سيتحرك عند التمرير.
• التقاط التمرير: في بعض الحالات، يمكن أن يؤدي الجمع بين الجداول الزمنية للتمرير والتقاط التمرير إلى إنشاء تسلسلات رسوم متحركة يمكن التحكم فيها ويمكن التنبؤ بها، والتي يمكن أن تكون مفيدة لتجارب المحتوى الموجهة.

مستقبل الرسوم المتحركة التي تعتمد على التمرير

تمثل جداول CSS الزمنية للتمرير قفزة كبيرة إلى الأمام في إمكانات الرسوم المتحركة على الويب. مع ترسيخ دعم المتصفح وأصبح المطورون أكثر دراية بالتكنولوجيا، يمكننا أن نتوقع رؤية تجارب تعتمد على التمرير بشكل متزايد ومتطورة وسلسة. إن دمج التحكم في الرسوم المتحركة مباشرة في خصائص CSS يعني أن الرسوم المتحركة الأكثر تعقيدًا وتفاعلية والأكثر أداءً ستصبح في متناول مجموعة واسعة من المطورين، مما يؤدي إلى مواقع ويب أكثر جاذبية وديناميكية للجميع.

بالنسبة للمطورين والمصممين الذين يهدفون إلى إنشاء تجارب ويب عالمية حقًا، لم يعد إتقان جداول CSS الزمنية للتمرير مجرد تقنية متقدمة؛ إنها تصبح مهارة أساسية. من خلال الاستفادة من هذه الأدوات القوية، يمكنك صياغة الروايات الآسرة والواجهات البديهية وعروض المنتجات الغامرة التي يتردد صداها مع المستخدمين عبر القارات، وكسر الحواجز وتقديم رحلات مستخدم استثنائية.

إن القدرة على التحكم بدقة في تقدم الرسوم المتحركة بناءً على موضع التمرير الخاص بالمستخدم تفتح عالمًا من الاحتمالات الإبداعية. من الانتقالات الدقيقة التي توجه العين إلى عمليات الكشف الدرامية التي تحكي قصة، تعمل جداول CSS الزمنية للتمرير على تمكينك من بناء ويب الغد اليوم. احتضن هذه التكنولوجيا وشاهد مشاريع الويب الخاصة بك وهي تنبض بالحياة بطرق تأسر جمهورك العالمي وتجذبه.