Сдвиг частей фотографии в разные стороны

Пара примеров, как разрезать картинку <img> на несколько частей и произвольно сдвинуть их в нужные стороны.

Решение сделано на CSS без использования скриптов

Вертикальный сдвиг:

Наведите указатель мыши на фотографию

Данное решение сделано исходя из ширины изображения 100%. Другими словами, нам неизвестна его ширина и высота в пикселях.

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

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

В примере это 5 одинаковых частей и соотв. ширина каждой должна быть 20%. Для этого помещаем изображения в блоки шириной 20% и размещаем их друг за другом. А для самой картинки в этом случае задаем ширину 500% (блок составляет 5-тую часть от нужного, поэтому увеличиваем в нем ширину картинки тоже в 5 раз). Задать 100% нельзя, в этом случае у нас получится 5 маленьких одинаковых картинок, а точное значение в пикселях неизвестно. Далее мы смещаем влево картинку во 2,3,4 и 5 областях на нужный процент.

Во второй области это 1/5 от 500% (100%), в третьей 2/5 от 500% (200%) и т.д.

В конце остается только раздвинуть наши части при наведнии мышки.

Горизонтальный сдвиг:

Наведите указатель мыши на фотографию

Решение похоже на предыдщуее, только тут картинкам задается ширина 100%, а не 500% и деление происходит по горизонтали.

Проблема возникает в том, что нам неизвестна высота, от которой считать проценты сдвигаемых блоков. Чтобы ее решить, мы добавляем еще 1 прозрачное изображение, которое даст нам нужное значение.

Немного креатива:

Наведите указатель мыши на фотографию

Пример такой же, как и горизонтальный сдвиг, только с блоками разной ширины (10% 10% 60% 10% 10%) и другим ховер эффектом.

Поэтому картинки мы увеличиваем соотвественно:

Блоки в 10% (1/10) - картинка 1000% (100% х 10)

Блок в 60% (6/10) - картинка 166.6666666666667% (100% х 10 / 6)

Сдвиг картинки для блока осуществляется так:

  • Для второй - 1/10 от 1000% = 100%
  • Для третьей - 2/10 от 166.66 = 33.33%
  • Для четвертой - 8/10 от 1000% = 800%
  • Для пятой - 9/10 от 1000% = 900%

Автор фотографий susan-lu4esm

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

Добавить комментарий:

Ваш комментарий отправлен!