M

MLOG

العربية

دليل شامل لـ CSS Scroll Timelines، تقنية تحريك ويب جديدة وقوية تربط التحريكات مباشرة بموضع التمرير.

CSS Scroll Timeline: التحريك بناءً على موضع التمرير

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

ما هي CSS Scroll Timelines؟

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

لماذا استخدام CSS Scroll Timelines؟

المفاهيم والخصائص الرئيسية

يعد فهم المفاهيم الأساسية وخصائص CSS أمرًا بالغ الأهمية للاستخدام الفعال لـ Scroll Timelines:

1. Scroll Timeline

تحدد الخاصية scroll-timeline حاوية التمرير التي سيتم استخدامها كخط زمني للتحريك. يمكنك تحديد خط زمني مسمى (مثل --my-scroll-timeline) أو استخدام قيم معرفة مسبقًا مثل auto (أقرب حاوية تمرير أصل)، none (لا يوجد خط زمني للتمرير)، أو root (منفذ عرض المستند).

/* تعريف خط زمني تمرير مسمى */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* استخدام الخط الزمني المسمى في التحريك */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Animation Timeline

تعين الخاصية animation-timeline خط زمني للتمرير إلى تحريك. تربط هذه الخاصية تقدم التحريك بموضع التمرير لحاوية التمرير المحددة. يمكنك أيضًا استخدام الدالة view() التي تنشئ خطًا زمنيًا بناءً على تقاطع عنصر مع منفذ العرض.

/* ربط التحريك بخط زمني التمرير */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* استخدام view() للتحريكات المستندة إلى منفذ العرض */
.animated-element {
  animation-timeline: view();
}

3. Scroll Offsets

تحدد إزاحات التمرير نقاط البداية والنهاية لخط زمني التمرير التي تتوافق مع بداية ونهاية التحريك. تسمح لك هذه الإزاحات بالتحكم بدقة في وقت بدء التحريك وإيقافه بناءً على موضع التمرير. يمكنك استخدام كلمات مفتاحية مثل cover، contain، entry، exit، وقيم رقمية (مثل 100px، 50%) لتحديد هذه الإزاحات.

/* تحريك عندما يكون العنصر مرئيًا بالكامل */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* بدء التحريك على بعد 100 بكسل من الأعلى، ينتهي عندما يكون الجزء السفلي على بعد 200 بكسل من أسفل منفذ العرض */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Scroll Timeline Axis

تحدد الخاصية scroll-timeline-axis المحور الذي يتقدم على طوله خط زمني التمرير. يمكن تعيينها على block (التمرير الرأسي)، inline (التمرير الأفقي)، both (كلا المحورين)، أو auto (يحدده المتصفح). عند استخدام `view()`، يوصى بتحديد المحور بشكل صريح.

/* تحديد محور خط زمني التمرير */
.scroll-container {
  scroll-timeline-axis: y;
}

/* مع view */
.animated-element {
  scroll-timeline-axis: block;
}

5. Animation Range

تحدد الخاصية `animation-range` إزاحات التمرير (نقاط البداية والنهاية) التي تتوافق مع بداية (0٪) ونهاية (100٪) التحريك. هذا يسمح لك بتعيين مواضع تمرير محددة لتقدم التحريك.

/* تعيين نطاق التمرير بأكمله إلى التحريك */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* بدء التحريك في منتصف نطاق التمرير */
.animated-element {
  animation-range: 50% 100%;
}

/* استخدام قيم البكسل */
.animated-element {
  animation-range: 100px 500px;
}

أمثلة عملية وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية لكيفية استخدام CSS Scroll Timelines لإنشاء تحريكات جذابة:

1. شريط التقدم

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

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... محتواك هنا ...</p>
</div>

ينشئ هذا الكود شريط تقدم ثابتًا في أعلى الصفحة. يقوم تحريك fillProgressBar بزيادة عرض شريط التقدم تدريجيًا من 0٪ إلى 100٪ أثناء قيام المستخدم بالتمرير لأسفل الصفحة. يقوم animation-timeline: view() بربط التحريك بتقدم تمرير منفذ العرض، وتربط `animation-range` التمرير بالتقدم المرئي.

2. تلاش الصورة للظهور

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

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="صورة">

يقوم هذا الكود بإخفاء الصورة مبدئيًا وتحديد موضعها أسفل موضعها النهائي قليلاً. أثناء تمرير الصورة إلى منفذ العرض، يقوم تحريك fadeIn بزيادة العتامة تدريجيًا وتحريك الصورة إلى موضعها الأصلي، مما يخلق تأثير تلاشي سلس. تحدد `animation-range` أن التحريك يبدأ عندما يكون الحافة العلوية للصورة ضمن 25٪ من منفذ العرض ويكتمل عندما تكون الحافة السفلية ضمن 75٪ من منفذ العرض.

3. العناصر الثابتة

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

/*CSS*/
.sticky-container {
  height: 200px; /* اضبط حسب حاجتك */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* اضبط النطاق حسب الحاجة */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* تغيير اللون للإشارة إلى الثبات */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">عنصري الثابت</div>
</div>

في هذا المثال، ينتقل العنصر من `position: absolute` إلى `position: fixed` أثناء دخوله إلى أول 20٪ من منفذ العرض، مما يخلق تأثير "التثبيت" السلس. اضبط `animation-range` وخصائص CSS داخل keyframes لتخصيص السلوك.

4. تأثير التمرير بالمنظور (Parallax)

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

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* اضبط حسب حاجتك */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* اضبط لسرعة المنظور */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* اضبط لسرعة المنظور */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

ينشئ هذا المثال طبقتين بصور خلفية مختلفة. تقوم تحريكات `parallaxBg` و `parallaxFg` بنقل الطبقات بسرعات مختلفة، مما يخلق تأثير المنظور. اضبط قيم `translateY` في keyframes للتحكم في سرعة كل طبقة.

5. تحريك كشف النص

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

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">سيتم الكشف عن هذا النص أثناء التمرير.</span>
</div>

يستخدم هذا المثال وظيفة التوقيت `steps(1)` للكشف عن النص حرفًا بحرف. يقوم `width: 0` بإخفاء النص في البداية، ويقوم تحريك `textRevealAnimation` بزيادة العرض تدريجيًا للكشف عن النص بالكامل. اضبط `animation-range` للتحكم في وقت بدء وانتهاء تحريك كشف النص.

توافق المتصفحات وملحقات الدعم

تعد CSS Scroll Timelines تقنية جديدة نسبيًا، ولا يزال دعم المتصفحات قيد التطور. حتى أواخر عام 2023، توفر المتصفحات الرئيسية مثل Chrome و Edge دعمًا جيدًا. تعمل Firefox و Safari بنشاط على تنفيذ الميزة. من الضروري التحقق من حالة توافق المتصفحات الحالية قبل تنفيذ Scroll Timelines في الإنتاج. يمكنك استخدام موارد مثل Can I use للتحقق من حالة الدعم.

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

اعتبارات إمكانية الوصول

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

أفضل الممارسات والنصائح

فيما يلي بعض أفضل الممارسات والنصائح لاستخدام CSS Scroll Timelines بفعالية:

اعتبارات عالمية لتصميم التحريك

عند تصميم تحريكات لجمهور عالمي، ضع هذه النقاط في الاعتبار:

الخلاصة

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

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