أبسط وأصغر منزلق في العالم
بصفتي مصمم تخطيط في ذلك الوقت ، فهمت تمامًا كيفية عمل المكونات الإضافية وتكرارًا حول الواجهة الأمامية بعقل فضولي ، في محاولة لتحقيق تصغير الكود وتحسين العمل باستخدام CSS أو نفس التخطيط.
وُلد شريط التمرير بعد بضع تجارب مع z-index ، ولدهشتي ، كان البرنامج عبارة عن 10 أسطر فقط. لم أحول الصور إلى صورة خلفية وتركت القدرة على التمرير عبر كتل التخطيط حتى.
ها هو HTML لحاوية المشهد:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
دعنا نضيف بعض CSS التي ستحمّل علامات الصورة في مجموعة واحدة في X: 0 و Y: 0 (أعلى: 0 بكسل وعلى اليسار: 0 بكسل):
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
لم أعد أستخدم قيمًا ثابتة مثل PX في التخطيط نظرًا لظهور الشاشات 8K وأكثر ، لكنني أفعل كل شيء على وحدات منفذ عرض قابلة للتطوير ، مما يسمح لي بتجنب الدرج إلى استعلامات الوسائط وواجهات التصميم لأي دقة شاشة.
لنكتب الآن معالج JavaScript يتنقل ببساطة عبر المجموعة دون أي تأثيرات مع فاصل زمني:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
نستخدم setInteval للفراغ عند التهيئة لمدة 3 ثوانٍ وتنفيذ مكرر قابل لإعادة الضبط على حلقة زائفة. في كل علامة تالية في المؤقت ، قم بتغيير الفهرس z للصورة المطلوبة بالترتيب. تتم إعادة تعيين الفهرس z للصورة السابقة بشكل دائم إلى 0 ، ويتم إحضار عنصر الحلقة الحالية إلى المقدمة عن طريق ضبط مؤشر z على 1.
هذا كل شيء. أبسط وأصغر منزلق في العالم جاهز وموثوق به وابتدائي مثل بندقية كلاشينكوف الهجومية. الآن يتم وضع علامة على سطح السفينة بالكامل ويظهر عنصر الحلقة الزائفة الحالية في المقدمة. كل هذا يعمل بدون طرف ثالث في JavaScript خالص.
إضافة تأثيرات
ظهر الدوار (كما أسميته) بسيطًا جدًا وأردت إضافة بعض تأثيرات الانتقال. للقيام بذلك ، عليك بالفعل استخدام مكتبة تعرف كيفية تنشيط CSS بتأثيرات تخفيف رائعة (هناك 43 منها في RevolveR).
هنا القائمة:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
هنا ، يتم تنفيذ تسلسل رد الاتصال لإكمال حالة الرسوم المتحركة ، والتي تناسب إجمالي الوقت أثناء نوع مؤقت الفاصل الزمني المحدد ونحصل على انتقالات رائعة مع التلاشي والوميض.
كل شيء على ما يرام ، لكننا سنضيف أيضًا تأخيرًا عن طريق قلب العلم عندما يكون المؤشر فوق الجزء الرئيسي:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
الدوار بواسطة RevolveR Labs أثناء العمل
شاهد الدوار وهو يعمل هنا .
كما ترى ، لا يوجد الكثير من التعليمات البرمجية هنا أيضًا ، ويمكن تنفيذ تأثيرات أكثر تعقيدًا وإثارة للاهتمام. لكن الأمر متروك لك.