تحريك العناصر في CSS

تحريك وانتقال العناصر في CSS3 هو من أهم الأمور التي يجب أن تتقنها لكي تصمم صفحة هبوط ممتازة. لغة CSS3 هي إصدار أحدث من لغة CSS المتخصصة في تنسيق صفحات الويب. إصدار CSS3 يضيف بعض الأشياء المهم لتنسيق صفحات الإنترنت؛ مثل التحريك (animation)، والانتقالات (transition).

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

هناك نوعين من الحركة؛

1. التحريك.
2. حركة الانتقال من حالة إلى أخرى.

أولاً: التحريك (Animation) 🔗

التحريك هو إعطاء خطوات حركة لعناصر HTML. نحدد العنصر من خلال الـ CSS Selector ثم نكتب كود التحريك. مثال على التحريك في CSS :

كود HTML 🔗

<div class="box"></a>

كود CSS 🔗

.box {
display:block;
margin:auto;
animation-name:movetoround;
animation-duration: 1s;
animation-iteration-count:1;
animation-fill-mode:forwards;
animation-delay:1s;
animation-direction:alternate;
animation-timing-function:ease-in-out;
}
@keyframes movetoround {
0% {0 0 0 0}
25% {50% 0 0 0}
50% {50% 50% 0 0}
75% {50% 50% 50% 0}
100% {50% 50% 50% 50%}
}

لنبدأ في معرفة معنى الكود السابق.

animation-name نكتب بها اسم الحركة حسب الإسم الذي اخترناه عندما كتبنا الـ keyframes كما ترى في الكود.

animation-duration هي مدة تنفيذ التحريك. لابد أن تختار هذه المدة لكي تعمل الحركة. هذه الفترة الزمنية تقاس بالثانية مثل 2s معناها ثانيتين.

animation-iteration-count هي عدد مرات تكرار الحركة. تريد الحركة أن تحدث مرة واحدة اختر ١، أما إن أردت الحركة أن تتكرر ثلاث مرات اكتب ٣، أما إن أردت أن تتكرر الحركة دائماً بدون توقف اختر infinite .

بعد إنتهاء التحريك يرجع العنصر إلى الشكل العادي، ولكن إن أردت أن يثبت العنصر على آخر مرحلة من مراحل التحريك، استخدم خاصية animation-fill-mode بقيمة forwards كما ترى في الكود.

إن أردت أن تبدأ الحركة بعد ثانية من تحميل العنصر على الشاشة، استخدم خاصية animation-delay وحدد وقت تأخير التحريك إلى 1s أو كما تريد.

إن أردت أن تتم الحركة في اتجاه ثم تتكرر في المرة الأخرى في الاتجاه المعاكس، استخدم خاصية animation-direction بقيمة alternate كما ترى في الكود. يمكنك أيضاً أن تختار اتجاه الحركة إلى عكس الإتجاه المكتوب في الـ keyframes أو في الإتجاه العادي للحركة.

أما animation-timing-function تحدد وقت حدوث كل جزء من التحريك. مثلاً: إن أردت أن تبدأ الحركة ببطء ثم تسرع ثم تنتهي ببطء استخدم قيمة ease-in-out كما ترى في الكود. هذه هي طريقة التحريك القريب من الواقع لأنها تتبع قوانين الفيزياء مثل حركة السيارة على الطريق؛ تبدأ ببطء من السكون ثم تسريع كما تشاء ثم ترجع لتبطئ مرة أخرى حتى تتوقف.

أما إن أردت أن يحدث التحريك بشكل ثابت دائماً دون إبطاء أو تسريع استخدم قيمة linear . أما إن أردت أن تجعل التحريك بطئ في البداية فقط استخدم ease-in وإن أردت أن تنتهي الحركة ببطء استخدم قيمة ease-out .

كتابة مراحل التحريك 🔗

نستخدم keyframes لكتابة خطوات أو مراحل الحركة. نبدأ بـ 0% وننتهي بـ 100% . يمكن أن نستخدم قيم وسطية مثل 50% أو لا على حسب التحريك الذي نريده.

لا تنسى أن تكرر الـ @keyframes للمتصفحات المختلفة لكي تعمل مع كل المتصفحات. استخدم @-moz-keyframes و @-webkit-keyframes و @-o-keyframes لتدعم متصفح سفارى، ومتصفح موزيللا فايرفوكس، ومتصفح أوبرا، ومتصفح جوجل كروم (طبعاً).

ثانياً: الانتقال 🔗

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

كود HTML 🔗

<div class="trans"></div>

كود CSS 🔗

.trans {
background: black;
width:200px;
height:200px;
transition-property: all;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function:ease-in-out;
}
.trans:hover {
border-radius: 50%;
}

دعونا نبدأ في فهم الكود السابق.

نستخدم transition-property لتحديد الخاصية التي نريد عمل حركة انتقال لها. إن أردنا عمل حركة انتقال لتغير اللون نستخدم color، وإن أردنا عمل حركة انتقال عند تغير لون الخلفية نستخدم background أما إن أردنا أن نعمل حركة انتقال لكل الخصائص المتغيرة نكتب all كما ترى في الكود. يُمكننا أيضاً أن نضع أكثر من خاصية ونفصل بينهم بفاصلة انجليزية (color, background, border-radius مثلاً).

لاحظ أن الحركة الإنتقالية تتم على الخصائص التي يمكن عمل خطوات لحدوثها مثل الألوان ومقدار دوران الزوايا وهذا جدول به كل الخصائص التي تقبل التحريك الانتقالي.

transition-duration لتحديد الفترة الزمنية لتنفيذ حركة الانتقال من حالة لحالة أخرى.

transition-delay لتحديد مدة التأخر في بدء حركة الإنتقال. أى فترة الانتظار قبل بدء الانتقال.

transition-timing-function وهي نفس معنى animation-timing-function ومعناها سرعة إتمام التحريك. تبدأ الحركة ببطء ثم تسرع (ease-in) أم تبدأ بسرعة ثم تبطئ (ease-out) أم تبدأ وتنتهي بنفس السرعة (linear).

لاحظ أن الانتقال يحتاج إلى شئ يغير حالة العنصر. يُمكن استخدام التغير مع الـ :hover أو :active وغيرها من الأحداث التي يمكن أن تغير حالة عناصر HTML في صفحة الويب.

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

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن “موقع أبانوب حنا للبرمجيات” على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.