المبادئ الأساسية
تعتمد هذه الصناديق المنزلقة الديناميكية على نفس المبدأ الأساسي. تعمل علامة DIV مع ".boxgrid" كنافذة بعد تمرير العنصرين الآخرين في الكائن الذي تريد "النظر" إليه. لست متأكدا؟ دع هذه الصورة تعطيك فكرة:
بعد فهم هذا المبدأ الأساسي، يمكننا استخدام التأثير المتحرك للعناصر المنزلقة لكشف أو تغطية المنطقة المراد عرضها لإنشاء تأثير انزلاق.
انقر لمعاينة التأثير قم بتنزيل الملفات المصدر لهذا المثال
الخطوة الأولى – أساسيات CSS
في مخطط الإلهام أعلاه الذي يعطي البنية الأساسية، نحتاج إلى استخدام القليل من CSS لجعله يعرض التأثير المطلوب. يحدد CSS التالي نافذة العرض (.boxgrid) ويحدد الموضع الافتراضي للصورة في LEFT وTOP، وهو أمر مهم جدًا للتفسيرات المتداخلة عند الانزلاق. ولا تنس أن overflow:hidden سيجعل هذا ممكنًا.
.بوكسغريد {
العرض: 325 بكسل؛
الارتفاع: 260 بكسل؛
الهامش: 10 بكسل؛
تعويم: يسار؛
الخلفية:#161613;
الحدود: صلبة 2 بكسل #8399AF؛
الفائض: مخفي؛
الموقف: نسبي؛
}
.بوكسغريد إمغ {
الموقف: مطلق؛
أعلى: 0؛
اليسار: 0؛
الحدود: 0؛
}
إذا لم تكن مستعدًا لاستخدام CSS لتحقيق وصف شفاف، فيمكنك الانتقال مباشرةً إلى الخطوة الثانية:
.boxcaption{
تعويم: يسار؛
الموقف: مطلق؛
الخلفية: #000؛
الارتفاع: 100 بكسل؛
العرض: 100%؛
العتامة: .8؛
/* بالنسبة إلى IE 5-7 */
عامل التصفية: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* بالنسبة إلى IE 8 */
-مرشح MS: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
الآن، نحن بحاجة إلى تعيين نقطة البداية الافتراضية لمربع التسمية التوضيحية (أعتقد أن الطبقات أفضل من المربعات). إذا كنت تريد أن تكون مخفية تمامًا عند التهيئة، فستحتاج إلى تعيين TOP وLEFT على ارتفاع وعرض نافذتك (.boxgrid)، والذي (بالطبع) يتم تحديده حسب الاتجاه الذي تريد تحريكه. يمكنك أيضًا جعله يظهر جزءًا منه فقط عند التهيئة، كما هو موضح في .caption و.boxcaption (المحدد بواسطة CSS):
.captionfull .boxcaption {
أعلى: 260؛
اليسار: 0؛
}
.تعليق .boxcaption {
أعلى: 220؛
اليسار: 0؛
}
المصدر: المفضلة السعيدة