Рефокусировка объектов на сайте с помощью JS RUDEBOXВ данном уроке мы рассмотрим весьма маленькую заплатку для сайта, а именно для изображений, это будет рефокусировка, кто не знает кто это, расскажу, это изменение фокуса для объектов, с помощью данного приема можно выделить конкретную информацию на сайте. Такое реализовать можно достаточно просто, мы будем использовать небольшой фрагмент правил CSS и JS, кроме этого нам понадобится несколько изображений, некоторые из них будет в формате png, так как нам необходима прозрачность, и так, давайте посмотрим, что у нас получилось.

 

Для образца мы взяли за основу постер известной игры battlefield 4, мы разделили его на несколько частей. такой эффект можно использовать для непосредственного выделения информации. Следует отметить, что такой эффект будет работать только в браузерах Webkit.

Шаг 1. HTML

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

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

Рефокусировка объектов на сайте с помощью JS | RUDEBOX

Шаг 2. CSS

Теперь нам необходимо соединить все слоя, для этого мы будем использовать элементы склеивания и позиционирование для контейнера.

Шаг 3. JS

Последним шагом будет привязка фокуса к мышке и его активация, для этого нам понадобиться несколько правил JS:

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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