Адаптивный css3 баннер с эффектом параллакс — это просто

Всем привет. На днях один мой товарищ попросил меня повесить баннер ко мне на портал news.newnn.ru.

Вот кстати сам баннер который предлагалось вывешивать:

 

адаптивный jpg баннер, размер 864×112

Основным условием было корректное отображение баннера на всех устройствах: Windows, Mac Os X (включая retina), Android, IOS (включая retina), картинку адаптировать очень легко, просто указываем в теге <img style=»max-width: 864px;width: 100%;»> и все, картинка будет пропорционально растягиваться и уменьшаться в зависимости от ширины браузера. Retina дисплеи тоже не проблема поддерживать, просто рисуем картинку размером в 2 раза больше чем max-width, то есть 1728×224, в тегах все оставляем как есть.

Все бы ничего, но только как то скучно показывать обычную статичную jpg картинку. Если вы не в курсе, то flash на Iphone и iPad никогда не работал и вряд ли будет работать, такова политика Apple и лично я с ней согласен.

Тогда ко мне пришла идея, а почему бы текст в баннере не сделать в виде обычного HTML, фон сделать в виде svg картинки, а элементы на баннере анимировать с помощью css3 ? Сказано сделано, я попросил друга прислать баннер в .ai (Adobe Illustrator) формате, удаляю оттуда все текстовые элементы, оставляя только фон и сохраняю в файл в формате svg. Кто не в курсе, svg формат в background поддерживается всеми браузерами включая ie9 и выше, подробнее про svg в html можно почитать здесь.

Открываем наш svg файл в блокноте, скопируем строчки от <svg… до </svg>, и получим такой css код фона:

Сам html код баннера будет очень простым:

 

На этом этапе у нас уже отображается векторный баннер без текстовых элементов:

Далее сделаем все пространство вокруг баннера черным, а сам баннер выровним по центру браузера,

html код станет таким:

в css добавим:

получим баннер по центру с черным фоном вокруг:

 

далее делаем html разметку всех текстовых элементов, нужно уметь верстать, получаем такой вот html:

css код:

теперь у нашего баннера есть все текстовые элементы расположенные как надо:

 

 

 

 

 

 

 

А теперь самое интересное, нам нужно сделать анимацию всех текстовых элементов. Саму анимацию будем делать css3 свойствами @keyframes и animation (подробнее про css3 анимацию можно почитать здесь. Для того чтобы нам каждый раз не прописывать префиксы для всех браузеров (-webkit-animation, @-webkit-keyframes и тд) воспользуемся библиотекой prefixfree.js, которая за нас это сделает.

Анимация в css3 дело несложное с точки зрения написания кода, однако сложное с точки зрения логики и сценария, нужно придумать какая надпись в какой последовательности будет.  Я решил сделать такой сценарий:

1. Надпись cherdakcinema.ru будет висеть всегда, лишь иногда каким-либо образом анимироваться.
2. Где-то через 2 сек после загрузки баннера появляется надпись «приватный кинозал»
3. Потом еще через несколько секунд по очереди начинают появляться «Идеальное место для влюбленных»  «Атмосфера романтики» и «Большой экран»
4. Затем все надписи исчезают, надпись большой экран растворяется при этом увеличиваясь.
5. В самом конце надпись cherdakcinema.ru слегка увеличивается и по ней пробегается фон (эффект ios 8 слайдера, честно стырил с callbackhunter), далее баннер повторяется по кругу и надпись cherdakcinema.ru уменьшается)
6. Так же я решил сделать при наведении на cherdakcinema.ru плавно подсвечивать ее в красный цвет.

Только где-то спустя 2 часа я получил более менее работающий вариант:

Для того чтобы баннер стал адаптироваться под любые девайсы, добавим несколько строчек в css, где пропишем в зависимости от максимально возможной ширины браузера разную высоту баннера и размер шрифта надписей:

подробнее про адаптивную верстку в css можно почитать здесь здесь и здесь

Посмотреть на баннер в действии можно здесь. Исходники баннера скачиваем отсюда  баннер_чердак_iphone.html.

А теперь как добиться эффекта параллакс – когда скролишь, шапка как бы наезжает на баннер. Создается впечатление будто баннер находится сзади сайта и не является его частью, и не навязывается юзеру. Посмотрите на скрин как это выглядит:

 

 

 

 

 

 

 

 

Добиться этого очень просто, я решил применить margin-top для двух элементов, не изменяя общую высоту контента.

Для начала пропишем в html id у двух объектов, допустим это banner_top и header_top:

Представим, что мы проскроллили на 50px вниз, тогда нам нужно

1. Сдвинуть #banner_top на 50px вниз (margin-top: 50px)

2.

 

 

 

 

 

 

 

2. Сдвинуть #header_top на 50px вверх (margin-top: -50px)

 

 

 

 

 

 

 

3. Учесь условие, если скролл меньше чем высота баннера, а так же максимальный сдвиг шапки относительно баннера может быть не более чем высота шапки.

Для этого напишем простенький js код на jquery:

Получили изящное решение параллакс эффекта, он может не такой заметный, но зато очевидный, именно это и откладывается в сознании у людей, которые посещают ваш сайт, их ничто не должно раздражать и ничто не должно отвлекать их внимание, поэтому все эффекты6 анимации и прочие плюшки должны быть очевидными и не бросаться в глаза, словно как будто так и должно было быть. Такие ощущения очень важны в наше время для пользователя.

Заботьтесь о ваших пользователях !!! C вами был Антон Палыч, и это моя первая более менее развернутая статья на моем блоге, наконец-то у меня дошли руки, собственно для такого рода статей и создавался этот блог.

Спасибо за внимание, будут вопросы – задавайте.