اذهب إلى المحتوى

حرب النجوم (Star War)


محمد بغات

سنطبق ما تعلّمناه في المقالات السابقة، وسنصنع تحريكًا متجِهيًّا (SVG) مرحًا. سنبني عنوان فيلم حرب النجوم من إعلان "The Force Awakens".

starwars-min.gif
المصدر: https://www.youtube.com/watch?v=ngElkyQ6Rhs

يجمع هذا المثال بين التحريك وبين بعض خاصيات CSS الأخرى، خصوصًا الخاصية transform ودوال تحويلها scale و translate و rotate.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

transform: ليست من خاصيات الحركات

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

الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎

بإمكاننا تصغير العناصر أو تكبيرها باستخدام scale. وباستخدام translateZ، يمكننا نقل العناصر على المحور Z، وهو المحور الذي يمثله رسم خط ينطلق منك، ويتجه إلى الشاشة.

في هذا المثال، سنستخدم scale و translateZ معًا لخلق شعور بأنّ الكلمات تطير في الفضاء. بعد ذلك، سنستخدم rotateY لتدوير أحرف سطر الوصف. سيتطلب الدوران حول المحور Y قيام المتصفح بالرسم ثلاثي الأبعاد.

SVG و HTML و CSS

استعدادًا لهذا المثال، قمت بإنشاء ملفين من النوع SVG لأجل الجزئين Star و Wars من الشعار. لا تتردد في تحميلهما واستخدامهما.

إليك شيفرة HTML الخاصة بالمثال:

<div class="starwars-demo">
  <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
  <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

لقد استخدمنا صورة ثابتة للنجوم في الخلفية. لم أتمكن من العثور على الخط الذي استُخدِم في الإعلان الأصلي، لذلك استخدمت الخط "Lato". استخدمت التموضع المطلق (absolute positioning) لوضع المحتوى في منتصف الشاشة. سنحصل في البداية على الصورة التالية:

starwars.png

تحريك الكلمتين Star و Wars

نريد أن يظهر النص الكبير تدريجيًا، إذ يبدأ بحجم كبير، ثمَّ يصغر بمرور الوقت. وهذه فرصة جيدة لاستخدام الدالة scale(). سنستخدمها على الكلمة "Star" في الإطارات المفتاحية التالية:

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);

  20% {
    opacity: 1;

  89% {
    opacity: 1;
    transform: scale(1);

  100% {
    opacity: 0;
    transform: translateZ(-1000em);

}

هناك خاصيتان تتغيران خلال مسار هذه الحركة وهما opacity و transform. إنّ تغيير العتامة (opacity) يجعل النص يبدأ شفافًا، ثم يتلاشى في النهاية لكي نتمكن من إعادة تنفيذ التحريك.

يبدأ التحويل عن طريق تحديد الحجم عند القيمة 1.5. هذا يعني أنّ الحجم الأولي للنص سيكون أكبر بنسبة 150٪ من الحجم العادي. عند النقطة 89٪، سنعيّن الخاصية transform عند القيمة scale(1). هذا يعني أنه بين اللحظتين 0٪ و 89٪، سينتقل الحجم من 150٪ إلى 100٪.

التحويل transformZ الأخير يؤدي إلى تكبير الكلمتين بسرعة.

بشكل مماثل، يمكننا تطبيق الإطارات المفتاحية على الكلمة "Star":

.star {
  animation: star 10s ease-out infinite;
}

تم استخدام مجموعة مماثلة من الإطارات المفتاحية مع الكلمة "Wars".

لنجعلها ثلاثية الأبعاد

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

يمكننا فعل ذلك عن طريق إضافة الشيفرة التالية إلى العنصر div ذي الصنف .starwars-demo:

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

تخبر هاتان الخاصيتان المتصفحَ بأنّ أبناء الحاوية (container`s children) ينبغي أن يتموضعوا وفق شكل ثلاثي الأبعاد، بدلًا من وضعهم في مستوى مسطح. يمكنك أن تجد المزيد من التفاصيل عن هذه الخاصية في موقع CSS Tricks.

ثانياً، تخبر الخاصية persective المتصفحَ بمدى «عمق» المشهد. في هذا المثال، جعلناها تساوي 800px. تخلق القيم الأصغر تأثيرات «متطرفة» لأنّ المشهد سيكون أقصر.

سننسق الآن سطر الوصف.

تحريك الشعار "The Force Awakens"

تدور أحرف الشعار "The Force Awakens" في مكانها. يمكننا خلق هذا التأثير باستخدام التحويل rotateY. في هذا المثال، قمنا بوضع كل حرف داخل عنصر من النوع span حتى نتمكن من تطبيق التحريك على كل حرف على حدة.

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

سنُطبِّق التحريك على كل حرف على حدة.

أولًا، الإطارات المفتاحية:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);

  30% {
    opacity: 1;

  70%, 86% {
    transform: rotateY(0);
    opacity: 1;

  95%, 100% {
    opacity: 0;

}

في البداية، تكون الحروف مُدوّرة بزاوية 90 درجة، ثم بزاوية 70٪ خلال التحريك، إذ يتم تحريكها لمواجهة المشاهد.

يمكننا تطبيق مجموعة الإطارات المفتاحية هذه على كل عناصر span على النحو التالي:

.byline span {
  animation: spin-letters 10s linear infinite;
}

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

بجمع كل ذلك معًا، سنحصل على المشهد التالي:

css-starwars-min.gif
المصدر: http://codepen.io/donovanh/pen/pJzwEw?editors=110

تمرين

إذا كان لديك الوقت، أشجعك على إلقاء نظرة على قسم CSS في نسخة CodePen.

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

المصادر

  • ترجمة وبتصرف للفصل star wars من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...