Створення розширеного Marquee з анімацією CSS3
Сьогодні ми подивимося “шатер” знову. Ми насправді розповідали про це в попередньому повідомленні, в якому говорили про використання -webkit-marquee власності, але цього разу ми підемо трохи далі.
У цій посаді ми збираємося створити a шатроподібний ефект за допомогою анімації CSS3. Таким чином ми зможемо додати більше функціональних можливостей, які неможливо досягти лише за допомогою -webkit-marquee.
Якщо ви вже не знайомі з модулем анімації CSS3, ми рекомендуємо вам ознайомитися з наступними посиланнями, перш ніж продовжити роботу з цією документацією:
- CSS3 Анімації - W3School
- Анімації CSS - Mozilla Dev. Мережа
Також зверніть увагу, що на даний момент анімація CSS3 може працювати лише у Firefox 8+, Chrome 12+ і Safari 5.0+ з префіксом (-moz- і -webkit-). Проте офіційну версію від W3C ми будемо використовувати тільки без префікса, щоб уникнути перевантаження цієї статті зайвими кодами.
Звернення до випуску Marquee
Однією з проблем з назвою є те, що текст постійно рухається. Така поведінка є руйнівним для читання, і текст також важко читати. Цього разу ми спробуємо створити власну версію шару та зробити її зручнішою для користувачів. Наприклад; замість того, щоб текст рухався безперервно, ми зупинимо його, коли він буде повністю видно, так що користувач зможе прочитати текст на мить.
Раскадровка (роду)
Кожне творче та дизайнерське створення, наприклад, логотип, ілюстрація або веб-сайт, зазвичай починається з ескізу. У сфері виробництва анімації це робиться за допомогою розкадрування. Перш ніж розпочати будь-яке кодування, спочатку створимо a свого роду раскадровка, щоб допомогти нам візуалізувати нашу анімацію.
Як видно з наведеної вище розкадровки, ми плануємо показати лише два рядки тексту, які обидва будуть рухатися послідовно зліва вліво.
Наша розкадровка не така складна, як розкадровка для реального анімаційного фільму, але справа в тому, що ми тепер можемо уявити, як буде виглядати наш намет.
Розмітка HTML
Оскільки наша анімація буде простою, розмітка HTML також буде такою ж простою, як:
Як додати WordPress Пов'язані повідомлення без плагінів
Автоматизуйте файли Dropbox за допомогою дій
Основні стилі
Перш ніж працювати навколо анімаційних матеріалів, додамо деякі основні стилі. Почнемо з додавання текстури фону для html елемент.
html background: url ('… /images/skewed_print.png'); Далі ми розмістимо область у центрі вікна веб-переглядача, а також додамо деякі деталі, такі як внутрішня тінь, колір фону та межі..
.marquee ширина: 500px; висота: 50px; запас: 25px auto; переповнення: приховано; позиція: відносна; кордон: 1px solid # 000; запас: 25px auto; фоновий колір: # 222; -webkit-border-radius: 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.
Ключові кадри
The @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%);
The лівий Ключові кадри визначатимуть першу послідовність анімації, а зліва-дві Ключові кадри визначатимуть другу послідовність.
Застосування анімації до елементів
Щоб анімація працювала, не забудьте застосувати анімацію до елемента. Перша послідовність застосовується для першого тексту або в цьому випадку першого абзацу, а друга послідовність застосовується також для другого абзацу.
.marquee p: nth-child (1) анімація: ліворуч 20 років легкість нескінченна; .marquee p: nth-child (2) анімація: ліворуч двадцятих років легкості нескінченні;
Ми всі зробили з нашою анімацією; давайте побачимо результати у веб-переглядачі.
- Демо
- Завантажити джерело
Бонус
Ми також можемо визначити текст рамки, щоб перемістити його зверху вниз, або навпаки, так само, як ми зробили в попередньому повідомленні. Ось як це зробити; Замініть наші вище коди анімації на цю нижче перемістіть текст вниз:
.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 down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Зверніть увагу, що ми змінили Вісь Х до Y-вісь і переверніть всі переклад негативне значення до позитивного і навпаки.
Ми також маємо перейменували анімацію до вниз і вниз-два, тому нам також потрібно повторно застосувати ім'я анімації до елемента абзацу.
.marquee p: nth-child (1) анімація: вниз-один 20s легкість нескінченна; .marquee p: nth-child (2) анімація: вниз-двадцятирічна легкість нескінченна;
Або ж, якщо ви хочете перенести його навпаки; знизу вгору. Ось усі коди, які потрібно застосувати:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) анімація: до 20 років легкість нескінченна; .marquee.up p: nth-child (2) animation: до двох 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 up-two 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.
І, нарешті, нам відомо, що ця стаття може бути дещо перевантажуючою для деяких людей, тому, якщо у вас виникли питання стосовно цієї статті, не соромтеся розмістити її в розділі коментарів нижче.
