شريط تمرير سريع الاستجابة في خالص المغلق. شريط تمرير CSS مستجيب مع تأثير إبداعي

أريد أن أخبرك بطريقة بسيطة لإنشاء شريط تمرير ، دون استخدام JS ، باستخدام الرسوم المتحركة CSS.

1) أولاً ، لنكتب HTML ، لنفترض أن 4 صور ستحل محل بعضها البعض في شريط التمرير.

2) بعد ذلك ، سنرتب حجم الكتلة ، وعدد قليل من الإعدادات الأخرى ، الموضع: النسبي ضروري لإنشاء سياق تنسيق ، ثم سيكون من الواضح السبب.

شريط التمرير (العرض: 500 بكسل ؛ الارتفاع: 300 بكسل ؛ الهامش: تلقائي ؛ أعلى الهامش: 25 ​​بكسل ؛ الحد: 1 بكسل أسود خالص ؛ الموضع: نسبي ؛ تجاوز: مخفي ؛)
3) دعنا أيضًا نحدد بعض الخصائص للشرائح نفسها:

الشريحة (العرض: 500 بكسل ؛ الارتفاع: 300 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛)
كما ترى من CSS ، فإننا نضع جميع الشرائح في الزاوية اليسرى العليا من شريط التمرير ، وبالتالي نعطي نفس الموضع الأولي.

1. الشريحة في موضعها الأصلي ، معروضة للمستخدم

2. تتحرك الشريحة إلى اليسار حتى تتجاوز تمامًا حدود شريط التمرير (شريط التمرير ، كما هو مذكور أعلاه ، به تجاوز: مخفي ، وبالتالي لا تعمل الشريحة فوق الكائنات المحيطة).

5. الشريحة تنخفض مستوى واحد مع شريط التمرير

6. تنتقل الشريحة إلى موضعها الأصلي.
بمعنى آخر (في الوقت الحالي ، سأقوم بتسمية الإطارات وفقًا للأرقام الواردة في القائمة أعلاه):

شريحةkeyframes (من (أعلى: 0 ؛ يسار: 0 ؛) 1 (تحويل: ترجمة (0 بكسل ، 0 بكسل) ؛) 2 (تحويل: ترجمة (-500 بكسل ، 0) ؛) 3 (تحويل: ترجمة (-500 بكسل ، 300 بكسل) ) ؛) 4 (تحويل: ترجم (500 بكسل ، 300 بكسل) ؛) 5 (تحويل: ترجم (500 بكسل ، 0) ؛) إلى (تحويل: (0 بكسل ، 0 بكسل) ؛))
5) لذلك ، أصبح من الواضح كيف يبدو مسار الشريحة. كل شريحة "تدور" حول الحاوية الخاصة بها - شريط التمرير - وتعود إلى الحاوية الأصلية. بهذه الطريقة يمكننا تدوير أي عدد من الشرائح إلى ما لا نهاية. ولكن هناك فارق بسيط واحد هو الأكثر أهمية في هذا المخطط - الوقت. تحتاج إلى ضبط توقيت لوحة الرسوم المتحركة بشكل صحيح وتعيين التأخير الصحيح لكل شريحة حتى لا يندفع الجميع للتحريك في نفس الوقت. لفهم كيفية ضبط التأخير بشكل صحيح وحساب وقت الرسوم المتحركة ، اتبعت المسار الموضح أدناه.

لنأخذ تسميات الخطوة من الفقرة السابقة ونكتشف ما يحدث في كل خطوة. بشكل أساسي ، الخطوات رقم 1 و 2 و 6 هي الخطوات التي تدخل فيها الشريحة المنطقة المرئية. من حقيقة أن الشرائح يجب أن تتحرك بشكل لا ينفصل ، وكما كانت ، تدفع بعضها البعض خارج شريط التمرير ، يمكننا أن نستنتج أن مدة الخطوتين 2 و 6 يجب أن تكون متساوية. سأقوم بالحجز على الفور لأنني تمكنت من العمل بنجاح مع هذا التصميم فقط بشرط أن تكون مدة الخطوة الأولى مساوية أيضًا لمدة الخطوتين الثانية والسادسة. ما يحدث خلال الخطوتين 3 و 4 و 5 هو في الأساس حاجة فنية ، ومن أجل البساطة ، دعنا نجمع هذه الخطوات الثلاث في 1.

بعد التبسيط لدينا:

1. الخطوة - يظهر شريط التمرير على الأصل
2. خطوة - يتحرك شريط التمرير إلى اليمين
3. خطوة - شريط التمرير يصنع حركات فنية
4. خطوة - يتحرك شريط التمرير إلى اليسار ، ويعود إلى موضعه الأصلي

لضمان عرض شرائح سلس ، في اللحظة التي تنتقل فيها الشريحة إلى الخطوة 2 ، يجب أن تنتقل الشريحة التالية إلى الخطوة 4.

إذا كان الوقت لكل دائرة في الرسم المتحرك بأكمله هو t ؛
عدد الشرائح - ن ؛
مدة 3 خطوات - ذ ؛
مدة الخطوات 1 و 2 و 4 - x ؛
خطوة تأخير الرسوم المتحركة لـ n-slide هي z ؛
الذي - التي:

ص = (100 * ن - 150) / ن ؛
س = (100 - ص) / 3 ؛
يجب تحويل x و y إلى نسب مئوية ، وبعد ذلك:
ض = 2 * س * تي ؛

بالنسبة للحالة عندما يكون n = 4 ، كما في المثال أعلاه ، نحصل على:

الخطوة الثالثة - 62.5٪ ، الأولى ، الثانية والرابعة - 12.5٪ لكل منهما. خطوة تأخير الرسوم المتحركة لكل شريحة لاحقة هي 25٪.

ما الفترات الزمنية بين المراحل ضمن الخطوة الثالثة لا يهم.

6) الآن بعد أن حسبنا كل شيء وعرفنا كل القيم ، يمكننا إعطاء الكود النهائي.

حيوية:

شريحةkeyframes (من (أعلى: 0 ؛ يسار: 0 ؛) 12.5٪ (تحويل: ترجمة (0 بكسل ، 0 بكسل) ؛) 25٪ (تحويل: ترجمة (-500 بكسل ، 0) ؛) 36٪ (تحويل: ترجمة (- 500 بكسل ، 300 بكسل) ؛) 37٪ (تحويل: ترجم (500 بكسل ، 300 بكسل) ؛) 87.5٪ (تحويل: ترجم (500 بكسل ، 0) ؛) إلى (تحويل: (0 بكسل ، 0 بكسل) ؛))
الشرائح:

Slide1 (الخلفية: url (1.jpg) ؛ تأخير الرسوم المتحركة: 7.5 ثوانٍ ؛) .slide2 (الخلفية: url (2.jpg) ؛ تأخير الرسوم المتحركة: 5s ؛) .slide3 (الخلفية: url (3.jpg) ؛ تأخير الرسوم المتحركة: 2.5 ثانية ؛) شريحة 4 (الخلفية: url (4.jpg) ؛ تأخير الرسوم المتحركة: 0 ثانية ؛)
CSS العامة لجميع الشرائح:

شريحة (العرض: 500 بكسل ؛ الارتفاع: 300 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ اسم حركة: منزلق ؛ مدة الرسوم المتحركة: 10 ثوانٍ ؛ وظيفة توقيت الرسوم المتحركة: خطي ؛ عدد مرات تكرار الرسوم المتحركة: لانهائي ؛ )
هذا كل شيء ، في الواقع! شكرا لكل من قرأ حتى النهاية.

3 مارس 2015 الساعة 06:15 مساءً

منزلق CSS3 نقي مثير للاهتمام ولكنه بسيط

• تطوير الموقع ،
• CSS ،
• لغة البرمجة

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

1. تخطيط الأساس

لتنفيذ شريط التمرير ، نحتاج إلى مجموعة بسيطة إلى حد ما من العلامات ، والتي بدورها ستكون مسؤولة عن عناصر شريط التمرير.

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

2. تصميم شريط التمرير

هنا سنتوقف ونلقي نظرة سريعة على المغلق. لاحظ أن بعض الخصائص مسبوقة ببادئات عبر المستعرضات حتى تتمكن جميع المتصفحات الحديثة من فهمها.

* (الهامش: 0 ؛ الحشو: 0 ؛ -حجم صندوق الويب: مربع الحدود ؛ -حجم مربع-أوز: مربع-مربع-تحجيم المربع: مربع الحدود ؛ حجم الصندوق: مربع الحدود ؛) الجسم (صورة الخلفية: url (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png) ؛)
مع تصميم الخلفية والأنماط العامة ، كل شيء واضح.

غلاف (الارتفاع: 350 بكسل ؛ الهامش: 100 بكسل تلقائي 0 ؛ الموضع: نسبي ؛ العرض: 700 بكسل ؛). شريط التمرير (لون الخلفية: #ddd ؛ الارتفاع: ترث ؛ تجاوز: مخفي ؛ الموضع: نسبي ؛ العرض: ورث ؛ -مجموعة ويب- مربع الظل: 0 0 20px rgba (0، 0، 0، .5)؛ -moz-box-shadow: 0 0 20px rgba (0، 0، 0، .5)؛ -o-box-shadow: 0 0 20 بكسل rgba (0 ، 0 ، 0 ، .5) ؛ ظل الصندوق: 0 0 20 بكسل rgba (0 ، 0 ، 0 ، .5) ؛)
يكون المربع المشترك ومربع التمرير بالحجم نفسه للتحكم الكامل في موضع شريط التمرير على الصفحة. بينما لا توجد شرائح ، قمنا بطلاء شريط التمرير مؤقتًا بلون رمادي فاتح.

غلاف> إدخال (عرض: لا شيء ؛)
إخفاء أزرار الاختيار. سنحتاجهم لاحقًا.

النتيجة على هذه اللحظةمثل:

3. تصميم الشرائح

سنكتب هنا أنماطًا عامة للشرائح ولكل شريحة على حدة:

الشرائح (الارتفاع: ترث ؛ الموضع: مطلق ؛ العرض: وراثة ؛). slide1 (صورة الخلفية: url (http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg) ؛) .slide2 (الخلفية -صورة: url (http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg) ؛) .slide3 (صورة الخلفية: url (http://habrastorage.org/files/663/6b1/ d4f /.jpg) ؛) .slide4 (صورة الخلفية: url (http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg) ؛) (background.org/habrastorage) 53c / ff6 / c1c /.jpg) ؛)
لقد حددنا الموضع المطلق لجميع الشرائح حتى نتمكن من اللعب بتأثيرات المظهر. أبعاد الشرائح مأخوذة من حجم شريط التمرير نفسه ، بحيث لا تضطر إلى كتابتها في عدة أماكن.

4. جعل التنقل بين الشرائح

نظرًا لأن أزرار الاختيار مخفية ونحتاج إليها كمفاتيح ، فإننا نصمم الملصقات المعدة:

عناصر التحكم في الغلاف (يسار: 50٪ ؛ الهامش الأيسر: -98 بكسل ؛ الموضع: مطلق ؛). تسمية الغلاف (المؤشر: المؤشر ؛ العرض: كتلة مضمنة ؛ الارتفاع: 8 بكسل ؛ الهامش: 25 ​​بكسل 12 بكسل 0 16 بكسل ؛ الموضع: نسبي ؛ العرض: 8 بكسل ؛ - نصف قطر مجموعة الويب: 50٪ ؛ - نصف قطر الحدودي: 50٪ ؛ نصف قطر الحدود: 50٪ ؛ نصف قطر الحد: 50٪ ؛) تسمية الغلاف: بعد (الحد: 2x - نصف القطر: 50٪ ؛ - نصف قطر الحدودي: 50٪ ؛ نصف القطر الحدودي: 50٪ ؛)
نجعل التنقل كلاسيكيًا. يمثل كل زر مساحة على شكل دائرة ، داخلها ، عندما تكون الشريحة نشطة ، سيتم تلوين المنطقة الفارغة جزئيًا. في غضون ذلك ، لدينا النتيجة التالية:

5. تعلم الضغط على الأزرار

حان الوقت لتعليم شريط التمرير تبديل الشرائح بالنقر فوق زر معين:

ملصق الغلاف (المؤشر: المؤشر ؛ العرض: كتلة مضمنة ؛ الارتفاع: 8 بكسل ؛ الهامش: 25 ​​بكسل 12 بكسل 0 16 بكسل ؛ الموضع: نسبي ؛ العرض: 8 بكسل ؛ -مجموعة الويب-الحد-نصف القطر: 50٪ ؛ -موز-حدود-نصف القطر: 50 ٪ ؛ -o-border-radius: 50٪ ؛ نصف قطر الحدود: 50٪ ؛ -webkit-transfer: background-in-out .5s ؛ -moz-transfer: background-in-out .5s ؛ -o- الانتقال: سهولة الدخول والخروج في الخلفية .5 ثوانٍ ؛ الانتقال: سهولة الدخول والخروج في الخلفية .5 ثانية ؛). تسمية الغلاف: hover ، # slide1: محدد ~ .controls label: nth-of-type (1)، # slide2: تم التحديد ~ .controls label: nth-of-type (2)، # slide3: محددة ~ .controls label: nth-of-type (3)، # slide4: محددة ~ .controls label: nth-of-type (4) ، # slide5: محدد ~. تسمية عناصر التحكم: nth-of-type (5) (background: #ddd؛)
في أزرار التنقل المزينة ، أضف لونًا سلسًا بداخلها. نضيف أيضًا شروطًا يتم من خلالها تلوين الزر النشط والزر الذي كان المؤشر يحوم فوقه بسلاسة. أزرار الراديو الخاصة بنا جاهزة:

6. تحريك شريط التمرير

حسنًا ، لقد نجحنا الآن في تبديل الشرائح أخيرًا:

الشرائح (الارتفاع: ترث ؛ العتامة: 0 ؛ الموضع: مطلق ؛ العرض: ترث ؛ مؤشر z: 0 ؛ -webkit-transform: scale (1.5) ؛ -moz-transform: scale (1.5) ؛ -o-transform: scale (1.5) ؛ تحويل: مقياس (1.5) ؛ -انتقال مجموعة الويب: تحويل easy-in-out .5s ، عتامة سهلة-داخل-خارج .5s ؛ -moz-transfer: تحويل سهل-داخلي-مخرج -5 ثانية ، سهولة التعتيم -in-out .5s ؛ -o-transfer: تحويل easy-in-out .5s ، عتامة سهلة-داخل-out .5s ؛ انتقال: تحويل سهل-داخلي-مخرج .5-s ، عتامة-داخل-مخرج .5-ثانية ؛ ) # slide1: حدد ~ .slider> .slide1، # slide2: حدد ~ .slider> .slide2، # slide3: حدد ~ .slider> .slide3، # slide4: محدد ~ .slider> .slide4، # slide5: محدد ~ .slider> .slide5 (العتامة: 1 ؛ z-index: 1 ؛ -webkit-transform: scale (1) ؛ -moz-transform: scale (1) ؛ -o-transform: scale (1) ؛ تحويل: مقياس ( 1) ؛)
في أنماط الشرائح العامة ، نضيف خصائص تجعل كل الشرائح غير مرئية وتتلاشى في الخلفية. أضفنا أيضًا زيادة طفيفة إلى الشرائح عندما تكون غير مرئية لإضفاء مظهر مثير للاهتمام في شريط التمرير.

يمكن الاطلاع على النتيجة هنا.

مرحبا عزيزي مشرفي المواقع المبتدئين.

هذا هو أبسط شريط تمرير CSS نقي في العالم.

تشمل مزايا مثل هذا المنزلق الخفة والأمان ، بالإضافة إلى حقيقة أنه حتى أكثر مشرفي المواقع المبتدئين يمكنهم إنشاؤه وتثبيته على موقعه.

العيب هو أنه لا يمكنك تكرار الحلقة باستخدام CSS وحدها.

ولكن إذا اعتبرنا أنه تم تمرير ثماني صور لأكثر من 30 ثانية ، فهذه المرة تكفي تمامًا للزائر لعرض الصفحة.

وإذا تم تثبيت شريط التمرير في رأس الموقع ، فلن يفكر فيه أحد لمدة نصف دقيقة.

يمكن تغيير تأثيرات الصور حسب رغبتك ، ووفقًا لإمكانيات CSS3. دعونا نرى أين وكيف يمكن القيام بذلك.

И на всякий случай — чтобы появилась возможность прокрутить слайдер ещё раз можно добавить следующий код:

При этом под слайдером появится кнопка которую можно назвать как Вам угодно и оформить в CSS.

P.S. Если постараться и подогнать интервалы показа картинок в @keyframes, то карусель можно сделать непрерывной.

У меня получилось. Можно посмотреть вот . Текст в баннерах прокручивается свойствами анимации без скрипта.

Правда получилось сделать только с тремя картинками.

P.P.S. Теперь подобные баннеры и на этом сайте под шапкой сайта.

Желаю творческих успехов.

1. Превосходное jQuery слайд-шоу

Большое эффектное слайд-шоу с использованием jQuery технологий.

2. jQuery плагин «Scale Carousel»

Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.

3. jQuery плагин «slideJS»

Слайдер изображений с текстовым описанием.

4. Плагин «JSliderNews»

5. CSS3 jQuery слайдер

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

6. Симпатичный jQuery слайдер «Presentation Cycle»

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

7. jQuery плагин «Parallax Slider»

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

8. Свежий, легкий jQuery слайдер «bxSlider 3.0»

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

9. jQuery слайдер изображений, плагин «slideJS»

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

10. jQuery плагин слайд-шоу «Easy Slides» v1.1

Простой в использовании JQuery плагин для создания слайд-шоу.

11. Плагин «jQuery Slidy»

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

12. jQuery CSS галерея с автоматической сменой слайдов

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

13. jQuery слайдер «Nivo Slider»

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.

14. jQuery слайдер «MobilySlider»

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

15. jQuery Плагин «Slider²»

Легкий слайдер с автоматической сменой слайдов.

16. Свежий javascript слайдер

Слайдер с автоматической сменой изображений.

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

19. jQuery слайдер«jShowOff»

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

20. Плагин «Shutter Effect Portfolio»

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

21. Легкий javascript CSS слайдер «TinySlider 2»

Реализация слайдера изображений с использованием javascript и CSS.

22. Обалденный слайдер «Tinycircleslider»

Стильный круглый слайдер. Переход между изображениями осуществляется с помощью перетаскивания по окружности ползунка в виде красного круга. Отлично впишется в ваш сайт, если вы в дизайне используете круглые элементы.

23. Слайдер изображений на jQuery

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

24. Галерея с миниатюрами «Slider Kit»

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

25. jQuery слайдер содержимого «Slider Kit»

Вертикальный и горизонтальный слайдер контента на jQuery.

26. jQuery слайд-шоу «Slider Kit»

Слайд-шоу с автоматической сменой слайдов.

27. Легкий профессиональный javascript CSS3 слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

29. Простое jQuery слайд-шоу

Слайд-шоу с кнопками навигации.

30. Потрясное слайд-шоу jQuery «Skitter»

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

31. Слайд-шоу «Awkward»

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

34. «Flux Slider» слайдер на jQuery и CSS3

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

35. jQuery плагин «jSwitch»

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

37. Новая версия плагина «SlideDeck 1.2.2»

Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.

38. jQuery слайдер «Sudo Slider»

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .

39. jQuery CSS3 слайд-шоу

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

40. jQuery cлайдер «Flux Slider»

Слайдер с множеством эффектов смены изображений.

41. Простой jQuery слайдер

Стильный слайдер изображений на jQuery.

Слайдер на CSS имеет ряд преимуществ над слайдерами на jQuery. Мы отказываемся от громоздких плагинов, благодаря чему повышается скорость загрузки сайта, а использование CSS анимации делает смену слайдов более плавной. Именно поэтому я хочу вас научить как сделать слайдер на CSS3.

Для работы с этим уроком вам нужно иметь общее представление о CSS3 переходах и анимации по ключевым кадрам. Используя эту простую концепцию, мы увидим как сделать слайдер изображений. Пожалуйста, обратите внимание, что эти свойства будут работать только в современных браузерах (в частности IE10+).

Слайдер на CSS3

Базовые концепции CSS переходов

Обычно, когда вы измените значение CSS, изменение происходит мгновенно. Теперь, благодаря универсальному CSS3 свойству transition , мы можем легко анимировать от старого к новому состоянию.

Мы можем использовать четыре свойства перехода:

1. transition-property - определяет CSS свойства, к которым должны быть применены переходы.
2. transition-duration - определяет длительность переходов.
3. transition-timing-function - определяет, как рассчитываются промежуточные значения перехода. Эффекты от функции времени задержки обычно называют реверсивными функциями.
4. transition-delay - определяет когда начинается переход.

Поскольку технология все еще относительно новая, потребуется использовать префиксы для браузеров. Мы будем опускать их в примерах кода в этой статье, но не забудьте включить их в своем коде чтобы ваш слайдер на CSS работал должным образом. Давайте посмотрим, как применить простой переход к ссылке:

A { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

При назначении анимации к элементу вы также можете использовать сокращенную запись:

A { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

Давайте посмотрим как применять простую анимацию в div .

/* К этим элементам также применяем анимацию */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; } /* Это код анимации */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } }

Но мы можем использовать сокращенную запись записав все свойства анимации сразу:

Div { animation: move 1s ease-in-out 0.5s 2 alternate; }

Ключевые кадры для CSS слайдера

Ключевые кадры определяют то, как анимация выглядит на каждом этапе временной шкалы. Ключевые кадры используют процентное значение для определения времени: 0% это начало анимации, а 100% конец. Вы можете также добавить ключевые кадры для промежуточной анимации.

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточными ключевыми кадрами */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

Структура CSS-слайдера

Теперь, когда мы знаем как работают переходы и анимации, давайте посмотрим как создать наш слайдер, используя только CSS3. Этот рисунок показывает как анимация должна работать:

Как функционирует анимация слайдера

Как видите, наш слайдер - это контейнер, внутри которого отображаются изображения. Анимация здесь очень простая: изображение следует по предварительно определенному пути путем анимации свойства top и меняя свойства z-index и opacity когда изображение возвращается в исходное состояние. Давайте погрузимся в HTML-разметку для создания слайдера.

HTML-разметка очень проста и SEO дружелюбна. Рассмотрим в деталях, как все работает:

• div id="slider"

  Это главный контейнер слайдера. Он не имеет определенной функции, но мы должны приостановить его анимацию.

• div id="mask"

  Мы будем использовать маску для CSS слайдера, чтобы скрыть все, что происходит за его пределами.

• li id="first" class="firstanimation"

  Каждый элемент списка имеет идентификатор и класс. Идентификатор отвечает за подсказку, а класс привязан к анимации, которая должена произойти.

• div class="tooltip"

  Блок для отображения названия изображения. Вы можете изменить его под свои нужды, например, сделав его интерактивными, и добавив краткое описание.

• div class="progress-bar"

  Он содержит функцию, которая показывает ход анимации.

Теперь пришло время для CSS стилей.

CSS стили слайдера

Давайте создадим базовую структуру слайдера. Он будет иметь тот же размер, что и изображение. CSS cвойство border будет полезно для создания рамки вокруг изображения.

/* Структура слайдера */ .slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Блок mask скроет все элементы, которые лежат за пределами слайдера; его высота должна быть равна высоте слайдера.

/* Спрячем все */ .mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, мы зададим position: absolute и top: -325px , так что все изображения будут расположены за пределами слайдера.

/* Список изображений */ .slider ul { margin: 0; padding: 0; position: relative; } .slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Длина изображения */ position: absolute; top: -325px; /* Исходное положение - вне слайдера */ list-style: none; }

С помощью этих нескольких строк кода мы создали наш слайдер без javascript, осталось только добавить анимацию.

Ключевые кадры CSS анимации

Анимация изображения для слайдера

Прежде чем мы начнем работать с анимацией, мы должны указать некоторые параметры для того, чтобы получить правильный вид анимации. Oбщая продолжительность нашей анимации - 25 секунд, но мы должны знать, сколько ключевых кадров равны 1 секунде. Итак, давайте рассмотрим серию операций, которые дадут нам точное число ключевых кадров на основе анимируемых изображений. Вот расчеты:

1. Общее количество изображений в слайдере - 5
2. Продолжительность анимации для каждого изображения - 5 секунд
3. Общая продолжительность анимации - 5 изображений × 5 секунд = 25 секунд
4. Подсчитаем сколько ключевых кадров равны одной секунде, для этого разделим общее количество ключевых кадров на общую продолжительность анимации: 100 ключ. кадров / 25 сек. = 4 ключ. кадра

Теперь мы можем применить CSS анимацию к слайдеру. Мы сможем поставить анимацию на бесконечный цикл, потому что у каждого изображения своя собственная анимация.

Firstanimation { animation: cycle 25s linear infinite; } .secondanimation { animation: cycletwo 25s linear infinite; } .thirdanimation { animation: cyclethree 25s linear infinite; } .fourthanimation { animation: cyclefour 25s linear infinite; } .fifthanimation { animation: cyclefive 25s linear infinite; }

После того, как свойства анимации назначены, мы должны использовать ключевые кадры для настройки анимации движения. Также я добавил свойства opacity и z-index , чтобы сделать переход от одного изображения к другому более плавным. Первая анимация имеет больше ключевых кадров, чем последняя. Причина этого в том, что когда последнее изображение завершило свою анимацию, первое изображение должно иметь дополнительные ключевые кадры для того, чтобы пользователь не видел перерыва между циклами анимации.

/* Анимация на примере первых двух изображений */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайда первое изображение уже видно */ 4% { top: 0px; } /* Исходное положение */ 16% { top: 0px; opacity:1; z-index:0; } /* От 4% до 16% = изображение видно 3 секунды */ 20% { top: 325px; opacity: 0; z-index: 0; } /* От 16% до 20% = 1 секунда на уход изображения */ 21% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* От 96% до 100% = 1 секунда на появление изображения */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходное положение */ 16% { top: -325px; opacity: 0; }/* Начинает двигаться на эту позицию после 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* От 20% до 24% = 1 секунда на появление изображения */ 36% { top: 0px; opacity: 1; z-index: 0; } / * От 24% до 36% = изображение видно 3 секунды * / 40% { top: 325px; opacity: 0; z-index: 0; } /* От 36% до 40% = 1 секунда на уход изображения */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } }

Создав анимацию, мы должны добавить прогресс бар для отображения продолжительности каждой анимации.

Индикатор прогресса (прогресс-бар)

Процесс создания анимации индикатора такой же, как и у слайдера. Во-первых, мы создаем сам индикатор:

/* Индикатор прогресса слайдера */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса, описанного ниже: он также задает состояние "from" и "to".

/* CSS3 анимация индикатора прогресса слайдера */ @keyframes fullexpand { /* В этих ключевых кадрах индикатор находится в неподвижном состоянии */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих ключевых кадрах прогресс-бар начинает оживать */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих ключевых кадрах индикатор движется вперед в течение 3 секунд */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах прогресс-бар закончил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах прогресс-бар исчезнет, а затем цикл возобновится */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

CSS3 анимация подсказки слайдера

Слайдер уже почти готов, но давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы добавим подсказки для названий изображений, которые будут видны при наведении.

Вот CSS для всплывающих подсказок:

Tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали так, что показываются только заголовки изображений, но вы можете сделать то же самое с пользовательским контентом, ссылками и пр.

Анимация подсказки при наведении

Мы видели, как применить CSS3 переходы элементов; Теперь давайте сделаем это в подсказках.

Tooltip { … transition: all 0.3s ease-in-out; } .slider li:hover .tooltip { left: 0px; }

Пауза и продолжение анимации слайдера

Остановка анимации при наведении курсора мыши

Давайте разрешим пользователям сделать паузу, чтобы прочитать подсказку или рассмотреть изображения. Для этого мы должны остановить анимацию при наведении курсора мыши на изображение (мы также должны остановить анимацию индикатора прогресса).

Slider: hover li, .slider:hover .progress-bar { animation-play-state: paused; }

Заключение и бонусный CSS3 слайдер)

Наконец, мы достигли конца урока. CSS3 слайдер теперь готов на 100%! Взгляните на демонстрационный пример CSS слайдера без Javascript . Он работает в Firefox 5+, Safari 4+, IE10+ и Google Chrome, а также iPhone и IPad..

Эффект впечатляет, но по общему признанию, это слайдер не очень гибкий. Например, чтобы добавить больше изображений, вам придется редактировать все ключевые кадры. CSS3 имеет большой потенциал, но иногда лучше воспользоваться JavaScript, чем заморачиваться с ключевыми кадрами. А теперь, бонусный слайдер на CSS3 , как я и обещал.