Анимированные картинки на CSS3

в 8:42, , рубрики: css, css3, css3 transform, css3 transition, веб-дизайн, Веб-разработка, метки: , ,

Доброго времени суток, уважаемые читатели! Сегодня я хочу рассказать Вам о том, как за несколько минут при помощи CSS3 создать такую вот красоту:
Анимированные картинки на CSS3
В чём вся красота вы поймёте попозже.


ШАГ 1: Основной HTML

Приступим к работе и начнём с написание основного HTML кода. В один блочный елемент (с id=«ph») мы поместим четыре блока с одинаковым классом но разными идентификаторами, и в каждом из этих блоков будет своя фотограффия. Код будет віглядеть так:

		<div id="ph">
			<div class="photo" id="photo1">
				<img src="photo2.jpg" />
			</div>
			<div class="photo" id="photo2">
				<img src="photo3.jpg" />
			</div>
			<div class="photo" id="photo3">
				<img src="photo6.jpg" />
			</div>
			<div class="photo" id="photo4">
				<img src="photo7.jpg" />
			</div>
		</div>


ШАГ 2: Основные стили

Для нашей странички и блока #ph мы пропишем такие стили:

		body {
			background-repeat: none;
			background: #111013 url(image1.jpg) no-repeat top center;
			margin: 0;
			min-width: 1000px;
		}
			
		#ph {
			text-align: center;
			padding: 75px;
			margin-top: 50px;
		}

Все выше указанные стили написаны лишь для красоты.


ШАГ 3: Логика работы

Логика работы даного велосипеда заключается вот в чём:

  • По умолчанию каждый блок с картинкой развёрнут на какой-то (рандомный) угол;
  • При наведении на блок картинка увеличивается и поворачивается на ноль градусов;


ШАГ 4: Стилизируем блоки и картинки

Каждый блок с картинкой мы делаем инлайн-блоком и задаём относительное позиционирование, чтобы потом можно было его двигать:

		.photo {
			display:inline-block;
			position:relative;
		}

Для картинки внутри мы просто задаём ширину в 130 пикселей:

		.photo img {
			width: 130px;
		}

Каждый блок с картинкой мы поворачиваем на рандомный угол:

		#photo1 {
			transform: rotate(-20deg);
		}
		#photo2 {
			transform: rotate(10deg);
		}
		#photo3 {
			transform: rotate(35deg);
		}
		#photo4 {
			transform: rotate(-15deg);
		}


ШАГ 5: Анимируем картинки

При наведении на блок картинка должна увеличиваться и помещаться поверх все остальных. Отступы добавлены для того, чтобы при этом остальные блоки не «ездили».

		.photo:hover img{
			width: 250px;
			margin: -80px -60px;
			z-index: 1000;
		}


ШАГ 6: Вопрос кроссбраузерности

Свойства transition и transform относятся к свойствам CSS третьего уровня. Большинство браузер не поддерживают этих нативных свойств, а имеюь свои аналоги с приставками типа -webkit- или -moz-. Для разных браузеров свои префиксы:

  • -webkit- для браузеров на движке Webkit (Chrome, Safari);
  • -moz- для браузеров на движке Gecko (Firefox, SeaMonkey);
  • -ms- для браузера Internet Explorer;
  • -o- для браузеров на движке Presto (Opera, Nintendo DS Browser);

Чтобы наш велосипед работал в разных браузерах нужно добавить эти префиксы в наш код. Рассмотрим пример для .photo и #photo1:

		.photo {
			-webkit-transition: all 0.5s;
			-webkit-transition-delay: 0.1s;
			-moz-transition: all 0.5s;
			-moz-transition-delay: 0.1s;
			-ms-transition: all 0.5s;
			-ms-transition-delay: 0.1s;
			-o-transition: all 0.5s;
			-o-transition-delay: 0.1s;
			transition: all 0.5s;
			transition-delay: 0.1s;
		}
		#photo1 {
			-webkit-transform: rotate(-20deg);
			-moz-transform: rotate(-20deg);
			-ms-transform: rotate(-20deg);
			-o-transform: rotate(-20deg);
			transform: rotate(-20deg);
		}


Что у нас получилось?

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

Автор: makzimko


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js