Зробимо рекламний банер за допомогою 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 animation: delayed-fade-animation /* Поява 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; 12s 1 ease-in-out; 16px, font-family: "Lucida Grande", sans-serif; color: #ffff; 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 border-bottom-right-radius: 5px; border:1px solid # border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 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; */ ) #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.
- Положення та стиль елементів потрібно вибирати так, начебто анімація не доступна, щоб забезпечити зворотну сумісність.
- По можливості потрібно використовувати одну анімацію для кількох елементів.
Реклама – потрібна річ для будь-якого сайту. Тільки вартість інструментів для реклами буває вищою від доходу від неї. Ось тоді багато хто починає мудрувати, щоб хоч трохи заощадити. Для таких «хитромудрих» ми й розповімо, як зробити банер.
Що таке банери
Під банером в інтернеті мається на увазі прямокутне рекламне зображення зі статичним або динамічним (анімованим) вмістом. Банер може включати як текст, так і графічний малюнок. Банер, як правило, має посилання, що активується після клацання по ньому кнопкою миші.
Сучасне зростання ефективності банерної реклами пов'язане з використанням контекстного націлення. При цьому на банерах сайту рекламують ті товари та послуги, які «сузвучні» з тематикою ресурсу:
Добре було б дізнатися, як можна зробити банер для сайту. Але спочатку потрібно розібратися з існуючими типами банерів. Розрізняють такі типи:
- Статичні банери складаються зі статичного зображення. Є малюнки у форматі 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=»/посилання на сайт рекламодавця» – адреса ресурсу, на який наведе користувача клацання по банеру;
- title="заголовок" – текст, що відображається в підказці при наведенні на область банера;
- target=»_blank» – задає правила відображення сайту рекламодавця після переходу за посиланням банера («_blank»-відкриється в новому вікні);
- rel=»nofollow» – забороняє пошуковикам обробку цього посилання;
- img src="https://www.сайт/wp-content/uploads/шлях до зображення" - задає шлях до зображення, що відображається в банері;
- alt="альтернативний текст" - текст, який буде відображено в банері, якщо його малюнок не завантажено.
Але не обов'язково розробляти банер самостійно. Для цього можна скористатися спеціальними онлайн-генераторами. Щоб згенерувати код банера на такому сервісі, потрібно заповнити кілька полів та натиснути на кнопку:
Або можна замовити створення банера у професійній студії. Тоді це обійдеться дорожче… Ось приблизні ціни:
- Розробка стандартного GIF банера - від 25 $;
- Створення банера на основі Flash - 70-150 $;
- Ресайз – приблизно 50% від початкової ціни.
Але якщо трохи помудрити, то можна створити простенький банер самостійно. Ось яке диво виходить після десяти хвилин маніпуляцій з кодом htmlта зображенням у Coreldraw :
Код банера:
Якщо ще трохи помудрити з кодом і додати пару обробників подій, то вийде банер зі змінною картинкою. Зображення в банері змінюється під час наведення курсору.
Ось що вийшло:
Код прикладу:
Створення анімованих та відео банерів
Розглянемо на прикладі як зробити анімований банер за допомогою програми Ulead GIF Animator.
У меню "Файл" вибираємо пункт "Майстер анімації". У вікні задаємо розмір майбутнього банера. На наступному етапі завантажуємо підготовлені зображення:
Потім задається швидкість зміни картинок анімації. У маленькому вікні ця швидкість демонструється за допомогою змінних цифр.
Завдяки розвитку веб-технологій та сучасних браузерів, ми можемо створювати безліч ефектів без використання Javascript. Це значно полегшило життя веб-розробникам. Адже зараз ми можемо створювати ефекти на чистому CSS без використання Javascript. Тому в цій статті я хочу розповісти Вам про те, чи можна створювати банери на чистому CSS, що для цього потрібно, а також про мінуси та плюси цього підходу.
CSS3 дає великий спектр можливостей, ними потрібно лише правильно скористатися. Як приклад, хочу навести посилання на мої минулі роботи "Персонажі на чистому CSS":
Спочатку хочу навести приклади своїх банерів CSS. Можливо, Ви їх вже бачили на сайті, але навіть не здогадувалися за допомогою чого і як вони були створені.
З приводу демо:у кожного прикладу (банера) внизу є тривалість в секундах, а також кнопка "Оновити", яка починає показ банера спочатку.
Банер #1 - "Індивідуальне навчання сайтобудування":
Цей банер я створював близько 2-х днів. Чому так довго? Тому що для адаптації банера (щоб зробити його гумовим) пішов деякий час при перерахунку координат. Наразі його розмір залежить від ширини блока-батька (в якому знаходиться сам банер CSS).
Цей банер я створив буквально за 2-2 години. Єдине, що тут гальмувало процес створення, — це вибір іконок. Тому, що їх необхідно було підібрати близькими за тематикою банера.
Цей банер також розтягується залежно від ширини контейнера блоку, в якому він знаходиться. На створення пішло приблизно 1.5 години.
Виглядають такі банери дуже красиво, але чи все так просто? Давайте подивимося на плюси та мінуси такого способу створення банерів.
Переваги та недоліки CSS банерів:
Як створити банер CSS?
1 Ідея
Для початку необхідно точно знати, яка анімація повинна бути у банера (що, куди і звідки має рухатися і де з'являтися). Ви можете взяти лист А4 і промалювати куди рухатиметься кожен елемент і що на банері має бути.
Адже не можна почати створювати банер, якщо Ви не знаєте, що він повинен представляти і як функціонувати.
2 HTML структура
Наступним кроком необхідно створити розмітку HTML таким чином, щоб елементи можна було переміщати (і створювати для них анімацію). Тобто не можна зробити все одним зображенням, яке виїжджатиме праворуч або ліворуч і на цьому анімація закінчена.
Як правило, є один загальний блок, в якому знаходяться всі інші. І в цьому загальному блоці ми можемо керувати елементами, як нам це необхідно.
3 CSS анімація
Завершальним етапом є створення анімації для блоків, і навіть написання стилів їм, оскільки деякі частини анімації бувають приховані за умовчанням.
Щоб створити свій банер, Вам необхідно добре володіти основами CSS та HTML.
Вивчіть базову анімацію на CSS за допомогою цього уроку - .
Висновок
Усе сучасні браузерипідтримують CSS3 властивості, а значить, і банери будуть коректно відображатися в таких браузерах. Але за допомогою JS плагінів можна створити банер CSS і для старих браузерів. Вивчивши основи анімації CSS, Ви зрозумієте процес створення банерів та незабаром створите свій перший банер на чистому CSS! 😉
Banner HTML5- банер, який відображає довільний вміст HTML або зображення. HTML-код може являти собою звичайну HTML сторінкузі стилями та скриптами. Він міститься в iframe і має обмежений доступ до вмісту майданчика.
За допомогою шаблону "Banner HTML5" банер можна додати двома способами:
1. підготувавши лише зображення. Наявність посилання для переходу до параметрів банера регулює клікабельність зображення.
2. підготувавши HTML креатив у редакторі за інструкцією: або .
Якщо в банері доданий HTML-код і зображення, то буде показаний HTML-код.
Параметри, що настроюються при додаванні до ADFOX:
- Ширина, висота банера.
- Власні CSS-стилі для контейнера з банером.
Розробка HTML-креативу
1. Ознайомтеся з вимогами до HTML-коду
- Максимально допустимий розмір HTML-файлу – 65 000 байт.
- JavaScript та CSS краще розміщувати всередині HTML-коду банера. Якщо підсумковий HTML-код перевищує максимально допустимий розмір, необхідно зменшити код за рахунок винесення JavaScript і CSS в окремі файли:
- Збережіть js і css кодокремі файли з розширенням.js або.css;
- файли за вагою не повинні перевищувати 300Кб;
- завантажте файли у вкладку "Файли" рекламної кампанії та отримані посилання на файли підключіть до HTML-коду.Приклад підключення js та css файлів:
У HTML-коді не допускається використання відносних шляхівдо файлів.
- У проекті може бути лише один файл з розширенням.html.
- Максимально допустима кількість файлів у проекті – 50;
- Дозволені типи файлів у проекті: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
- Максимальний розмір кожного файлу (діє також для файлів усередині архіву):
- 300Кб;
- 1Мб для відеофайлів. - Назви файлів повинні містити лише цифри або літери англійської абетки, символ підкреслення. Не допускається використання в назві файлу російських букв, пробілів, лапок та спеціальних символів;
- У назвах змінних та об'єктів не можна використовувати російські літери.
Виняток становить лише текст на банері. - Формат готового проекту - zipархів.
Вимоги до зображень
Використовуйте картинки високої роздільної здатності, це кардинально покращить якість банера на мобільному пристрої, хоч і зменшить швидкість завантаження банера.
Можна використовувати зображення SVG. Вони векторні, а значить, вони будуть краще виглядати на всіх пристроях - мобільних і декстопних. Також вони мають мінімальний розмір файлу і можуть бути з анімацією.
Допустимі формати зображень: png, gif, jpg, svg.
Максимальна вага файлу: 300Кб.
2. Виберіть редактор, в якому розроблятимете HTML креатив і клацніть на відповідне посилання. Підготуйте архів з HTML-креативом за інструкцією:
Редактор Adobe Animate CC – Банер з однією кнопкою
Редактор Adobe Animate CC - Банер з кількома кнопками
1. Завантажте шаблон для банера з кількома кнопками
2. Створіть в Adobe Animate проект HTML5 Canvas (або відкрийте існуючий)
3. При додаванні кнопок (buttons) або вкладених у сцену кліпів (movie clips) важливо задавати їм instance nameЩоб потім можна було додати клік до потрібних кнопок. Рекомендуємо використовувати назви button1 - button9.
Див. також:
Інструкція з додавання кнопки та призначення instance name
Кнопка на головній сцені
1.
Створіть на сцені якийсь об'єкт, наприклад, за допомогою Rectangle Tool.
Потім виділіть його і в контекстному менювиберіть "Convert to Symbol..."
2. У діалоговому вікні виберіть Type: Button, Name можна залишити без змін, натисніть Ok.
3. Призначте кнопці Instance Name, щоб працював клік.
4. Пропишіть у Actions для цієї кнопки код:
Window.buttons.push(//Пропишіть через коми шляху кнопок, додавши спочатку this this.button1 //Кінець місця для кнопок);
Вкладена кнопка
1.
Припустимо, що кнопка знаходиться всередині іншого символу, наприклад, усередині Movie Clip.
У цьому прикладі Movie Clip встановлено Instance Name "name"
2. По подвійному клік перейдіть всередину name, там буде вкладена кнопка.
3. При вказівці в Actions шляху до такої кнопки, потрібно буде додати Instance Name об'єкта після цього, в який вона вкладена:
Window.buttons.push(//Пропишіть через кому шляхи кнопок, додавши спочатку this this.name.button1 //Кінець місця для кнопок);
Інструкція зі створення прозорих кнопок
1. Виділіть потрібний елемент і перетворіть його на символ
2. Вкажіть назву та виберіть Type: Button
3. За допомогою подвійного кліка за символом перейдіть до нього:
4. Зробіть insert keyframe в кадр hit
5. Видаліть вміст кадрів up, over, down
6. Прозора кнопка готова:
4. Додайте в проект шар Actions (до нього будемо додавати код для кнопок)
5. Відкрийте вікно для написання коду
Window.buttons.push(//Пропишіть через кому шляхи кнопок, додавши спочатку this //Кінець місця для кнопок); setAdfox();
Якщо кнопка знаходиться в головній сцені, то пропишіть її instance name відразу після цього, наприклад
This.button1
Якщо кнопка знаходиться всередині вкладеної сцени, то після цього пропишіть спочатку instance name сцени, а потім вже instance name кнопки:
This.scene_instance_name.button2
Приклад підсумкового коду у шарі Actions:
Window.buttons.push(//Пропишіть через кому шляхи кнопок, додавши спочатку this this.button1, this.scene_instance_name.button2 //Кінець місця для кнопок); setAdfox();
7. Перша кнопка в рядку коду викликатиме перше посилання з ADFOX, друга - другу і так далі.
Разом з HTML креативом передайте менеджеру, який додаватиме банер в ADFOX, інформацію про відповідність кнопок та номерів посилань.
8. Відкрийте параметри публікації та підключіть шаблон із першого пункту та опублікуйте проект, обравши потрібну директорію.
9. Після публікації проекту заархівуйте його у форматі.zip. Ваш креатив готовий до завантаження в банер ADFOX.
Редактор Google Web Designer
Код даного банера можна брати за основу під час створення креативів у редакторі.
Шаблон містить скрипт adfox_HTML5.jsта набір параметрів для коректної роботи переходів та підрахунку подій:
%reference%, %user1%, %eventN%, де N – номер події від 1 до 30.
2. Обробка кліка.
Усі події призначаються конкретним елементам анімації через вкладку "Події".
Для виклику дій використовується компонент "Інтерактивна область".
Додайте його та виберіть подію Інтерактивна область → Торкання/натискання(або "Tap Area > Touch/Click" у англійській версії). 
У вкладці "Власний код" виберіть функцію кліка.
2.1 Якщо використовується одна кнопка переходу:
CallClick();
2.2 Якщо кілька кнопок переходу:
CallClick(n);
де n
2.3 Якщо потрібно викликати подію з анімації без переходу, використовуйте наступний код:
CallEvent(n);
де n- номер події, яка має бути викликана.
Особливість реалізації тягнеться (гумового) банера.
Щоб банер тягнувся по ширині контейнера, в якому він буде на сайті, на панелі Властивостідля розташування та розмірів вкажіть відсотки замість пікселів.
Також використовуйте опції "Вирівняти по контейнеру"і "Гумовий макет"на верхній панеліінструментів.
Якщо перед використанням будь-яких інструментів вирівнювання увімкнути "Гумовий макет", то при зміні розміру батьківського контейнера всі елементи будуть вирівнюватися щодо один одного та щодо розмірів контейнера.
При цьому можна одночасно використовувати як відносні розміри елементів у відсотках, так і абсолютні – у пікселях.
4. Публікація проекту.
При додаванні банера в ADFOX менеджеру знадобиться відповідність кнопок і номерів подій. До кожної події менеджер пропише власне посилання для переходу, яке за допомогою змінної потім буде передано в код банера.
Після публікації проекту заархівуйте його у форматі .zip. Ваш креатив готовий до завантаження в банер ADFOX.
Інші редактори
1. Підрахунок кліків у банері
Щоб у ADFOX у баннера вважалася статистика за кліками, необхідно в HTML-коді в тезі а для атрибуту href прописати змінну:
%banner.reference_user1%
Також для посилань використовуйте атрибут target із змінною %banner.target% у значенні атрибута.
Якщо атрибут відсутній, посилання відкриється всередині iframe, тобто рекламований сайт відкриється на банерному місці.
Приклад HTML-коду для підрахунку кліків по банеру:
Сайт рекламодавця
У HTML-коді банерів, які розміщуватимуться в мобільних додатках, для обліку кліків використовуйте макрос: %reference%@%banner.user1%
2. Підрахунок кліків з кількох посилань у банері
Допустимо, в банери є кілька посилань для переходу, що ведуть різні сторінкирекламованого сайту, і з кожної з них потрібно отримати кількість переходів.
Перше посилання Друге посилання
Замініть значення атрибуту href на змінні %request.reference%@%banner.eventN%, де замість N має бути номер події з 1 до 28.
Наприклад:
Перше посилання Друге посилання
Відповідність посилань та змінних потрібно повідомити менеджеру, що додає банер ADFOX. Оскільки при додаванні банера потрібно буде у вкладці "Події" вказати для Події 1 перше посилання, а для події 2 - 2 посилання.
Додавання банера до ADFOX
Щоб додати банер до ADFOX, виберіть потрібний тип банера та шаблон "Banner HTML5".
Вкажіть параметри банера:
Архів з HTML5 креативом- завантажте.zip архів з проектом, поле "HTML5 код креативу"має залишатися порожнім (воно буде заповнено вмістом.html файлу вашого проекту вже після додавання банера).
HTML5 код креативу- завантажте zip-архів із проектом, підготовлений у HTML редакторах або вставте HTML-код.
Якщо у банері кілька посилань, додайте їх у вкладці Подіїу банера, поля URL переходу.
Відповідність номерів посилань та подій уточнюйте у розробників HTML-креативу.
Посилання на промірювальний піксель- за замовчуванням використовується піксель ADFOX //banners.adfox.ru/transparent.gif, при необхідності вести облік показів у сторонній системі, видаліть піксель ADFOX і вкажіть інше посилання.
Ширина креативу (px або %)- Вкажіть ширину банера.
Висота креативу (px або %)- Вкажіть висоту банера.
Зображення- Завантажте зображення.
Умови показу креативів:
- доданий HTML-код та зображення – буде показаний HTML-код.
- Додано зображення - буде показано зображення.
- доданий HTML-код – буде показаний HTML-код.
Ім'я атрибута class контейнера банера- вкажіть ім'я (або кілька імен через пропуск) для атрибуту class контейнера з банером.
Використати SafeFrame (yes|no)- safeFrame - це технологія, яка обертає рекламу в спеціальний iframe, який має суворий API. SafeFrame не дає реклами, яка в ньому малюється, збирати дані та взаємодіяти з іншою сторінкою поза safeFrame.
yes - увімкнути використання safeFrame та заборонити доступ до веб-сторінки;
no - не включати safeFrame. Код банера має доступ до веб-сторінки.
Стилі для блоку банера- Довільні стилі для контейнера банера одним рядком. Окрім стилю: display. Наприклад, "border: 1px solid red;". Невалідні значення будуть відкинуті браузером.
Плаваючий блок (або як його ще називають рухається, фіксований, прилиплий) потрібен на сайті для того, щоб користувач при прокручуванні сторінки бачив один нерухомий елемент, в який найчастіше поміщають рекламу (тизери, банери або контекст).
На жаль, правила адсенсу нам це забороняють. Тим не менш, багато власників сайтів ігнорують правила на свій страх та ризик. Можливо, їх за це навіть не карають, але я не радив би ризикувати.
Я розміщую в таких блоках РМЯ, свої тизери/банери, а іноді замість реклами виводжу там схожі записи або якусь корисну для відвідувача інформацію.
Давайте розповім, як можна зробити плаваючий блок на своєму сайті.
Завдання:зробити останній блок у бічній колонці (сайдбарі) - плаваючим. Причому, щоб він прилипав тільки в той момент, коли користувач доходить до нього скролінг, а не відразу при відкритті сторінки. Також блок має «відлипати», доходячи до футера (тобто не перекривати його).
Самий робочий спосіб
Існує багато варіантів реалізації блоку, що прилипає, але не всі вони працюють коректно. Скажу з особистого досвіду: один і той самий метод установки блоку може спрацювати на одному сайті, а на іншому з'являться косяки.
Нижче є приклад плаваючого блоку, який спрацював практично на всіх сайтах, де я його встановлював. Косяков не було. Двигун теж не важливий (DLE, WordPress, LiveStreet та ін.).
У бажаному місці бічної колонки вставляємо такий HTML-код:
$(window) .scroll(function() (
var sb_m = 20; / * відступ зверху та знизу */
var mb = 300; / * висота підвалу із запасом */
var st = $(window) .scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();
If(sb_h + $(document) .scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop": h));
}
else (
sb.css(("paddingTop": 0));
}
}
}
)
;
У цьому вся коді можна задати відступи зверху, знизу, і навіть висоту вашого підвалу, тобто. ту висоту, де блоку потрібно зупинитися.
Тепер підключаємо JS. Для цього прописуємо у секції HEAD:
