CSS плъзгач
За този урок трябва да имате основно разбиране за CSS3 преходите и анимациите на ключови кадри. Използвайки тази проста концепция, ще видим как да направим плъзгач за изображение. Моля, обърнете внимание, че тези свойства ще работят само в модерни браузъри (по-специално IE10+).
Основни понятия за CSS преходи
Обикновено, когато промените CSS стойност, промяната се случва незабавно. Сега, благодарение на универсалното свойство за преход на CSS3, можем лесно да анимираме от старото към новото състояние.
Можем да използваме четири свойства на прехода:
- conversion-property - дефинира свойствата на CSS, към които трябва да се прилагат преходи.
- shift-duration - определя продължителността на преходите.
- shift-timing-function - определя как се изчисляват междинните преходни стойности. Ефектите от функцията за време на забавяне обикновено се наричат реверсивни функции.
- shift-delay - определя кога започва преходът.
Тъй като технологията все още е сравнително нова, ще трябва да се използват префикси на браузъра. Ще ги пропуснем в примерите за код в тази статия, но не забравяйте да ги включите в кода си, за да може CSS плъзгачът да работи правилно. Нека видим как да приложим прост преход към връзка:
Когато присвоявате анимация на елемент, можете също да използвате съкратената нотация:
Нека видим как да приложим проста анимация към div.
Но можем да използваме съкратена нотация, като напишем всички свойства на анимацията наведнъж:
Ключови кадри за CSS слайдер
Ключовите кадри определят как изглежда анимацията на всеки етап от времевата линия. Използване на ключови кадрипроцентна стойност за определяне на времето: 0% е началото на анимацията, а 100% е краят. Можете също да добавите ключови кадри за междинна анимация.
CSS структура на плъзгача
След като вече знаем как работят преходите и анимациите, нека да видим как да създадем нашия плъзгач, използвайки само CSS3. Тази фигура показва как трябва да работи анимацията:
Както можете да видите, нашият плъзгач е контейнер, в който се показват изображения. Анимацията тук е много проста: изображението следва предварително зададен път чрез анимиране на горното свойство и промяна на свойствата z-index и opacity, докато изображението се връща в първоначалното си състояние. Нека се потопим в HTML маркирането, за да създадем плъзгача.
HTML маркирането е много просто и удобно за SEO. Нека да разгледаме по-отблизо как работи всичко:
Това е основният контейнер на плъзгача. Той няма конкретна функция, но трябва да поставим на пауза анимацията му.
Ще използваме CSS маска на плъзгача, за да скрием всичко извън него.
Всеки елемент от списъка има ID и клас. Идентификаторът отговаря за подсказката, а класът е прикрепен към анимацията, която трябва да се случи.
Блок за показване на заглавието на изображението. Можете да го промените, за да отговаря на вашите нужди, като например да го направите интерактивен и да добавите кратко описание.
Той съдържа функция, която показва напредъка на анимацията.
Сега е време за CSS стиловете.
плъзгач в стил css
Нека създадем основната структура на плъзгача. Ще бъде със същия размер като изображението. CSS границата на свойството ще бъде полезна за създаване на граница около изображението.
Блокът за маска ще скрие всички елементи, които се намират извън плъзгача; височината му трябва да бъдеравна на височината на плъзгача.
И накрая, за да сортирате списъка с изображения, ще зададем position: absolute и top: -325px, така че всички изображения да бъдат позиционирани извън плъзгача.
С тези няколко реда код създадохме нашия плъзгач без javascript, всичко, което остава, е да добавим анимацията.
Ключови кадри за CSS анимация
Преди да започнем да работим с анимацията, трябва да зададем някои параметри, за да получим правилния вид анимация. Общата продължителност на нашата анимация е 25 секунди, но трябва да знаем колко ключови кадъра са 1 секунда. Така че нека да разгледаме поредица от операции, които ще ни дадат точния брой ключови кадри въз основа на анимираните изображения. Ето изчисленията:
- Общият брой изображения в плъзгача е 5
- Продължителност на анимацията за всяко изображение - 5 секунди
- Обща продължителност на анимацията - 5 изображения × 5 секунди = 25 секунди
- Нека преброим колко ключови кадри са равни на една секунда, за това разделяме общия брой ключови кадри на общата продължителност на анимацията: 100 ключови. кадри / 25 сек. = 4 ключа. кадър
Сега можем да приложим CSS анимацията към плъзгача. Можем да поставим анимацията в безкраен цикъл, защото всяко изображение има своя собствена анимация.
След като са зададени свойствата на анимацията, трябва да използваме ключови кадри, за да настроим tween. Добавих също свойствата за непрозрачност и z-индекс, за да направя прехода от едно изображение към друго по-плавен. Първата анимация има повече ключови кадри от последната. Причината за това е, че когато последното изображение завърши своята анимация, първото изображение трябва да има допълнителни ключови кадри, за да не може потребителят да видипауза между циклите на анимация.
След като създадем анимацията, трябва да добавим лента за напредък, за да покажем продължителността на всяка анимация.
Индикатор за напредъка (лента за напредъка)
Процесът за създаване на анимация на индикатор е същият като за плъзгач. Първо създаваме самия индикатор:
Не се страхувайте от синтаксиса по-долу: той също така определя състоянията "от" и "до".
CSS3 плъзгач подсказка анимация
Плъзгачът е почти готов, но нека добавим някои детайли, за да стане по-функционален. Ще добавим подсказки за заглавия на изображения, които ще се виждат при задържане на мишката.
Ето CSS за подсказки:
Видяхме как да прилагаме преходи на CSS3 елементи; Сега нека го направим в подсказки.
Поставяне на пауза и продължаване на анимацията на плъзгача
Нека позволим на потребителите да правят пауза, за да прочетат съвет или да видят изображения. За да направим това, трябва да спрем анимацията, когато задържим курсора на мишката върху изображението (трябва също да спрем анимацията на лентата за прогрес).
Заключение и бонус CSS3 плъзгач)
Най-накрая стигнахме до края на урока. CSS3 слайдерът вече е 100% готов! Разгледайте демонстрацията на CSS слайдера без Javascript. Работи във Firefox 5+, Safari 4+, IE10+ и Google Chrome, както и в iPhone и iPad..