Май 30, 2020 Запись была обновлена
Баннеры CSS — создание баннеров на чистом CSS
Благодаря развитию веб-технологий и современных браузеров, мы можем создавать множество эффектов без использования 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 анимация для начинающих.
Вывод
Все современные браузеры поддерживают CSS3 свойства, а, значит, и баннеры будут корректно отображаться в таких браузерах. Но с помощью JS плагинов можно создать баннеры CSS и для старых браузеров. Изучив основы анимации CSS, Вы поймете процесс создания баннеров и вскоре создадите свой первый баннер на чистом CSS! 😉
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Здравствуй, Юрий. Думаю с использованием JS все-таки надежнее. Вот смотрел слайдер на чистом СSS-3, да, в некоторых и даже не очень старых браузерах выводился неправильно, либо не работал. Не знаю, скорее всего это ошибки в верстке, но на JS тот-же слайдер работает хорошо.
Привет, Егор!
В необходимо обрабатывать события при клике, а здесь лишь анимация без участия пользователя.
на css всё же подтормаживает немного, как то использовал для создания баннера (ссылки запрещены), даже на телефоне вышло шикарно^ ^
Прошу обратить внимание, что в Хроме Версия 49.0.2623.112 m баннеры 2 и 3 не запускаются. Просто статичное изображение.