Вызов принят

История одного проекта

Зачем?

Для разработчика

Опыт
Развитие
Удовольствие

Для заказчика

Долговечность
Незаурядность
Посещаемость

приобретённого сайта

Известность

6 x Site Of The Day
Золото на «Рейтинге Рунета»
Золото на «Золотом Сайте»
http://tympanus.net/codrops/collective/collective-171/

Авторы

RD Construction

CreativePeople

Постановка задачи

Вызов принят!

3D

.scene { perspective: px; }

.scene { perspective: px; }

.scene { perspective: 200px; }
.cube { position:relative; width: 50px; height: 50px;
		transform-style: preserve-3d; }
.side { position: absolute; ... }

HTML:

<div class="scene">
	<div class="cube">
		<div class="side back"></div><div class="side left"></div>
		<div class="side right"></div><div class="side top"></div>
		<div class="side bottom"></div><div class="side front"></div>
	</div>
</div>


.back { transform: translateZ(-25px); }
.left { transform: translateX(-25px)
		rotateY(90deg); }
.right { transform: translateX(25px)
		rotateY(90deg); }
.top { transform: translateY(-25px)
		rotateX(90deg); }
.bottom { transform: translateY(25px)
		rotateX(90deg); }
.front { transform: translateZ(25px); }

.cube { transform: rotateX(42deg); }

BACK

TOP

BOTTOM

FRONT

.back { transform: translateZ(-25px) rotateX(180deg); }
.bottom { transform: translateY(25px) rotateX(270deg); }

FRONT

FRONT

FRONT

.cube { transform:translateZ(-25px); }

BACK

TOP

BOTTOM

FRONT

Почему?

transform-origin

50% 50%
50% 0
0 0
left bottom
50% 50% -25px
+backface-visibility:hidden

FRONT

.scene {}
.cube {
	position:relative; width: 50px; height: 50px;
	transform: perspective(200px) translateZ(-25px);
}
.side {
	position: absolute; ... 
	transform-origin:50% 50% -25px;
	backface-visibility:hidden;
}

Волшебство

none
perspective(200px)
perspective(200px) rotateY(180deg)
perspective(200px) rotateX(90deg)
perspective(200px) rotateX(-90deg)

FRONT

 


.back   { transform: perspective(200px) rotateY(180deg); }


.top    { transform: perspective(200px) rotateX(90deg);}


.bottom { transform: perspective(200px) rotateX(-90deg); }


.front  { transform: perspective(200px); }

BACK

TOP

BOTTOM

FRONT

Дайте два!

BACK

TOP

BOTTOM

FRONT

BACK

TOP

BOTTOM

FRONT

Modernizr

var element = document.createElement('p');document.body.insertBefore(element, null);var propName = 'transform-style';if ('webkitTransformStyle' in document.documentElement.style) 
	propName = '-webkit-'+propName;element.style[propName] = 'preserve-3d';var propValue = window.getComputedStyle(element, null)
	.getPropertyValue(propName);document.body.removeChild(element);return (propValue === 'preserve-3d');

if (?)

Ротатор

BACK

TOP

BOTTOM

FRONT

transform:translateZ(125px) scale(.5);

BACK

TOP

BOTTOM

FRONT

X FRONT X

Параллакс

Решение

front sin(a) * -1

bottom cos(a)

back sin(a)

top cos(a) * -1

Размытие

filter: blur(10px)

-webkit

Graceful degradation

SVG filter

y2u.be/RJnYkbm66ZI

<filter id="blur">
	<feGaussianBlur stddeviation="10" />
</filter>

CSS:

div {  filter: url(#blur);  }

<svg>
	<filter id="blur">
		<feGaussianBlur stddeviation="10" />
	</filter>
	<image filter="url(#blur)" 
		xlink:href="image.jpg" 
		width="200" height="200">
	</image>
</svg>

background-size: cover

svg > image

			<svg width="100%" height="125%">
	<g filter="url(#blur)">
		<rect x="0" y="0" width="100%" height="100%" 
			fill="#F2F3F5"></rect>
		<image width="100%" height="80%" 
			xlink:href="image.jpg"></image>
	</g>
</svg>

Леген ... дарно

Загрузка картинок

Способы:

Показать и пусть загружается
NO!
Загрузить, а потом показать
OK
Показать, а потом загрузить
WUT?

Действия сервера

Обычный запрос:

Берёт файл картинки
Отдаёт клиенту

Нужно срочно!

Берёт файл картинки
Уменьшает в 10 раз (по ширине и высоте)
Размывает
Кэширует
Отдаёт клиенту

В 404 раза меньше!

Анонс

Итоги

rdcm.com

Спасибо!

Презентация создана с помощью Shower