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

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

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

Если Вам интересны всевозможные новости мира WEB, тогда подписывайтесь на хостновости, которые позволят Вам всегда оставаться “в теме”.

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

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

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

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

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

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

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

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

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

<script src="http://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="http://adminway.ru/primer/city.jpg" alt="" class="bg-house wrapReady" />

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

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

Комментарии:

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

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

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