Анимированный фотобаннер
В данном уроке мы разберемся с задачей создания анимированного фотобаннера, который бесконечно прокручивает в горизонтальной плоскости изображения. Дополнительное условие: не использовать JavaScript. Для того, чтобы фотобаннер был более функциональным, будем использовать отдельные изображения, размещенные в разметке, а не одну длинную фоновую картинку.
Идея
Допустим, у вас есть сайт, посвященный фотографии, или портфолио работ. Хорошо бы иметь простой баннер на странице, который прокручивал бы в горизонтальной плоскости выбранные изображения (или все).
Эффект легко получить с помощью JavaScript или Flash, наша задача состоит именно в том, чтобы обойтись только CSS.
Простой способ
Самый простой способ - взять изображения, которые нужно показывать, с помощью Photoshop скомбинировать их в одну длинную картинку, затем установить ее в качестве фона в CSS, а затем смещать по оси Х с помощью анимаций CSS.
Отлично работает и просто реализуется. Но, к сожалению, такое решение будет очень ограниченным. Нельзя получить доступ к отдельному изображению (например, чтобы реализовать эффект выделения). И при изменении коллекции придется снова браться за Photoshop для обновления фона.
Сложный способ
Оставим простой способ в покое, так как он не является полноценным решением поставленной задачи. Пойдем другим путем, который позволит вставлять новые изображения в разметку, одновременно изменяя содержание нашего баннера.
Сложность заключается в бесконечном цикле прокручивания. В CSS легко можно заставить повторяться фоновое изображение, но нет средств для повторения чего-либо в HTML. Также изображение должно повторяться после того, как все остальные картинки пройдут показ. Такие условия формируют головоломку.
В данном случае на помощь приходят кадры анимации. Любопытная часть заключается в том, что они в действительности повторяют анимации, а не изображения, но мы можем создать иллюзию бесконечного перемещения изображений.
Чтобы понять, как будет работать решение, представьте строку из изображений. Затем анимируем ее. Стартовая точка - 0%, точка остановки - 100%:
Если оставить решение в таком виде, то оно будет ужасным. Остается много пустого пространства. К тому же переход от финиша к старту будет сопровождаться ужасным рывком картинки. Б-р-р-р! Но будет непрерывная анимация.
Для формирования корректного вида нужно точно совместить первый и последний кадры. Тогда создастся иллюзия бесконечного потока изображений.
К сожалению, платой за решение будет повторение некоторых изображений в разметке HTML.
Разметка HTML
Для формирования страницы вставляем раздел header, некоторый текст и элемент div, который содержит наши изображения. Обратите внимание, что у нас используется 6 уникальных изображений, но первые 4 повторяются. При прокрутке последовательности хотя бы часть первых 4 изображений будет повторяться на разных кадрах.
<div id="container">
<header>
<h1>Анимированный фотобаннер</h1>
<p>Lorem ipsum dolor...</p>
</header>
<!-- Каждое изображение имеет размер 350px Х 233px -->
<div class="photobanner">
<img class="first" src="/image-1.jpg" alt="" />
<img src="/image-2.jpg" alt="" />
<img src="/image-3.jpg" alt="" />
<img src="/image-4.jpg" alt="" />
<img src="/image-5.jpg" alt="" />
<img src="/image-6.jpg" alt="" />
<img src="/image-1.jpg" alt="" />
<img src="/image-2.jpg" alt="" />
<img src="/image-3.jpg" alt="" />
<img src="/image-4.jpg" alt="" />
</div>
</div>
Зачем нужен класс “first”, который ломает всю семантику? Чтобы запустить анимацию необходимо указать первое изображение и переместить его влево (остальные последуют за ним). Такую задачку легко решить с помощью псевдо-элемента first-child, но указание псевдо-классов или псевдо-элементов для анимации в настоящий момент очень плохо поддерживается. Поэтому приходится использовать старый проверенный способ.
CSS
Код CSS начинается со сброса полей/отступов. Затем добавляем фон с текстурой и задаем стили для контейнера, устанавливая для него ширину 1000px и правило скрытия всего выступающего за рамки:
* {margin: 0; padding: 0;}
body {
<!-- src: http://subtlepatterns.com/?p=1045 -->
background: url('dark_geometric.png');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
Затем определяем стили для заголовка и фотобаннера. Для заголовка устанавливаем ширину 800px, чтобы он не растягивался на всю ширину контейнера. Также центрируем его и задаем стили для текста.
Для фотобаннера устанавливаем высоту 233px и ширину 3550px. Так все изображения размещаются от края до края, а контейнер будет обрезать все лишнее.
/*Заголовок*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*Фотобаннер*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
Теперь внешний вид нашего баннера сформирован и пришла пора заняться анимацией.
Процесс определения кадров достаточно прост. Сначала нужно взять класс “first” и определить анимацию. Здесь указывается имя анимации, устанавливается длительность и параметр повтора (в нашем случае - бесконечный повтор).
Ниже определяются кадры анимации с помощью правила @keyframes. Нам нужно только два кадра - один для начала и один для завершения. Мы просто устанавливаем отрицательное значение для поля, чтобы переместить ряд изображений влево достаточно далеко, чтобы вторая итерация совпала с началом.
/*Кадры анимации*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
Данного кода достаточно для функционирования нашего фотобаннера и бесконечным прокручиванием изображений.
Теперь расширим функционал. При наведении курсора на изображение будем увеличивать его на 20% и добавлять тень:
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ICMr5tDQQQ4/lessons.php
|
В данном уроке мы разберемся с задачей создания анимированного фотобаннера, который бесконечно прокручивает в горизонтальной плоскости изображения. Дополнительное условие: не использовать JavaScript. |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2026-08-25 » Статистика каналов в Максе: почему это важно для вашего бизнеса
- 2026-08-25 » Долгожданный контакт: как появление @AdSupport меняет правила игры в Telegram-рекламе
- 2026-08-25 » Скидка, которая видит покупателя насквозь: как новый инструмент Яндекса превращает бюджет в продажи
- 2026-08-25 » Новая эра телевизионной рекламы: как Яндекс Директ превращает экран в витрину
- 2026-08-25 » Отзывы как двигатель продаж: как обратная связь клиентов продвигает ваш сайт в поиске
- 2026-08-19 » ИИ проверят на соответствие духовно-нравственным ценностям: что это значит для вашего бизнеса
- 2026-08-19 » Маркировка ИИ-контента: что меняется для бизнеса с 1 сентября 2026 года
- 2026-08-19 » Белый список Минцифры: как сайты попадают в перечень и что это значит для вашего бизнеса
- 2026-08-19 » Мобильное приложение Директа получило новые возможности: создание ЕПК и агентский доступ
- 2026-08-19 » Google тестирует новую главную страницу без кнопки поиска: что это значит для вашего бизнеса
- 2026-08-12 » Контент для транспортной компании: какими текстами наполнить сайт, чтобы клиенты выбирали вас
- 2026-08-12 » Сезонность в SEO: как анализировать спрос, не путать падение с катастрофой и готовить сайт к пику продаж
- 2026-08-12 » Семантический поиск: почему плотность ключей умерла и как теперь выводить сайт в топ
- 2026-08-12 » ChatGPT без лимитов: как новая эра искусственного интеллекта меняет правила для вашего бизнеса
- 2026-08-12 » Нейропрофиль VK: как объединение данных пользователей меняет правила таргетинга и продвижения
- 2026-08-03 » Мессенджер «Макс» перестал расходовать мобильный трафик: новый уровень доступности для ваших клиентов
- 2026-08-03 » Яндекс Директ запустил динамический коллтрекинг: как бесплатно оценивать реальные звонки и платить только за результат
- 2026-08-03 » Макс открыл истории для всех пользователей Android: новый канал коммуникации для вашего бизнеса
- 2026-08-03 » Новый инструмент в Яндекс Товарах: как сравнение с похожими бизнесами помогает расти
- 2026-08-03 » Яндекс Вебмастер ускорил обновление данных в Мониторинге запросов: что это значит для вашего бизнеса
- 2026-07-29 » «Адаптация бюджета» в Яндекс Директе: как автоматически масштабировать рекламу без потери эффективности
- 2026-07-29 » Overlay в РСЯ: новый формат мобильной рекламы, который не раздражает пользователей
- 2026-07-29 » «Панорама» в Яндекс Директе: новый уровень охватной рекламы для вашего бизнеса
- 2026-07-29 » Карточки товаров и отзывы на маркетплейсах: что по закону считается рекламой, а что нет
- 2026-07-29 » Комментарии в приватных каналах «Макс»: новый инструмент для бизнес-коммуникаций
- 2026-07-23 » Как ошибки в AI-ответах портят репутацию компании
- 2026-07-23 » Маркировка рекламы в 2026 году: фатальные ошибки, которые обойдутся вашему бизнесу в полмиллиона рублей
- 2026-07-23 » Нейросети в дизайне сайтов и графике: революция, эволюция или угроза?
- 2026-07-23 » РСЯ открыла инструмент авторасстановки рекламы для всех партнеров: как автоматизация меняет правила монетизации
- 2026-07-23 » Контент для стоматологических клиник: какими текстами наполнить сайт, чтобы пациенты записывались сами
Гораздо больше людей сдавшихся, чем побежденных. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.