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

 

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

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

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

Шаг 3. JS

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

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

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

Читайте также: