В этом уроке мы расскажем о довольно простом, но интересном примере использования прокрутки HTML для приближения изображений. При правильно подобранном изображении (как, например в этом уроке) эффект может выглядеть космически. А еще это неплохой инструмент для различных версий онлайн-магазинов, в который важно посмотреть фото товара поближе.

Нужный код HTML:

<div id="hubble-container">
        <img src="hubble-extreme-deep-field.jpg" id="hubblepic">
</div>
<input type="range" min="1" max="5" value="1" step="0.1" id="zoomer" oninput="deepdive()">

И код CSS:

#hubble-container {
        width: 50%; font-size: 0;
        border: 1px solid #111;
        overflow: hidden;
        margin: 0 auto;
}
#hubblepic { width: 100%; }
#zoomer {
        display: block;
        width: 50%;
        margin: 2rem auto;
}

Для прокрутки также используется следующий код Javascript:

var zoomer = document.getElementById('zoomer'),
hubblepic = document.getElementById('hubblepic');
function deepdive() {
        zoomlevel = zoomer.valueAsNumber;
        hubblepic.style.webkitTransform = "scale("+zoomlevel+")";
        hubblepic.style.transform = "scale("+zoomlevel+")";
}

В результате получаем изображение с возможностью приближения:

У этого способа, по меньшей мере именно в таком виде, есть несколько ограничений:

• Приближается только центр изображения: нельзя рассмотреть углы или стороны, хотя это можно сделать с помощью дополнительного кода JavaScript.

• В старых версиях браузеров может не поддерживаться <input type="range"> (тип ввода прокрутка), так что нужно использовать обходные пути для этого элемента. Хотя в современных версиях браузеров все работает без проблем.

• Все изображение полного разрешение должно быть подгружено до того, как оно будет уменьшено. Srcset и новый элемент рисунка могут помочь в этом, или можно временно заменить изображение высокого разрешения при определенном приближении с помощью JavaScript.

Используемое изображение — Ха́ббл-Экстри́м-Дип-Филд (англ. Hubble eXtreme Deep Field, сокр. XDF) детальный снимок длительной экспозиции, содержащий более 2000 фотографий небольшого участка пространства в центре Hubble Ultra Deep Field в созвездии Печь, созданный на основе данных, полученных телескопом «Хаббл». Так как при рассматривании удаленных частей вселенной видно то, что происходило очень давно, на этой фотографии видны около 5500 галактик, самая далекая из которых удалена от нас на 13,2 млрд световых лет, самая молодая галактика, запечатлённая на снимке, образовалась всего через 450 млн лет после Большого взрыва.

Автор урока Dudley Storey

Смотрите также:

• Создание галереи изображений на чистом CSS
• Создание фонового видео, прокручивающегося вместе с содержимым
• Создание адаптивной галереи изображений HTML5 с подписями