المحتوى عن 'fave'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • السلوك التنظيمي
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
    • React
  • HTML
    • HTML5
  • CSS
  • SQL
  • لغة C#‎
  • لغة C++‎
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • ‎.NET
    • ASP.NET
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
    • منصة Xamarin
  • سهولة الوصول
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 1 نتيجة

  1. حدّث تويتر مؤخرًا تصميم زر التفضيل "fave" الخاصّ به، وذلك بتقديم تحريكٍ جديد، وبدلًا من الاعتماد على التنقل transitions في CSS، فإن التحريك المُستخدم يعتمد على استخدام سلسلة من الصور، في هذا الشرح سيتمّ إعادة إنشاء التحريك باستخدام CSS وبدالة التوقيت steps. وهم الحركة (Illusion of movement) يُشبه هذا التأثير إلى حدٍ كبيرٍ التأثير المُقدّم بواسطة أجهزة Zoetrope القديمة، حيثُ تعرض سلسلة من الرسومات في حلقة وحول أسطوانة، ولكن ما سيتمّ استخدامه هنا هو عرض سلسلة مُسطّحة من الصور داخل عنصر. عرض المثال مثال على تحريك الزر عند حركة المرور hover: .twitter-fave { width: 70px; height: 50px; background: url("//raw.githubusercontent.com/HsoubAcademy/HsoubAcademy.github.io/master/examples/CSS-animation-series/Twitter%20fave%20animation/twitter_fave.png") no-repeat; background-position: 0 0; } .twitter-fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } يمكن معاينة الملفات المصدرية لهذا الدرس على حساب أكاديمية حسوب على Github. تمّ في البداية إنشاء سلسلة من الصور، والّتي ستُشكل التحريك في نهاية الأمر: يجب وضع هذه الصور/الإطارات على صفّ واحد بهدف إتمام عمليّة التحريك بسهولة أكبر، ليتمّ عندها التحويل من الصورة الأولى إلى الصورة الأخيرة، وذلك عبر التحكم بمكان الخلفيّة باستخدام شيفرة CSS. كيف ستتموضع صور الخلفيّة background image ضمن العنصر: دالة التوقيت ()steps كما هو الأمر مع مُعظم دالات التوقيت مثل ease أو cubic-bezier، فإن الانتقال transition يُحرّك العنصر بسلاسة بين حالة البداية وحالة النهاية، أما دالة التوقيت steps فهي مُختلفة، فبدلًا من ذلك الانتقال (بين نقطتين)، سيتمّ تقسيم التحوّل/الانتقال إلى عدد من الخطوات والتحكم بين هذه الخطوات بشكل مُنفصل. تمثيل دالة ()steps بالرسم البياني، والّتي تَظهر على شكل سلسلة من الخطوات: البداية مع إعداد HTML: <section class="fave"></section> صورة الخلفيّة Background image سيتمّ في الخطوة التّالية تنسيق العنصر السابق وإضافة تَمَوْضُع لصورة الخلفيّة background image: .fave { width: 70px; height: 50px; background: url(images/twitter_fave.png) no-repeat; background-position: 0 0; } سيتمّ إضافة تنسيق لحركة المرور hover، ليتم نقل تَمَوْضُع الخلفيّة إلى نهاية سلسلة الصّور: .fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } تمّ في الخاصّيّة الثانية تعيين قيمة للانتقال transition، وذلك للخاصية background وبمدة انتقال ثانية واحدة، ولدالة التوقيت ()steps القيمة 55، وذلك لأن عدد الصور الكلّي الّتي سيتمّ التبديل بينها هو: 55. لن يحدث التحريك إلّا عند حركة المرور hover، حيثُ سيتمّ الانتقال عبر جميع الصور وبعدد خطوات متساوي (55 خطوة). لماذا لا يتمّ استخدام gif مع التحريك؟ يُمكن في الحقيقة استخدام الصور المُتحركة (gifs)، ولكن لن تكون الاختيار الأمثل في هذه الحالة، حيثُ حجم الملفّ سيكون أكبر، ومن الصعب التحكم بمُعدّل النقل، ولكن بالطريقة المُستخدمة هنا يُمكن عمل: إيقاف مؤقت، إعادة التحريك، وإجراء كافّة التعديلات المطلوبة لإتمام التحريك على الوجه المطلوب. استخدامات أخرى للدالة steps إن تحريك الصور من نوع sprites هو أحد استخدامات دالة التوقيت steps، فأي شيء يحتاج إلى التحريك على شكل سلسلة من الخطوات المُفصّلة، يُمكن له الاستفادة من هذه الدالة. أقصوصة الغش (Cheatsheet) تقدّم الأقصوصة التّالية مُختصر للمقالة، والذي يُمكن الرجوع إليه عند تطبيق الدرس. خاتمة ما أجمل التحريك في صفحات الويب؛ سرعة، خفّة، مرونة، جمال، أنصح بالقراءة عن الأمر والتعمّق في جنباته، فهو الوجه الجديد لصفحات الويب. ترجمة وبتصرّف للمقال Twitter’s "fave" animation.