Морфизм изображений при прокрутке страницы

Красивая трансформация на сайте это весьма правильный подход к организации материалов, они позволяют не только удивить но и добавить некую изюминку в Ваш ресурс. В сегодняшнем уроке мы рассмотрим как создать удивительную прокрутку и трансформацию изображений в стиле apple iMac. Идея состоит в том, что по умолчанию видим изображение во весь экран, при прокрутке страницы изображения будет трансформироваться и вписываться в экран подготовленного нами монитора. Вы можете разместить различные девайсы, что добавит сайту разнообразие.


Мы привели один пример трансформации, мы не могли пройти мимо после увиденной работы на imac, ну что же, давайте приступим:

Шаг 1. HTML
Разметка будет элементарной, у нас будет текстовый заголовок, который будет уведомлять о том, что Вам необходимо сделать, затем мы подключаем первый класс с изображением во весь экран:

1
Прокрутите вниз!
2

3

Второй класс будет стилизация нашего изображения в необходимый нами контур, в нашем случае это подготовленное изображение нового iMac.

Шаг 2. CSS
Все просто, мы указываем параметры для начального контейнера, нам необходимо указать общее значение изображения которые будет отображаться в конце прокрутки, а именно imac, рабочий стол которого мы будем увеличивать для полного отображения:

1
.mac {
2
height: 613px;
3
width: 764px;
4
margin: 1340px auto 100px;
5
background: white url("/AyELvGR.jpg") no-repeat 0 0;
6
-webkit-background-size: 764px 613px;
7
background-size: 764px 613px;
8
backface-visibility: hidden;
9
}
10
.mac.intro {
11
position: fixed;
12
width: 2548px;
13
height: 2052px;
14
-webkit-background-size: 100% auto;
15
background-size: 100% auto;
16
margin: 0;
17
top: 0;
18
left: 50%;
19
margin-top: -300px;
20
margin-left: -1274px;
21
-webkit-transform-origin: 50%;
22
-ms-transform-origin: 50%;
23
transform-origin: 50%;
24
}
25
.content {
26
width: 500px;
27
margin: 0 auto 150px;
28
}
29
.content h2 {
30
font-size: 52px;
31
line-height: 1.0865;
32
font-weight: 300;
33
margin-bottom: 48px;
34
}
35
.content p {
36
font-size: 18px;
37
margin: 1em 0 0 0;
38
line-height: 1.8;
39
color: #555;
40
font-weight: 400;
41
}
42
.content p a {
43
color: #555;
44
text-decoration: underline;
45
}

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



Шаг 3. JS
Последним шагом будет подключение прокрутки с помощью мыши и масштабирование изображения, для этого нам помогут несколько простых функций js:

1
function setTransform(el, transf) {
2
el.css('transform', transf);
3
el.css('-moz-transform', transf);
4
el.css('-webkit-transform', transf);
5
el.css('-o-transform', transf);
6
el.css('-ms-transform', transf);
7
}
8
$(function() {
9
var el = $('.intro'),
10
mac = $('#mac'),
11
offset = mac.offset(),
12
windowHeight = $(window).height();
13
$(window).on('scroll', function() {
14
$('h1').fadeOut(500);
15
var windowTop = $(window).scrollTop(),
16
scrollPercent = (offset.top - windowTop) / offset.top,
17
scale = 'scale(' + scrollPercent + ')';
18
setTransform(el, scale);
19
if (windowTop >= 940) {
20
el.hide();
21
} else {
22
el.show();
23
}
24
});
25
});

Надеюсь с помощью данного приема Вы реализуете свои красочные проекты, пользователи которых с радостью будут делиться впечатлением при посещении ресурса.

Вот и все. Готово!