Як створити анімований банер на CSS3, RUDEBOX

Тому можливе неправильне відображення і деяке пригальмовування в старих браузерах. У демонстрації представлені два варіанти банера: горизонтальний та вертикальний. Почнемо ми зі створенняHTML -розмітки, в даній розмітці можна зрозуміти всю структуру нашого банера, і внести до нього необхідні зміни:

Слід припинити свою увагу на такому елементі як човен детальніше, у коді наведено опис:

З човном відбуваються три анімації:

1. Вислизування човна зліва. Застосовується для невпорядкованого списку (група).
2. Імітація розгойдування човна на воді. Застосовується до списку (човна).
3. Поява питання знак. Застосовується елементу div (знак питання).

Якщо подивитися на демонстраційну сторінку, то модно побачити, що анімація для пункту списку (човна) також діє елемент div всередині нього (Знак питання). Також анімація «вислизання» для невпорядкованого списку діє на пункт списку (човен і знак питання).

Зворотня сумісність:

Ми забезпечимо зворотну сумісність просто задавши стилі розмітки так, ніби анімацій CSS не існує зовсім. Якщо хтось дивитиметься сторінку в старому браузері, то побачить звичайну статичну картинку, а не порожнє біле місце.

Якщо браузер не підтримує анімацію, елемент div залишиться невидимим для користувача. А ось так ми забезпечимо зворотну сумісність із старими браузерами:

Тепер елемент div виводитиметься навіть якщо анімація не може запуститися. А в сучасних браузерах div спочатку буде прихований в ході анімації.

Тепер ми знаємо як забезпечити зворотну сумісність (що допоможе уникнути проблем під час роботи з реальними проектами).Настав час створити основу нашого коду CSS.

Потрібно пам'ятати про 3 моменти:

1. Оскільки банер використовуватиметься на різних сайтах, ми зробимо всі наші селектори CSS особливими. Усі вони починаються з ідентифікатора #ad-1. Таким чином ми намагатимемося уникнути перекриття нашого коду та коду сайту.
2. Ми маємо намір ігнорувати затримку анімації в установках. Якщо використовувати затримку анімації при заданні стилів з видимістю елементів за промовчанням, то структура банера порушуватиметься раптовим зникненням або появою частин зображення після завершення анімації. Затримка анімації імітується тривалістю та налаштуванням кадрів.
3. Коли можливо, використовуємо одну анімацію для декількох елементів. Таким чином, ми заощаджуємо час і скорочуємо розмір коду.

Отже, створюємо основу для нашого банера. Встановимо для неї відносне позиціонування, щоб внутрішні елементи можна було коректно розміщувати. Також приховуватиме все, що виходить за рамки елемента:

---