مقدمة عن CSS Image Sprites: من السهل تعلمها ومن الرائع معرفتها

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

ومع ذلك ، فقد عادوا في السنوات الأخيرة.

Sprite هو مصطلح رسومي حاسوبي لصورة نقطية ثنائية الأبعاد مدمجة في مشهد أكبر.

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

بالنسبة إلى نظام أساسي مثل Facebook - الذي يضم أكثر من مليار مستخدم - يتطلب عرض الرموز والصور والمحتوى المماثل طلبات خادم متعددة. الطلبات تفرط بلا داع في زيادة حركة المرور.

إذن ماذا تفعل لتقليل طلبات الخادم وعرض النطاق الترددي؟ أنتقل إلى صور CSS.

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

دعونا نرى مثالاً يتضمن الأعلام:

الآن دعنا نرى كيف يعمل:

كما ترون في الكود أعلاه ، قمنا بإعداد القاعدة التي تتكون من ثلاثة divs ، حيث سيكون كل div حاملًا للعفريت.

أولاً ، اخترنا div بمعرف أولاً. سيكون لدي div حجم الطول والعرض الذي سيتم عرضه على صفحتنا. كخلفية ، سنقوم بتحميل صورة بعنوان URL ("//i.postimg.cc/R0N7nkH9/flags.png") .

الشيء التالي هو تصغير / تصغير حجم صورة الخلفية لدينا بحجم الخلفية: 1400 بكسل. (يمكننا استخدام حجم البكسل الفعلي أو النسبة المئوية أو em أو rem.) ستسمح لنا هذه المعلمة "بتكبير" صورة حتى النقطة التي يظهر فيها جزء معين فقط من الصورة.

أخيرًا ، المعلمتان اللتان تأتيان بعد الخلفية:

عنوان URL ("// i.postimg.cc/R0N7nkH9/flags.png") ، سينقل الجزء من الصورة الرئيسية ، والذي سيكون مرئيًا على طول المحور X و Y. مما يعني أنه في هذه الحالة الخلفية:

URL ("// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px ؛ سنعرض الجزء الذي يتم إزاحته من أعلى الصورة بمقدار 87 بكسل من الأعلى و 86 بكسل من اليسار .

يشير الرقم الأول ( -86 بكسل ) إلى المحور السيني حيث يعني السالب الانتقال من اليسار إلى اليمين والإيجابي يشير إلى الانتقال من اليمين إلى اليسار. يتم استخدام الأرقام الثانية (-87 بكسل) للإزاحة من أعلى إلى أسفل ، حيث يتم تطبيق القواعد المقلوبة ، ويعني الرقم الموجب الانتقال من أسفل إلى أعلى ، والسالب بالطبع الانتقال من أعلى إلى أسفل.

كما ترون في الصورة الأصلية ، العلم الذي حصلنا عليه (البوسنة) هو بالفعل الثاني من الأعلى والثاني من اليسار.

جيد بما فيه الكفاية؟ حسنا دعنا نكمل.

الآن دعونا نملأ div بمعرف ثانية. سيتم تطبيق نفس قواعد الإعداد وسيكون التغيير الوحيد هو أنه في هذه الحالة ، سنبقى على المحور السيني الأصلي (0 بكسل) ، وسيتجه الاتجاه Y من الجزء السفلي باتجاه الأعلى (89 بكسل). مرة أخرى ، إذا قمت بفحص الصورة الأصلية ، فقد ترى أن (أوزبكستان) هي أولًا من الأسفل ، والأول من اليسار.

وأخيرا وليس آخرا…

نعم ، أخيرًا نقوم بملء آخر div بمعرف ثالث. القواعد هي نفسها ، وإذا خمنت أننا انتقلنا من الأسفل إلى الأعلى ، فهذا صحيح.

الآن لحظة الحقيقة….

في الحالة أعلاه ، كنا نتحرك على طول المحور X و Y لإظهار أجزاء معينة من الصورة بأعلام. بالذهاب من اليمين إلى اليسار ولأسفل ، حصلنا على البوسنة (المحور السيني) ، من الأسفل واليسار (المحور الصادي) حصلنا على تايلاند وأوزبكستان. كما رأيت ، نحن نستخدم صورة واحدة فقط ، وهذا يعني طلبًا واحدًا فقط للصورة.

من المهم أن تعرف أنه عندما تقوم ببناء النقوش المتحركة ، يجب أن تحتوي تلك الصورة الأساسية على نفس أجزاء الصور بداخلها ، من أجل راحتك. كما في هذه الحالة حيث نتحرك نحو اليسار واليمين ، أعلى وأسفل ، بحجم الجزء بالإضافة إلى المساحة البيضاء. أوزبكستان (89 بكسل) وتايلاند (178 بكسل) لديهما فرق 89 بكسل وهو الحجم الفعلي (87 بكسل) بالإضافة إلى المساحة البيضاء (1 بكسل + 1 بكسل).

نعم ، يمكنك عمل رسوم متحركة أيضًا.

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

الأمر بهذه السهولة :)

أتمنى أن تكون قد استمتعت بقراءة هذا المقال.

ترقبوا المزيد ...