Умное обтекание картинки с использованием jQuery

Недавно задался вопросом: как сделать так, чтобы изображение красиво обтекало не просто по какому-то определенному его краю, а по заданному контуру. Это особенно красиво смотрится, когда изображение имеет прозрачный фон или цвет основного фона изображения совпадает с фоном всей html-страницы.

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

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

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

Да и к тому же такая верстка с использованием jQuery не приведет к каким-то серьезным проблемам. Если, к примеру, у посетителя сайта окажется отключенным обработчик JS-кода — применится простое, угловатое обтекание текста, к которому мы все так привыкли.

Как это выглядит?

Выглядит это нереально, круто. Ну, а если не верите на слово, то вот доказательство в виде картинки:

и вот на отдельной странице боевой пример:
Пример красивого обтекания изображения текстом

Как это сделать у себя на сайте?

Все, как всегда, просто. За это отвечает плагин jQuery – jquery.slickwrap.js (14Кб весом).

Весь код можно уместить в одном листинге:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../js/primer/jquery.slickwrap.js"></script>
<script>
$(document).ready(function() {
  $('.wrapReady').slickWrap();
});
</script>
<style>
.bg-house {
  float: right;
}
</style>
<img src="https://adminway.ru/primer/city.jpg" alt="" class="bg-house wrapReady" />

Кстати, стоит заметить, что изображение в примере используется «квадратное» и имеет белый фон. Данный метод на jQuery позволяет как-то распознавать на автомате такие места и ювелирно их огибать. Выглядит это просто шикарно.

Мне очень жаль, что такую нужную иногда штуку невозможно реализовать в новой версии CSS, но я рад, что это можно очень просто реализовать хоть и с помощью дополнительного плагина для jQuery.

Комментарии
  1. Семён опубликовал 22 Март 2014, 16:58 #

    Спасибо, статья пригодилась

    | Ответить
  2. newJS опубликовал 3 Февраль 2018, 12:03 #

    Отсутствие даты публикации статьи это как то неправильно.

    Тут реализация на чистом JS
    http://www.cyberforum.ru/html/thread1093371.html#post5774178

    | Ответить
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное