Създаване на разширено „Marquee“ с анимация CSS3
Днес ще разгледаме “навес” още веднъж. Ние всъщност разгледахме това в предишния ни пост, който говори за използването на -WebKit-палатка този път ще разгледаме този въпрос малко по-нататък.
В тази публикация ще създадем a палатка, подобни на ефект чрез CSS3 Анимация. По този начин ще можем да добавим повече функционалности, които не могат да бъдат постигнати само с -WebKit-палатка.
Освен ако вече не сте запознати с модула за анимация CSS3, ви препоръчваме да разгледате следните препратки, преди да продължите с тази документация:
- CSS3 Анимации - W3School
- CSS анимации - Mozilla Dev. мрежа
Също така имайте предвид, че в момента CSS3 Animation може да работи само с Firefox 8+, Chrome 12+ и Safari 5.0+ с предшестващата версия (-Моз- и -WebKit-). Въпреки това, ще използваме официалната версия от W3C без префикс, за да избегнем препълването на тази статия с излишни кодове..
Адресиране на издаването на Marquee
Един от проблемите с маркировката е, че текстът непрекъснато се движи. Това поведение е разрушително за четенето, а текстът също е труден за четене. Този път ще се опитаме да създадем своя собствена версия на marquee и да я направим по-удобна за потребителя. Например; вместо да се движи непрекъснато, ще го спрем, когато е напълно видим, така че потребителят може да прочете текста за момент.
Разказване (нещо като)
Всяко творческо и дизайнерско творчество, като лого, илюстрация или уебсайт, обикновено започва със скица. В областта на анимационното производство това се прави с таблото за разкази. Преди да започнем с кодиране, първо ще създадем a нещо като сценарий, да ни помогне да визуализираме нашата анимация.
Както можете да видите от горната сценария, планираме да покажем само два реда текст, които ще се движат последователно отдясно наляво.
Нашият сценарий не е толкова сложен като сценарий за истински анимационен филм, но въпросът е: сега можем да визуализираме как ще изглежда нашата шатра.
HTML кодът
Тъй като нашата анимация ще бъде проста, HTML маркирането ще бъде също толкова просто, колкото:
Как да добавите WordPress Свързани Постове Без Приставки
Автоматизирайте вашите Dropbox файлове с действия
Основните стилове
Преди да заобиколим анимационните неща, нека добавим някои основни стилове. Да започнем с добавяне на фонова текстура за HTML елемент.
html фон: url ('… /images/skewed_print.png'); След това ще поставим рамката в центъра на прозореца на браузъра, както и ще добавим някои детайли като вътрешна сянка, цвят на фона и граници..
.marquee ширина: 500px; височина: 50px; марж: 25px авто; overflow: hidden; позиция: относителна; граница: 1px твърдо # 000; марж: 25px авто; фонов цвят: # 222; - радиус: 5px; граничен радиус: 5px; -webkit-box-shadow: вмъкване 0px 2px 2px rgba (0, 0, 0, 5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: вмъкване 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
След това ще позиционираме текста - който в този случай е опакован в маркер на абзаца - абсолютно, а след това абсолютен позиция ще доведе до колапс на елемента, ще трябва да определим елемента на ширината 100% така, че да покрива ширината на родителите му.
.marquee p позиция: абсолютна; фамилия: Tahoma, Arial, sans-serif; ширина: 100%; височина: 100%; марж: 0; височина на линията: 50px; text-align: center; цвят: #fff; текстова сянка: 1px 1px 0px # 000000; филтър: dropshadow (цвят = # 000000, offx = 1, offy = 1);
Нека разгледаме резултата за известно време.
На този етап сме се справили с всички основни стилове, от които се нуждаем; Вие сте свободни да добавите повече или персонализирани стилове. Но ви препоръчваме да се придържате към посоченото от нас размери (височина и ширина) до края на урока.
Анимацията
Накратко, анимацията е представяне на движещи се обекти. Всяко движение се определя във времева рамка. Така че, когато работим по анимация, най-вече се занимаваме с път. Взимаме под внимание въпроси като:
- Кога обектът започва да се движи?
- Колко време отнема на обекта да се движи от една точка към друга?
- Кога и колко дълго обектът трябва да остане в дадена точка?
В CSS3 Анимация, път може да се дефинира с @keyframe синтаксис. Но преди да прескочим в тази секция, нека първо определим началната позиция на текста.
Планирахме, че текстът ще започне отдясно, после ще се премести надясно. Така че, тук първо ще го позиционираме надясно, използвайки свойството CSS3 Transformation.
.marquee p transform: translateX (100%);
Не забравяйте, че 100% дефинираният за нашия параграф елемент е равен на неговия родител широчина. Така че същото ще се прилага и тук; елементът на параграфа ще бъде преведена вдясно за 100% което в този пример е равно на 500px.
ключови кадри
Най- @keyframe Синтаксисът може да е малко озадачаващ за някои хора, така че тук сме създали прост визуален наръчник, който да ви помогне лесно да разберете какво се случва в @keyframe синтаксис.
Кликнете тук, за да видите по-голямата версия.
Цялата анимация ще продължи 20 секунди и е разделена на две последователности, трайни 10 секунди всеки.
В първата последователност първият текст незабавно ще се плъзга от дясно и ще остане видим за кратко, за да може потребителят да прочете текста, докато вторият текст ще остане скрит. Във втората последователност текстът от първата маркировка ще се плъзга наляво, а вторият текст веднага ще се плъзга вдясно.
И тук са всички ключови кодове, които трябва да приложим, за да стартираме анимацията.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes лява-две 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
Най- лява един ключовите кадри ще определят първата последователност на анимацията, докато ляво и две ключовите кадри ще определят втората последователност.
Прилагане на анимация към елементите
За да работи анимацията, не забравяйте да приложите анимацията към елемента. Първата последователност се прилага за първия текст или в този случай първия параграф, а втората последователност се прилага и за втория параграф.
.marquee p: nth-child (1) анимация: левият 20-те се успокоява безкрайно; .marquee p: nth-child (2) анимация: ляво-две 20-те се успокояват безкрайно;
Ние всички сме готови с нашата анимация; нека видим резултатите в браузъра.
- Демонстрация
- Изтеглете Източник
премия
Можем също така да дефинираме текста на надписа, за да го преместваме отгоре надолу или обратно, точно както направихме в предишния ни пост. Ето как да го направите; замени горните ни кодове за анимация с това по-долу преместете текста надолу:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes надолу-две 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Забележете, че сме променили Абсциса да се Ордината и обърнете всички превод отрицателна стойност към положителна и обратно.
Имаме също преименува анимацията да се надолу и една и надолу и две, така че трябва да приложим отново името на анимацията в елемента на абзаца.
.marquee p: nth-child (1) анимация: надолу-една 20-те се успокоява безкрайно; .marquee p: nth-child (2) анимация: надолу-две 20-те се успокояват безкрайно;
Или пък, ако искате да го преместите точно обратното; отдолу нагоре. Ето всички кодове, които трябва да приложите:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) анимация: нагоре-нагоре 20-те се успокояват безкрайно; .marquee.up p: nth-child (2) анимация: нагоре-две 20-те се успокояват безкрайно; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes до две 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Демонстрация
- Изтеглете Източник
заключение
Въпреки липсата на текуща поддръжка на браузъра, CSS3 Animation, ако се прави правилно, несъмнено ще реши много проблеми с използваемостта в бъдеще, както направихме в този пример. Ако ни е нужна само кратка анимация, предназначена за модерни браузъри, използването на CSS3 Animation вероятно е по-добре, отколкото да се налага да се зарежда jQuery скрипт..
И накрая, ние знаем, че тази статия може би е доста затрудняваща за някои хора, така че ако имате някакви въпроси относно тази статия, можете да я публикувате в раздела за коментари по-долу.
