Слайдер на CSS
Для роботи з цим уроком вам потрібно мати загальне уявлення про CSS3 переходи та анімацію по ключових кадрах. Використовуючи цю просту концепцію, ми побачимо, як зробити слайдер зображень. Будь ласка, зверніть увагу, що ці властивості працюватимуть лише у сучасних браузерах (зокрема IE10+).
Базові концепції CSS переходів
Зазвичай, коли ви зміните CSS, зміна відбувається миттєво. Тепер, завдяки універсальній CSS3 властивості transition, ми можемо легко анімувати від старого до нового стану.
Ми можемо використовувати чотири властивості переходу:
- transition-property - визначає CSS властивості, яких повинні бути застосовані переходи.
- transition-duration – визначає тривалість переходів.
- transition-timing-function – визначає, як розраховуються проміжні значення переходу. Ефекти від часу затримки зазвичай називають реверсивними функціями.
- transition-delay – визначає коли починається перехід.
Оскільки технологія все ще відносно нова, потрібно використовувати префікси для браузерів. Ми будемо опускати їх у прикладах коду в цій статті, але не забудьте включити їх у своєму коді, щоб ваш слайдер на CSS працював належним чином. Давайте подивимося, як застосувати простий перехід до посилання:
При призначенні анімації до елемента ви також можете використовувати скорочений запис:
Давайте подивимося, як застосовувати просту анімацію в div.
Але ми можемо використовувати скорочений запис, записавши всі властивості анімації відразу:
Ключові кадри для CSS слайдера
Ключові кадри визначають те, як анімація виглядає кожному етапі тимчасової шкали. Ключові кадри використовуютьвідсоткове значення визначення часу: 0% це початок анімації, а 100% кінець. Ви також можете додати ключові кадри для проміжної анімації.
Структура CSS-слайдера
Тепер, коли ми знаємо як працюють переходи та анімації, давайте подивимося як створити наш слайдер, використовуючи лише CSS3. Цей малюнок показує, як анімація повинна працювати:
Як бачите, наш слайдер - це контейнер, у якому відображаються зображення. Анімація тут дуже проста: зображення слід попередньо визначеним шляхом шляхом анімації властивості top і змінюючи властивості z-index і opacity коли зображення повертається у вихідний стан. Давайте поринемо в HTML-розмітку для створення слайдера.
HTML-розмітка дуже проста і SEO доброзичлива. Розглянемо в деталях, як усе працює:
Це головний контейнер слайдера. Він не має певної функції, але ми маємо призупинити його анімацію.
Ми будемо використовувати маску для CSS слайдера, щоб приховати все, що відбувається за її межами.
Кожен елемент списку має ідентифікатор та клас. Ідентифікатор відповідає за підказку, а клас прив'язаний до анімації, яка має статися.
Блок відображає назву зображення. Ви можете змінити його під свої потреби, наприклад, зробивши його інтерактивними та додавши короткий опис.
Він містить функцію, яка показує перебіг анімації.
Тепер настав час для CSS стилів.
CSS стилі слайдера
Давайте створимо базову структуру слайдера. Він матиме той самий розмір, що й зображення. CSS властивості border буде корисно для створення рамки навколо зображення.
Блок mask приховає всі елементи, що лежать поза слайдера; його висота має бутидорівнює висоті слайдера.
Нарешті, щоб відсортувати список зображень, ми задамо position: absolute і top: -325px , тому всі зображення будуть розташовані за межами слайдера.
За допомогою цих кількох рядків коду ми створили наш слайдер без JavaScript, залишилося тільки додати анімацію.
Ключові кадри CSS анімації
Перш ніж ми почнемо працювати з анімацією, ми повинні вказати деякі параметри, щоб отримати правильний вид анімації. Загальна тривалість нашої анімації – 25 секунд, але ми повинні знати, скільки ключових кадрів дорівнюють 1 секунді. Отже, розглянемо серію операцій, які дадуть нам точну кількість ключових кадрів на основі анімованих зображень. Ось розрахунки:
- Загальна кількість зображень у слайдері - 5
- Тривалість анімації для кожного зображення – 5 секунд
- Загальна тривалість анімації - 5 зображень × 5 секунд = 25 секунд
- Підрахуємо скільки ключових кадрів дорівнюють одній секунді, для цього розділимо загальну кількість ключових кадрів на загальну тривалість анімації: 100 ключ. кадрів/25 сек. = 4 ключ. кадру
Тепер ми можемо застосувати анімацію CSS до слайдера. Ми зможемо поставити анімацію на безкінечний цикл, тому що у кожного зображення своя власна анімація.
Після того, як призначені властивості анімації, ми повинні використовувати ключові кадри для налаштування анімації руху. Також я додав властивості opacity та z-index , щоб зробити перехід від одного зображення до іншого більш плавним. Перша анімація має більше ключових кадрів, ніж остання. Причина цього в тому, що коли останнє зображення завершило свою анімацію, перше зображення повинно мати додаткові ключові кадри, щоб користувач не бачив.перерва між циклами анімації.
Створивши анімацію, ми маємо додати прогрес бар для відображення тривалості кожної анімації.
Індикатор прогресу (прогрес-бар)
Процес створення анімації індикатора такий самий, як і у слайдера. По-перше, ми створюємо сам індикатор:
Не бійтеся синтаксису, описаного нижче: він також визначає стан "from" і "to".
CSS3 анімація підказки слайдера
Слайдер вже майже готовий, але давайте додамо кілька деталей, щоб зробити його більш функціональним. Ми додамо підказки для назв зображень, які будуть видно під час наведення.
Ось CSS для спливаючих підказок:
Ми бачили, як застосувати CSS3 переходи елементів; Тепер давайте зробимо це у підказках.
Пауза та продовження анімації слайдера
Давайте дозволимо користувачам зробити паузу, щоб прочитати підказку або розглянути зображення. Для цього ми повинні зупинити анімацію при наведенні курсору миші на зображення (ми також маємо зупинити анімацію індикатора прогресу).
Висновок та бонусний CSS3 слайдер)
Нарешті ми досягли кінця уроку. CSS3 слайдер готовий на 100%! Погляньте на демонстраційний приклад слайдера CSS без Javascript. Він працює в Firefox 5+, Safari 4+, IE10+ та Google Chrome, а також iPhone та IPad.