—»     —»   Разрабатываем анимированную фото-стену с помощью CSS
  Раздел: Руководства, CSS/Style Sheets   Комментариев: 2  

Разрабатываем анимированную фото-стену с помощью CSS

Сегодня мы хотим рассказать вам еще об одном интересном CSS-демо. На этот раз мы займемся разработкой большой и бескрайней стены с фотографиями. Когда пользователь наводит курсор на изображение, прозрачная темная пленка постепенно исчезнет, затем появится текстовый ярлык и изображение станет больше.

Результат довольно интересный, и мы также в качестве бонуса включили сюда вторую версию для тех, кому понравится данное руководство. Давайте приступать!

Разрабатываем анимированную фото-стену с помощью CSS

Предварительный просмотр

Если вам хочется увидеть то, что мы получим в самом конце, то можете кликнуть по ссылке, приведенной ниже.

* Демо: Нажмите здесь, чтобы запустить демо

HTML-код

Первое, что нам необходимо сделать, это создать основную структуру нашей страницы и наполнить ее контентом. Нам понадобится один div-контейнер и неупорядоченный список.

<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Теперь пришло время чем-то заполнить наши пункты списка. Начнем с paragraph, так как в наших целях создать текст, который будет появляться при наведении. Далее мы вносим сюда изображение.

<div class="container">
<ul>
<li><p></p><img src=""></li>
<li><p></p><img src=""></li>
<li><p></p><img src=""></li>
</ul>
</div>

Теперь, когда мы уже можем прочувствовать саму структуру, давайте поместим сюда изображения-заглушки и текст (вы можете использовать что угодно, главное, чтобы размеры ваших изображений не превышали 320х213 пикселей).

<div class="container">
<ul>
<li><p>big</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
</ul>
</div>

Как видно, мы используем множество изображений, но это необходимость, если вы хотите создать такой эффект.

Стилизация контейнера

Теперь, когда мы уже создали огромную путаницу из контента в нашем HTML, пришло время немного приукрасить его посредством CSS. Первым делом нам нужно центрировать контейнер. Когда мы завершим все, что сказали, наши изображения по ширине будут составлять 280 пикселей. Учитывая, что мы размещаем 4 изображения друг за другом, ширина получается 1120 пикселей. Добавим автоматические поля, и тогда все красиво встанет на свои места.

/*------CONTAINER------*/
.container {
width: 1120px;
margin: 0 auto 50px auto;
}

Media Queries

В рамках данного проекта мы не будем углубляться в процесс разработки адаптивного дизайна, то было бы неплохо, если бы наш проект нормально отображался в различных браузерах и при различных разрешениях экрана. То есть, нам нужно сбросить ширину нашего контейнера на разных интервалах, чтобы при определенных условиях превратить нашу разметку из 4-х колоночной в 3-х колоночную, 2-х и, наконец, в 1 колонку, если окно браузера будет очень узким.

/*------MEDIA QUERIES------*/
@media screen and (max-width: 1120px) {
.container {width: 840px;}
}

@media screen and (max-width: 840px) {
.container {width: 560px;}
}

@media screen and (max-width: 560px) {
.container {width: 280px;}
}

Стилизация списка

Далее давайте перейдем к оформлению списка. У нас есть 3 области, которые нужно приукрасить: неупорядоченный список, пункты списка и пункты списка в положении при наведении.

Селектор ul должен просто очистить стиль списка, так как нам не нужна табуляция в списке. Элементы li должны быть выравнены по левому краю, и им необходимо задать относительное позиционирование, последний из которых будет служить для нас стартовой точкой для абсолютно позиционированного текста, которым мы воспользуемся позже. Нашим первым пунктам списка также необходимо выставить как ширину, так и высоты, позже мы увидим, почему это необходимо. Наконец, убедитесь, что вы скрыли всё перенаполнение.

Мы пока еще не сделали изображения ссылками (вы можете это сделать, если хотите), но нам хотелось бы сделать небольшой эффект для курсора при наведении (поэтому мы сменили обычный курсор на другой указатель).

/*------LIST------*/
.container ul {
list-style-type: none;
}

.container li {
float: left;
position: relative;
width: 280px;
height: 187px;
overflow: hidden;
}

.container li:hover {
cursor: pointer;
}

Стилизации paragraph

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

/*------PARAGRAPH------*/
.container li p {
color: transparent;
background: transparent;
font: 200 30px/187px 'Arvo', Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;

position: absolute;
top: 0;
left: 0;
width: 280px;
height: 187px;


-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.container li:hover p {
color: white;
background: #000; /*fallback for old browsers*/
background: rgba(0,0,0,0.7);
}

Внешний вид Paragraph

Первый раздел направлен на paragraph’ы, использованные в пунктах списка. Мы разделили их на три кусочка для удобного просмотра. Первый кусочек отвечает за общий внешний вид текста. Мы использовали шрифт Arvo, выровняли текст по центру и преобразовали все символы в заглавные.

Следующая часть, как вы уже наверное заметили, отвечает за цвет текста и фона, и они выставлены на прозрачный. Это позволяет нам по умолчанию спрятать текст, а затем, при наведении, отобразить.

Расположение paragraph

Следующий отрывок кода выставляет позиционирование наших paragraph’ов на абсолютное. Если мы этого не сделаем, то следующий текст будет расположен рядом или сверху наших изображений, вместо того, чтобы занять то же самое пространство (как раз то, что нам нужно). Это извлекает текст из обычного потока, и нашего относительного позиционирования, которое мы выставили ранее, задав нашим пунктам списка границы значения позиций, которые нам не следует пересекать.

Мы также выставили высоту и ширину paragraph. Это также кажется странным, но эффект, который мы хотим получить, требует, чтобы черное наложение было поверх изображения при наведении. Фон текста предоставляет нам удобный способ реализации этой задумки.

Переход paragraph

Третий кусочек отвечает за переход. Здесь все довольно просто – мы выставили transition длительностью в одну секунду ко всем параметрам с функцией тайминга.

Paragraph при наведении

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

Стилизация изображений

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

Для того чтобы реализовать это, выставите изображения по размеру пункта списка (280х176) и примените переход. Затем, когда пользователь будет наводить курсор мыши на элемент, изображение будет возвращаться к исходному размеру: 320х113.

/*------IMAGES------*/
.container img {
width: 280px;
height: 187px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.container li:hover img {
width: 320px;
height: 213px;
}

Эффект в действии

На этом мы закончили нашу разработку. Теперь вы можете лицезреть эффект в действии на представленном демо по ссылке ниже.

* Посмотреть демо

Разрабатываем анимированную фото-стену с помощью CSS

Альтернативная версия

Если вы просмотрели представленное выше демо, то вероятно заметили, что там есть две версии. Первая называется «fade», и именно ее мы разрабатывали сегодня. Вторая называется «flip» и эффект там немного отличается. Это нужно для того, чтобы продемонстрировать вам, как результаты могут отличаться.

В большинстве своем, CSS-код для версии с flip примерно такой же. Главное различие заключается в том, что мы убрали переход из paragraph и изменили эффект затухания (появления) на CSS-трансформацию, которая сжимает ширину изображения и расширяет ее в обратном направлении. В результате мы получаем «ленивый» переворот.

Завершение

Надеемся, что вам понравится экспериментировать с данным примером. Попрактиковавшись с параметрами, вы сможете придумывать и создавать собственные эффекты.

Если вам понравилось данное руководство, то обязательно прокомментируйте его.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, фотография
Опубликовал Design FactoRy   Прочитано (раз): 6588   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 июня 2012 @ 04:58
Написал: 333222 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
круто, даже js не нужен!
Комментарий #2: 18 августа 2012 @ 03:44
Написал: Кассий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ребята, очень крутая галерея, но вот вопрос, а можно ли добавить опцию, что бы при клике по изображению оно увеличивалось?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031