Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 30. 3D графика, эффект Parallax

Содержание курса

3D графика

3D графика упирается в понятие перспектива. Перспектива определяет сколько пикселей будет находиться от точки обзора. Создадим элемент, определим для него перспективу и повернём его по оси Y на 34 градуса:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>3D graphics</title>
			<style>
			
				.leo{
					transform: perspective(600px) rotateY(34deg);
					}
			
			</style>
		</head>
		<body>
		
			<img src="/images/leopard.jpg" class="leo" width="750" height="394"
				alt="3D leopard" />
		
		</body>
	</html>

Результат отображения: 3D графика

Как видно из примера, перспектива задаётся функционалом perspective() свойства transform, в скобках прописано сколько пикселей будет от точки наблюдателя до объекта. Комфортное значение perspective() для веб-разработки находится в пределах 600px-800px.

В следующем примере сделаем плавное изменение поворота по оси Y при наведении курсора мыши. Для этого добавим свойство transition и функционал translateZ() с положительным и отрицательным значениями:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>3D graphics</title>
			<style>
			
				.leo{
					transform: perspective(600px) translateZ(-1000px);
					}
					
				.leo:hover{
					transform: perspective(600px) rotateY(34deg) translateZ(100px);
					transition: 1s transform;
					}
			
			</style>
		</head>
		<body>
		
			<img src="/images/leopard.jpg" class="leo" width="750" height="394"
				alt="3D leopard" />
		
		</body>
	</html>

Результат работы данного кода показан ниже (наведите курсор мыши, в некоторых браузерах могут наблюдаться небольшие глюки):


3D графика

Точка перспективы задаётся свойством perspective-origin, которая определяет, где будет располагаться элемент на осях X и Y. В значении указываются два значения в любых единицах измерения CSS - положение по оси X и по оси Y:
#div {perspective-origin: 50% 50%;} - это значение perspective-origin по умолчанию.

Свойство transform-style определяет как дочерние элементы должны располагаться в 3D пространстве. Это свойство должно использоваться вместе с transform.

transform-style
Значение Описание
flat Дочерние элементы лежат в той же плоскости, что и родитель
preserve-3d Дочерние элементы будут отображаться в 3D-пространстве

Эффект Parallax

Эффект Parallax - это эффект движения элементов на странице с разной скоростью. Этот эффект можно видеть в известной игре "Марио", когда персонаж бежит быстро, а фон - деревья и облачка - двигаются медленнее.

Создадим эффект Parallax - сделаем слайды, зададим perspective: 1; у body, сместим слайд на минус 1 при помощи свойства translateZ и масштабируем его:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Parallax</title>
			<style>
			
				html, body {
					height: 100%;
					}
					
				html {
					overflow: hidden;
					}
					
				body {
					margin: 0;
					padding: 0;
					perspective: 1px;
					transform-style: preserve-3d;
					overflow-y: scroll;
					overflow-x: hidden;
					}
					
				.slide {
					width: 100vw;
					height: 100vh;
					position: relative;
					background-size: cover;
					background-position: center center;
					background-repeat: no-repeat;
					}
					
				.slide1 {
					background-image: url(/images/slides/slide1.jpg);
					background-attachment: fixed;
					display: flex;
					}
					
				h1 {
					font-size: 8vw;
					color: white;
					font-family: "Segoe UI, sans-serif";
					font-weight: 100;
					text-shadow: 1px 1px 1px #999;
					display: block;
					width: 70vw;
					height: 30vh;
					line-height: 30vh;
					background: rgba(255, 255, 255, 0.2);
					text-align: center;
					border-radius: 1vh;
					border: 1px solid #eee;
					margin: auto;
					}
					
				.slide2::before {
					background-image: url(/images/slides/slide2.jpg);
					position: absolute;
					content: "";
					width: 100vw;
					height: 100vh;
					z-index: -1;
					transform: translate(-1px) scale(2);
					background-size: cover;
					}
					
				.slide3 {
					background-image: url(/images/slides/slide3.jpg);
					background-attachment: fixed;
					}
					
				.slide4::before {
					background-image: url(/images/slides/slide4.jpg);
					position: absolute;
					content: "";
					width: 100vw;
					height: 100vh;
					z-index: -1;
					transform: translate(-1px) scale(2);
					background-size: cover;
					}
					
				.slide5 {
					background-image: url(/images/slides/slide5.jpg);
					}
			
			</style>
		</head>
		<body>
		
			<div class="slide slide1">
				<h1>Hello Parallax</h1>
			</div>
			<div class="slide slide2"></div>
			<div class="slide slide3"></div>
			<div class="slide slide4"></div>
			<div class="slide slide5"></div>
		
		</body>
	</html>
Показать в браузере

background-size: cover; - масштабирует изображение так, чтобы его ширина и высота равнялась ширине и высоте блока.
background-size: contain; - масштабирует изображение так, чтобы оно целиком уместилось внутри блока.

Единицы измерения vh, vw, vmin, vmax вычисляются относительно размеров окна браузера; vh и vw эквивалентны 1% высоты и ширины окна браузера соответственно, тоже самое для vmin и vmax, но только для меньшего и большего размера ширины или высоты окна браузера (с учётом или без учёта ширины полосы прокрутки).

Некоторые браузеры, в частности Firefox, с задачей примера могут не справиться и будут наблюдаться глюки. Наилучшим образом это работает в браузерах Google Chrome и Yandex

Для того, чтобы эффект Parallax, был более заметен, важно научиться правильно подбирать картинки фона. Это чутьё придёт с практикой.

На этом мы заканчиваем курс HTML. Не всё из того, что мы изучили вам потребуется при вёрстке сайтов, однако, как я уже говорил, важно понимание того, как работает код HTML, а понимание приходит с практикой. Лучшая практика в нашем случае - это создание сайта.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля