Для створення анімованого слайдеру тільки на основі css потрібно створити відповідний html-код на веб сторінці. Слайдер буде розміщено в секції темного кольору .dark, стилізація цього блоку описана в попередніх публікаціях.
Конструктивно слайдер представляє собою блок-контейнер .container_slider_css, в якому розміщуються зображення слайдеру, html-код секції темного кольору уже був використаний раніше:
Блоки .dark-container, .dark-text стилізовані раніше, тому залишається стилізувати тільки блок з зображеннями.
Блок контейнера зображень .container_slider_css розміром 600х600рх потрібно розмістити по центру вікна браузера з верхнім зовнішнім відступом, так як блоку контейнера задано фіксований розмір (а у випадку з реалізацією саме такого слайдера, розміри блоку контейнера потрібно задавати чітко визначені), тому потрібно застосувати ще властивість overflow: hidden; на той випадок, коли вміст блоку контейнера не поміщається по висоті і ширині, все зайве потрібно у контейнері приховати. Цю функцію і виконує властивість overflow: hidden;
Також до блоку контейнера потрібно застосувати відносне позиціювання, щоб абсолютно позиціонувати самі зображення всередині блоку. В кінцевому результаті властивості блоку контейнера зображень .container_slider_css будуть такими:
Для реалізації слайдеру будуть застосовані css властивості анімації
Правило @keyframes
CSS keyframes дозволяє проводити зміни постійно і автоматично, а не тільки у відповідь на події миші, як у transition. За допомогою кейфреймів можна змінювати стилі CSS для заданого селектора в будь-якій точці в момент зміни стану або події.
Це правило використовується в парі з властивістю animation, за допомогою якого можна встановити duration, timing function, delay і direction.
Властивості типу transform, якщо вони входять до анімації, оголошуються всередині правила @keyframes.
Правило @keyframes встановлює ключові кадри під час анімації елемента.
Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які повинні застосовуватися до нього в певний момент часу. Таким чином, анімація це плавний перехід стильових властивостей від одного ключового кадру до іншого. Обчислення проміжних значень між такими кадрами робить браузер. Найпростіший варіант, коли є лише два ключові кадри - вихідний і кінцевий стан.
Кожне правило @keyframe повинно мати унікальне ім'я.
Це ім'я використовується в стилях елемента як animation:
.element {animation: animation-name;
}
У кейфреймі задаються правила, виражені у відсотках. Відсотки це точки вздовж тимчасової лінії анімації, всередині яких задаються стилі для рендерингу на елементі
У цьому прикладі елемент div з класом element змінює колір із рожевого на жовтий і в кінці на синій. Якщо точок лише дві, можна використовувати from і to:
from {
color: black;
}
to {
color: white;
}
}
Приклад роботи кейфрейму
See the Pen CSS @keyframes Color-changing Background by kravets (@raisa69) on CodePen.
Властивість animation
Сам по собі @keyframes без інструкцій, які визначають тривалість, тимчасову функцію та напрямок, нічого не робить. Всі ці інструкції працюють так само, як і у властивості transition.
Всі ці властивості можна задати в одній властивості animation за допомогою наступного синтаксису:
animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name;
Або їх можна задати окремо, додавши слово animation перед кожною підвластивістю:
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: infinite;
Не всі властивості обов'язкові, але вони повинні бути записані в правильному порядку, щоб браузер міг правильно застосувати timing value і відрізнити ім'я анімації від інших ключових слів.
Короткий опис властивостей:
- duration - задає тривалість анімації від початку до кінця;
- timing-function - задає спосіб пересування анімації вздовж тимчасового "треку", наприклад, ease, ease-in, linear тощо;
- delay – час затримки (якщо вона є) старту анімації;
- iteration-count – скільки разів грати анімацію,
- infinite - значення для зациклювання
Приклад застосування властивостей анімації
See the Pen Animation Timing functions visualization by kravets (@raisa69) on CodePen.
За замовчуванням анімація проходить один цикл та завершується. Як animation-iteration-count можна вказати значення як числа, тобто. скільки разів має запуститися анімація. Також для зациклювання можна використати ключове слово infinite.
Отже, для реалізації анімації зображень в блоці-контейнері потрібно задати анімацію безпосередньо для самих зображень, які мають клас .photo_slider_css, зображення будуть позиційовані абослютно відносно контейнера, анімації буде присвоєно ім'я round, для 9 зображень у слайдері час на 1 цикл анімації 45с, щоб зображення були адаптивними, визначаємо їх ширину у 100%, і задаємо початкову прозорість opacity: 0;
Далі потрібно визначити властивості для правила @keyframes для анімації round:
25% і 40% - це проміжки часу під час якого буде тривати анімація появи-зникнення зображення описаного властивістю opacity.
Наступним кроком буде визначення для кожного зображення слайдеру через скільки секунд від початку воно буде з'являтись і скільки буде затримуватись на екрані, щоб звернутись до кожного зображення, можна застосувати властивість псевдокласу :nth-child(), яка знаходить один або більше елементів, виходячи з їхньої позиції серед групи сусідніх елементів і вказати інтвервал часу в секундах
