адаптивність - це один з важливих критеріїв для сайтів, які зараз створюються. Багато користувачів використовують екрани мобільних телефонів для перегляду веб-ресурсів. На веб-сайтах часто можна зустріти банерну рекламу, і традиційні рекламні банери не є гнучкими. Flash і анімовані GIF-банери мають фіксований розмір в пікселях, тому вони не сумісні з сучасними адаптивними макетами.
Нам потрібен новий спосіб зробити банерну рекламу.
Нам потрібні адаптивні банери …
Новий формат для банерної реклами
Єдиний спосіб зробити рекламні банери такими ж чуйними, як і наші макети HTML5, - це зробити їх також з HTML5. Спочатку це може звучати як божевільна ідея, але, запевняю вас, це не так. Насправді, є багато переваг для реклами з HTML.
- HTML-оголошення повністю доступні, А семантична розмітка робить їх сумісними з різними дозволами.
- Текст, зображення, відео, Javascript і форми можуть бути використані в банері так само, як будь-яка веб-сторінка.
- Банери можуть використовувати динамічні серверні скриптиі бази даних, якщо це необхідно.
- HTML-оголошення можуть займати дуже мало дискового простору.
- Обслуговування банера по суті таке ж, як веб-хостинг.
- Ні нової технології для веб-розробників - вона така ж, як звичайна веб-розробка.
- і звичайно, HTML5-оголошення можна адаптувати до будь-якого розміру за допомогою медіа-запитів CSS3 - це якраз те, що нам потрібно для адаптивних банерів!
Отже, як ми можемо зробити чуйну рекламу?
Єдина хитрість полягає в тому, щоб зробити розміри iframe динамічними за допомогою медіазапросов CSS3, я розповім про це трохи пізніше ... Але в основному, все!
Подивимося як це працює
Ось приклад оголошення HTML5, показаного в популярному розмірі 125 × 125 пікселів:
А ось те ж оголошення з гнучкою шириною:
Зверніть увагу, як реагує друге рекламне оголошення, коли ви змінюєте розмір вікна вашого браузера ... Досить круто! 🙂
Адаптивні макети вимагають, щоб елементи сторінки мали змінну ширину, тому банери тепер повинні слідувати цій вимозі.
Висота банера не має великого значення в адаптивному дизайні, тому ми можемо використовувати будь-яку висоту, яка нам подобається. Але вибір висоти не означає, що наше оголошення застрягло на цій висоті, ми можемо визначити кілька висот для кожного оголошення!
Щоб забезпечити сумісність, адаптивні оголошення повинні використовувати ту ж висоту пікселів, що і традиційні розміри банерів.
Теоретично ми могли б створювати адаптивні банери, які працюють з будь-якою шириною або висотою, але це непрактично для створення або тестування.
Я пропоную дотримуватися мінімальної ширини 88 пікселів і мати наступний набір стандартних висот:
- 31px «мікро»
мікробар (88 х 31) - 60px «кнопка»
кнопка 2 (120 х 60)
підлозі банер (234 х 60)
повний банер (468 х 60) - 90px «банер»
кнопка 1 (120 х 90)
таблиця лідерів (728 х 90) - 125px «маленький прямокутник»
квадратна кнопка (125 х 125) - 250px «середній прямокутник»
вертикальний банер (120 х 240 * досить близько!)
квадратне спливаюче вікно (250 х 250)
середній прямокутник (300 х 250) - 400px «великий прямокутник»
вертикальний прямокутник (240 х 400) - 600px «хмарочос»
хмарочос (120 х 600)
широкий хмарочос (240 х 600)
оголошення на півсторінки (300 x 600)
Сім піксельних висот, які я вибрав вище, дають нам хороший діапазон по вертикалі і зі змінною шириною, ми покриваємо найпопулярніші розміри банерної реклами, що використовуються сьогодні. Звичайно, як і у випадку з традиційними баннерами, ви можете створювати нестандартні розміри, якщо вони вам потрібні.
Не тільки це, але моя демонстраційна банерна реклама в цілому коштує менше 25 КБ (HTML, CSS і зображення JPG). Це менше, ніж максимальний розмір файлу для одного маленького банера!
Спробуйте ці нові розміри банерів за допомогою програми перевірки адаптивних оголошень.
Зміна розміру фреймів за допомогою медіазапросов CSS
Іноді вам може знадобитися адаптивна висота для реклами, для цього вам потрібно змінити розмір iframe за допомогою медіазапросов CSS. Я вважаю, що найкращий спосіб зробити це - встановити ширину і висоту iframe рівними 100% і помістити їх в div з конкретними розмірами, встановленими в CSS. Ось як це виглядає:
< div id = "ad" > < iframe src \u003d "ad.html" border \u003d "0" scrolling \u003d "no" allowtransparency \u003d "true" width \u003d "100%" height \u003d "100%" style \u003d "border: 0;" \u003e < / iframe > < / div > |
А ось і CSS:
/ * Default height * / #ad (height: 60px;) @media only screen and (height: 90px) (/ * 90 pixels high * / #ad (height: 90px;)) @media only screen and (height: 125px ) (/ * 125 pixels high * / #ad (height: 125px;))
/ * Default height * / #ad ( height: 60px; @media only screen and (height: 90px){ / * 90 pixels high * / #ad ( height: 90px; @media only screen and (height: 125px){ / * 125 pixels high * / #ad ( height: 125px; |
Відстеження показів і кліків
Найкраще в оголошеннях HTML5 - їх можна відстежувати за допомогою Google Analytics, як і на звичайних веб-сайтах.
Завдяки розвитку веб-технологій і сучасних браузерів, ми можемо створювати безліч ефектів без використання Javascript. Це значно спростило життя веб-розробникам. Адже зараз ми можемо створювати ефекти на чистому CSS без використання Javascript. Тому в даній статті я хочу розповісти Вам про те, чи можна створювати банери на чистому CSS, що для цього буде потрібно, а також про мінуси і плюси даного підходу.
CSS3 дає великий спектр можливостей, ними лише потрібно правильно скористатися. Як приклад хочу привести посилання на мої минулі роботи "Персонажі на чистому CSS":
Для початку хочу навести приклади своїх банерів CSS. Можливо Ви їх вже бачили на сайті, але навіть не здогадувалися за допомогою чого і як вони були створені.
З приводу демо: у кожного прикладу (банера) внизу присутній тривалість в секундах, а також кнопка "Оновити", яка починає показ банера спочатку.
Банер # 1 - "Індивідуальне навчання сайтобудування":
Даний банер я створював близько 2-х днів. Чому так довго? Тому що для адаптації банера (щоб зробити його гумовим) пішло деякий час при перерахунку координат. Зараз його розмір залежить від ширини блоку-батька (в якому знаходиться сам банер CSS).
Цей банер я створив буквально за 2-2.5 години. Єдине, що тут гальмувало процес створення - це вибір іконок. Тому що їх необхідно було підібрати близькими за тематикою банера.
Даний банер також розтягується в залежності від ширина контейнера блоку, в якому він знаходиться. На його створення пішло приблизно 1.5 години.
Виглядають такі банери дуже красиво, але чи все так просто? Давайте подивимося на плюси і мінуси такого способу створення банерів.
Переваги та недоліки CSS банерів:
Як створити банер CSS?
1 Ідея
Для початку необхідно точно знати яка анімація повинна бути у банера (що, куди і звідки має рухатися і де з'являтися). Ви можете взяти аркуш А4 і промальовувати куди буде рухатися кожен елемент і що на банері має бути.
Адже не можна почати створювати банер, якщо Ви не знаєте що він з себе повинен представляти і як функціонувати.
2 HTML структура
Наступним кроком необхідно створити HTML розмітку таким чином, щоб елементи можна було переміщати (і створювати для них анімацію). Тобто не можна зробити все одним зображенням, яке буде виїжджати праворуч або ліворуч і на цьому анімація закінчена.
Як правило є один загальний блок, в якому знаходяться всі інші. І в цьому загальному блоці ми можемо управляти елементами як нам це необхідно.
3 CSS анімація
Завершальним етапом є створення анімації для блоків, а також написання стилів для них, тому що деякі частини анімації бувають приховано за замовчуванням.
Щоб створити свій банер, Вам необхідно добре володіти основами CSS і HTML.
Вивчіть базову анімацію на CSS за допомогою даного уроку -.
висновок
Всі сучасні браузери підтримують CSS3 властивості, а, значить, і банери будуть коректно відображатися в таких браузерах. Але за допомогою JS плагінів можна створити банери CSS і для старих браузерів. Вивчивши основи анімації CSS, Ви зрозумієте процес створення банерів і незабаром створите свій перший банер на чистому CSS! 😉
Реклама - потрібна річ для будь-якого сайту. Тільки вартість інструментів для реклами буває вище доходу від неї. Ось тоді багато хто починає мудрувати, щоб хоч трохи заощадити. Для таких «модерних» ми і розповімо, як зробити банер.
Що таке банери
Під банером в інтернеті мається на увазі прямокутне рекламне зображення зі статичним або динамічним (анімованим) вмістом. Банер може включати в себе як текст, так і графічний малюнок. Банер, як правило, забезпечений посиланням, активується після клацання по ньому кнопкою миші.
Сучасний зростання ефективності банерної реклами пов'язаний з використанням контекстного таргетингу. При цьому на банерах сайту рекламують тільки ті товари і послуги, які «співзвучні» з тематикою ресурсу:
Добре б дізнатися, як можна зробити банер для сайту. Але для початку потрібно розібратися з існуючими типами банерів. Розрізняють такі їх типи:
- Статичні банери - складаються з статичного зображення. Є малюнками в форматі JPEG або PNG. Характеризуються малою вагою, що не впливає на швидкість завантаження сторінки.
- Анімовані банери - анімація створена за допомогою GIF. Складається з декількох картинок, що змінюють один одного із заданою частотою. Вага банера залежить від кількості використовуваних в ньому зображень.
- Flash - в такому банері анімація зроблена на основі Flash. Вона може реагувати на дії користувача.
Інтерактивне вміст може бути представлено у формі гри або анкети з додаванням звуку. Малюнки для анімації створюються за допомогою векторної графіки.
Існує багато різних розмірів банерів для сайту. Але найпопулярнішими з них є:
- 88 на 31 піксель;
- 120 на 60 пікселів;
- 120 на 90 пікселів;
- 120 на 240 пікселів;
- 125 на 125 пікселів;
- 120 на 600 пікселів;
- 160 на 600 пікселів;
- 180 на 150 пікселів;
- 234 на 60 пікселів;
- 240 на 400 пікселів;
- 250 на 250 пікселів;
- 300 на 600 пікселів;
- 300 на 250 пікселів;
- 336 на 280 пікселів;
- 150 на 150 пікселів;
- 468 на 60 пікселів;
- 728 на 90 пікселів.
Ознаки ефективного рекламного банера
Ефективність рекламного банера, розміщеного на сайті, залежить не тільки від популярності майданчика. Більшою мірою його ефективність залежить від рівня виконання самої реклами. Якісний банер повинен відповідати кільком основним критеріям:
- Привертати увагу користувача - але це не означає, що банер повинен бути надто яскравим і миготливим. Така реклама викличе у відвідувача роздратування, а не увага. Вміст банера має ненав'язливо «натякнути» користувачу про свою присутність. Тому при підборі зображення і тексту для нього завжди повинен враховуватися психологічний фактор;
- Викликати інтерес - банери для сайту повинні викликати у користувача інтерес до об'єкта реклами. Товар або послуга повинні бути подані не тільки зі смаком, але і оригінально. Вітається використання легкого дотепності і гумору:
- Спонукання до переходу за посиланням банера - досягається за рахунок ефекту деякої таємничості і недомовленості,
вкладеного в вміст банера. - Спонукання до замовлення послуги або покупки - перш за все, залежить від вмісту банерної реклами. Воно повинно показувати найкращі сторони об'єкта реклами або ту вигоду, яку може отримати користувач від його придбання.
- Якщо банер призначений для підвищення впізнаваності бренду і збільшення його іміджу, то рекламне вміст має навіювати споживачеві почуття довіри. Але не викликати при цьому негативних асоціацій.
Закономірності, які варто враховувати перед тим, як розміщувати банер на сайті:
- Чим більше банер, тим вище ймовірність переходу по ньому користувача. Найефективнішим розміром вважається 240 на 400 пікселів;
- Найбільшим ефектом володіє банерна реклама, розміщена зверху (в шапці). Також вона може бути розміщена збоку або внизу сторінки, але ефективність тут трохи нижче;
- Анімовані банери здатні швидше привернути увагу користувача - інтуїтивно очей людини реагує на рух.
Створення та розміщення рекламного банера
Перед тим, як вставити банер на сайт, потрібно визначитися з місцем його розміщення. При цьому потрібно враховувати розміри банера та наявні вільні місця на сторінках. Визначившись з місцем розташування рекламного блоку, можна вставляти код банера в html сторінки.
Код більшості банерів відповідає шаблоном:
- a href \u003d "/ посилання на сайт рекламодавця» - адреса ресурсу, на який приведе користувача клацання по банеру;
- title \u003d "заголовок» - текст, що відображається в спливаются підказкою при наведенні на область банера;
- target \u003d "_ blank" - задає правила відображення сайту рекламодавця після переходу за посиланням банера ( «_blank» - відкриється в новому вікні);
- rel \u003d "nofollow» - забороняє пошуковикам обробку цієї посилання;
- img src \u003d "https: //www.сайт/wp-content/uploads/путь до зображення» - задає шлях до зображення, що відображається в банері;
- alt \u003d "альтернативний текст» - текст, який буде відображений у банері, якщо його малюнок не завантажений.
Але не обов'язково розробляти банер самостійно. Для цього можна скористатися спеціальними онлайн-генераторами. Щоб згенерувати код банера на такому сервісі, потрібно заповнити кілька полів і натиснути на кнопку:
Або можна замовити створення банера в професійній студії. Тоді це обійдеться дорожче ... Ось приблизні розцінки:
- Розробка звичайного GIF банера - від 25 $;
- Створення банера на основі Flash - 70-150 $;
- Ресайз - приблизно 50% від початкової його ціни.
Але якщо трохи помудрувати, то можна створити простенький банер самостійно. Ось яке чудо виходить після десяти хвилин маніпуляцій з кодом html і зображенням в Coreldraw:
Код банера:
Якщо ще трохи помудрувати з кодом і додати пару обробників подій, то вийти банер з мінливою картинкою. Зображення в банері змінюється під час наведення на нього курсора.
Ось що вийшло:
Код прикладу:
Створення анімованих і відео банерів
Розглянемо на прикладі як зробити анімований банер з допомогою програми Ulead GIF Animator.
У меню «Файл» вибираємо пункт «Майстер анімації». У вікні задаємо розмір майбутнього банера. На наступному кроці завантажуємо підготовлені зображення:
Потім задається швидкість зміни картинок в анімації. У маленькому вікні ця швидкість демонструється за допомогою мінливих цифр.
Генератор складання коду для банера. Складання коду банера онлайн процедура проста і невигадлива. А навіщо взагалі потрібен банер на сайт?
На сайт банер ми додаємо для того, щоб рекламувати товар, послуги, просування бренду, показати свій товар.
На сайт банер ми додаємо для того, щоб рекламувати товар, послуги, просування бренду і так далі.
Маючи в своєму розпорядженні код банера на сайті, ми хочемо щось виділити, тим самим привернути увагу.
Як можна використовувати банери практично?
Можливостей використання банерної реклами може бути скільки завгодно. Давайте візьмемо реальний приклад з життя. Наприклад, Ви зареєструвалися в партнерській програмі. В рамках цієї програми, Ви отримуєте партнерські посилання, за допомогою яких можна просувати товар.
Як правило, разом з просуванням товару, для того, щоб Ваші доходи були вище, Ви отримуєте реферальне посилання для залучення інших партнерів.
Як матеріали в партнерській програмі, Вам можуть надати готові банери. Таким чином, розміщуючи код банерівв мережі, наприклад на своєму сайті, ви обрали для реклами товар і набираєте власних партнерів.
Online сервіс отримання коду банера
За допомогою цього генератора ви зможете створити і отримати готовий HTML код вашої кнопки або банера. Якщо ви не можете самостійно написати код то заповнивши форму ви в один клік отримаєте готовий HTML, який можна вставити на сторінки сайту |
Зробимо рекламний банер з допомогою CSS3. В даний час повністю підтримують анімації CSS3 тільки браузери Firefox і WebKit. Але досить просто змусити банер працювати в інших браузерах. Однак, не слід очікувати чудового функціонування всюди (особливо в IE 7 і старше) експериментів з новітніми техніками CSS.
Примітка: Для збереження простору на сторінці все префікси виробників браузерів опущені. Дивіться код в исходниках.
розмітка HTML
Спочатку розглянемо структуру банера в HTML. На даному етапі ми повинні уявити, як буде функціонувати анімація:
Загубився?
Розслабся - ми допоможемо.
Для більш глибокого розуміння структури розмітки сфокусуємось на човні:
З човном відбуваються три анімації:
Вислизання човна зліва. Застосовується для невпорядкованого списку (група).
Імітація розгойдування човна на воді. Застосовується до елемента списку (човен).
Поява знака питання. Застосовується до елементу div (знак питання).
Якщо подивитися на демонстраційну сторінку, то можна побачити, що анімація для пункту списку (човни) також діє на елемент div всередині нього (Знак питання). Також анімація "вислизання" для невпорядкованого списку діє на пункт списку (човен і знак питання).
Отже, можна зробити висновок, що дочірні елементи отримують анімації батьків на додаток до власних дій. Тепер залишається тільки перерахувати структури батько / спадкоємець.
CSS
Перш, ніж починати розбір створення анімації, потрібно забезпечити сумісність зі старими браузерами.
Зворотня сумістність
Ми забезпечимо зворотну сумісність просто задавши стилі розмітки так, як ніби анімацій CSS не існує зовсім. Якщо хтось буде дивитися сторінку в старому браузері, то побачить звичайну статичну картинку, а не порожнє біле місце.
Наприклад: якщо використовувати CSS? подібний нижче наведеним, то будуть проблеми:
/ * НЕПРАВИЛЬНО! * / @Keyframe our-fade-in-animation (0% (opacity: 0;) 100% (opacity: 1;)) div (opacity: 0; / * Даний div прихований за замовчуванням - ой! * / Animation: our -fade-in-animation 1s 1;)
Якщо браузер не підтримує анімації, то елемент div залишиться невидимим для користувача.
А ось так ми забезпечимо зворотну сумісність зі старими браузерами:
/ * ВІРНО * / @keyframe our-fade-in-animation (0% (opacity: 0;) 100% (opacity: 1;)) div (opacity: 1; / * Даний div бачимо за замовчуванням * / animation: our -fade-in-animation 1s 1;)
Тепер елемент div буде виводитися навіть якщо анімація не може запуститися. А в сучасних браузерах div буде спочатку прихований в ході анімації.
основа
Тепер ми знаємо як забезпечити сумісність (що допоможе уникнути проблем при роботі з реальними проектами). Прийшла пора створити основу нашого коду CSS.
Потрібно пам'ятати про 3 моментах:
Так як банер буде використовуватися на різних сайтах, ми зробимо все наші селектори CSS особливими. Всі вони будуть починатися з ідентифікатора # ad-1. Таким чином ми постараємося уникнути перекриття нашого коду та коду сайту.
Ми має намір ігноруємо затримку анімації в установках. Якщо використовувати затримку анімації при завданні стилів з видимістю елементів за замовчуванням, то структура банера буде порушуватися раптовим зникненням або появою частин картинки після завершення анімації. Затримка анімації імітується тривалістю і налаштуванням кадрів.
коли можливо використовуємо одну анімацію для декількох елементів. Таким чином ми економимо час і скорочуємо розмір коду.
Отже створюємо основу для нашого банера. Встановимо для неї відносне позиціонування щоб внутрішні елементи можна було коректно розміщувати. Також буде приховувати все, що виходить за рамки елемента:
# Ad-1 (width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url (../ images / ad-1 / background.png); background-position: center; background -repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px # 000;)
Потім задаємо стилі для тексту і полів введення. Викликаємо відповідні анімації. Також потрібно переконатися, що зміст має найвищий z-index для рухомих частин, щоб вони не перекривалися:
# Ad-1 #content (width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible;) # ad-1 h2 (font-family: "Alfa Slab One", cursive; color: # 137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; / * Поява h2 з імітацією затримки * /) # ad-1 h3 (font-family: "Boogaloo", cursive; color: # 202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; / * Поява h3 з імітацією затримки * /) # ad-1 form (margin: 30px 0 0 6px; position: relative; animation: form-animation 12s 1 ease-in-out; / * вислизанню форми для введення email адреси з імітацією затримки * /) # ad-1 #email (width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px # a2917d; border-top-left-radius: 5px; borde r-bottom-left-radius: 5px; border: 1px solid # a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: # c7b29b; background-image: linear-gradient (bottom, rgb (216,201,185) 0%, rgb (199,178,155) 100%); ) # Ad-1 #email: focus (background-image: linear-gradient (bottom, rgb (199,178,155) 0%, rgb (199,178,155) 100%);) # ad-1 #submit (height: 50px; float: left ; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: # 137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border: 1px solid # bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient (bottom, rgb (245,247,249) 0%, rgb ( 255,255,255) 100%);) # ad-1 #submit: hover (background-image: linear-gradient (bottom, rgb (255,255,255) 0%, rgb (255,255,255) 100%);)
Тепер задамо стилі для води і викличемо відповідну анімацію:
# Ad-1 ul # water (/ * Якщо потрібна інша анімація для води, її можна додати тут * /) # ad-1 li # water-back (width: 1200px; height: 84px; background-image: url (.. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animation: water-back-animation 3s infinite ease-in-out; / * Імітація плескоту хвиль * /) # ad-1 li # water-front (width: 1200px; height: 158px; background-image: url (../ images / ad-1 / water-front .png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left: -30px; animation: water-front-animation 2s infinite ease-in-out; / * Інша імітація плескоту хвиль. Анімація буде виконуватися трохи швидше для створення ефекту перспективи. * /)
Задамо стилі для човна і її елементів. Також викликаємо відповідні анімації:
# Ad-1 ul # boat (width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; animation: boat-in-animation 3s 1 ease-out ; / * Slides the group in when ad starts * /) # ad-1 ul # boat li (width: 249px; height: 215px; background-image: url (../ images / ad-1 / boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s infinite ease-in-out; / * Simulate the boat bobbing on the water - similar to the animation already used on the water itself. * /) # ad-1 # question-mark (width: 24px; height: 50px; background-image: url (../ images / ad-1 / question-mark.png); position: absolute; right: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; / * Fade in the question mark * /)
Тепер створимо стилі для хмар. Для них ми будемо використовувати анімацію з ефектом нескінченного руху. ілюстрація демонструє суть ідеї:
А ось і код CSS:
# Ad-1 #clouds (position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; / * Прокручуємо хмари вліво, скидаємо і повторюємо * /) # ad-1 # cloud-group -1 (width: 720px; position: absolute; left: 0px;) # ad-1 # cloud-group-2 (width: 720px; position: absolute; left: 720px;) # ad-1 .cloud-1 (width : 172px; height: 121px; background-image: url (../ images / ad-1 / cloud-1.png); position: absolute; top: 10px; left: 40px;) # ad-1 .cloud-2 (width: 121px; height: 75px; background-image: url (../ images / ad-1 / cloud-2.png); position: absolute; top: -25px; left: 300px;) # ad-1. cloud-3 (width: 132px; height: 105px; background-image: url (../ images / ad-1 / cloud-3.png); position: absolute; top: -5px; left: 530px;)
анімації
нагадування: Починаючи з цієї точки нічого насправді не анімується. Якщо подивитися наш банер зараз, то ви побачите статичну картинку. Тут створюються анімації, які викликаються в вищенаведеному коді.
Тепер в вдихаємо життя в нашу прекрасну статичну картинку:
/ * Анімація з імітацією затримки використовується для виведення декількох елементів. Імітація затримки здійснюється запуском процесу з 80% продовження анімації (а не відразу). Так можна імітувати будь-яку затримку: * / @keyframes delayed-fade-animation (0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;)) / * Анімація для виведення форми з адресою email і кнопкою. Також використовується імітація зхадержкі * / @keyframes form-animation (0% (opacity: 0; right: -400px;) 90% (opacity: 0; right: -400px;) 95% (opacity: 0.5; right: 20px;) 100% (opacity: 1; right: 0px;)) / * Дана анімація використовується для виведення човна за екрану на початку ролика: * / @keyframes boat-in-animation (0% (left: -200px;) 100% (left : 20px;)) / * Анімація для хмар. Перша група хмар починає рух з центру, а друга - праворуч від екрану. Перша група повільно виводиться з екрану, а друга - з'являється справа. Як тільки ліва група повністю сховається, хмари дуже швидко повертаються в початкове положення: * / @keyframes cloud-animation (0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px;)) / * Три останніх анімації практично однакові - різниця полягає в позиціонуванні елементів. Вони імітують плескіт хвиль океану: * / @keyframes boat-animation (0% (bottom: 0px; left: 0px;) 25% (bottom: -2px; left: -2px;) 70% (bottom: 2px; left: - 4px;) 100% (bottom: -1px; left: 0px;)) @keyframes water-back-animation (0% (bottom: 10px; left: -20px;) 25% (bottom: 8px; left: -22px; ) 70% (bottom: 12px; left: -24px;) 100% (bottom: 9px; left: -20px;)) @keyframes water-front-animation (0% (bottom: -70px; left: -30px;) 25% (bottom: -68px; left: -32px;) 70% (bottom: -72px; left: -34px;) 100% (bottom: -69px; left: -30px;))
висновок
В ході даного уроку ми вивчили кілька ключових концепцій:
- Елементи спадкоємці отримують анімації своїх батьків на додаток до своїх анімацій.
- При створенні банера треба прагнути використовувати унікальний ідентифікатор, щоб уникнути перекриття коду з існуючим проектом CSS.
- Положення і стиль елементів потрібно вибирати так, як ніби анімація не доступна, щоб забезпечити сумісність.
- За можливість потрібно використовувати одну анімацію для декількох елементів.