JavaScript и обработка изображений: zoom-эффект / WAYUP
Маленькие изображения – великая вещь, способная сократить время загрузки страницы и занять малое количество пространства на этой самой странице. С другой стороны, на них трудно смотреть на больших экранах. Но благодаря JavaScript можно создать некоторые довольно интересные вещи. Даже больше. Почти всю страницу можно создать с помощью только плагинов JS и спасти тем самым себя от необходимости долго и изнурительно кодировать.
Плагины JS позволяют поработать с изображениями не хуже, чем CSS. Обрезка, увеличение, изменение и прочее. При этом именно обрезка является наиболее сложной функцией, так как предварительно требуется провести кадрирование, выбрать центральную часть, а не просто: «взять и подрезать края как попало». Что же касается функции изменения масштаба изображений или эффекта увеличения (Zoom), то JS, вероятно, лучшее решение для такой задачи.
Запускаете вы интернет-магазин или просто имеете большую галерею миниатюр на сайте, но один из этих плагинов ниже должен совершенно точно помочь в обработке всех изображений.
И в преддверии праздничных недель мы просто и незатейливо сделаем небольшой экскурс в огромное количество плагинов для изменения размеров и обрезки изображений (вторая часть).
Замечательная лупа, именующаяся blowup.js, отлично передает эффект «увеличение при наведении». На примере достаточно просто передвигать курсор мышки по изображению, а лупа будет автоматически увеличивать области под курсором.
Одно «но» есть у скрипта – он плагин jQuery, поэтому вам нужна библиотека jQuery, чтобы запустить его. Но при этом вы можете вызвать функцию только одной строкой JS, что делает его очень легким в работе. Взгляните на страницу плагина на портале GitHub, где найдется и инструкция по подключению, и примеры кода, конфигурации, и многое иное. После добавления JS файла достаточно просто вызвать функцию blowup() с необязательными параметрами ширины/высоты, тени, указателем размера и масштаба увеличения. То есть можно настроить лупу самостоятельно, а можно использовать настройки по умолчанию.
При сравнительно небольшом размере (4КВ), плагин Leroy Zoom позволяет производить увеличение изображения в двух вариантах. На демонстрационной странице отлично видно, что сначала можно просто перемещать курсор по картинке, а увеличенная часть будет появляться рядом. Или можно кликнуть по изображению и тогда выбирать непосредственно некоторую часть в определенном радиусе.
На страничке GitHub можно найти подробные инструкции по использованию и конфигурированию. И хотя некоторых может ввести в небольшой шок дата обновления, нужно сказать, что демонстрация отлично работает и до сих пор в основных браузерах (Chrome, Opera, Edge).
MagnifierВ отличие от своих предшественников Magnifier.js является бесплатным ванильным плагином JavaScript, который также позволяет добавить эффект масштабирования за пределами основной миниатюры изображения.
Однако у плагина есть одна действительно уникальная особенность – эффект масштабирования, которым можно управлять с помощью колесика прокрутки мыши (или тачпада ноутбука).
При наведении на миниатюру вы можете прокручивать вверх и вниз колесико, чтобы увеличить или уменьшить выбранную область. И на скриншотах ниже размер увеличения – не предел.
Этот плагин может использоваться в галерее изображений или с одиночными картинками. Сам создатель даже подал отличную идею по реализации карточного варианта (изображение-описание), что весьма красиво смотрится. С плагином вообще удобно работать и ошибиться трудновато.
Zoomple
Из всех плагинов по реализации эффекта Zoom, которые вообще существуют, Zoomple является одним из самых уникальных (из большинства). В составе пакета можно обнаружить множество стилей работы по умолчанию, включая круговые и квадратные элементы, а также варианты с задержкой загрузки изображения. На демонстрационной странице как раз и можно все их испытать и опробовать в работе. И, разумеется, убедиться, что плагин отлично поддерживается браузерами.
Несмотря на обилие вариантов, лучшая его работа – эффект увеличения при наведении.
Он обладает большим количеством пользовательских настроек. Огромный список этих параметров находится на github и задаются они непосредственно в самом коде, при вызове функции.
Если коротко, то настройки позволяют определять URL-адреса для различных изображений и даже контролировать время загрузки изображения (например, страница прогрузилась и изображение в кэше тоже есть, но по желанию разработчика (нас с вами) пользователь увидит картинку чуть позже, предположим, секунд через 10). Вы также можете выбрать положение окна масштабирования, фон по умолчанию, использовать стили CSS для окна масштабирования и показать или скрыть курсор. Интересные возможности и весьма полезные в большинстве вариантов.
Zoomple действительно очень большой плагин масштабирования изображений и подходит для почти любого веб-сайта. И при всей своей «крутости» он бесплатен.
EasyZoomЕще один очень насыщенный плагин – EasyZoom. Как следует из названия, это простой в использовании масштабирования плагин и создан он на jQuery.
Особенность его даже не в том количестве вариантов зумминга, а в его возможности отлично работать на сенсорных устройствах, таких как планшеты и смартфоны, где большинство библиотек JS не осмеливаются вообще запуститься. Или же попросту нажатие пальцем по изображению не приводит к возможности увидеть увеличение. А тут, вот, пожалуйста.
Итак, при наведении курсора на изображение можно выбрать, как будет выглядеть эффект масштабирования, например, во всплывающем (или статичном) окне рядом с изображением или в самой миниатюре. Плагин даже работает с галереями изображений, где пользователь может сначала выбрать интересующую его миниатюру, а потом увеличить и рассмотреть детали.
Кроме того, с плагином удобно и просто работать, настраивать; есть страничка на GitHub, но именно руководство по кодированию, настройке и прочее находится на демо-странице.
ZoomНесколько специфичный плагин, разительно отличающийся от своих собратьев. Zoom.js не создает функцию масштабирования в стиле монокля (monocle) и не добавляет на страницу изображения, увеличенного раза, эдак, в три.
Вместо этого плагин работает по клику на изображении для увеличения его в области предварительного просмотра данного изображения. Такой эффект можно встретить часто в интернет-магазинах при увеличении фотографий товаров. Так же Zoom.js – отличный вариант для просмотра изображений в портфолио, новостных сайтов и блогов по всему интернету.
Плагину совершено не требуется указывать какие-либо настройки, ему не важен оригинальный размер изображений или размер миниатюр. Его легко настраивать и использовать. Подробности, как обычно, на GitHub.
MlensПри первом взгляде на Mlens может возникать ситуация, когда и не знаешь, что думать об увиденном. Но… этот бесплатный плагин предлагает много функциональных возможностей, хотя сам по себе имеет очень малый размер, а настроек у него предостаточно. Что занятно, но уже сразу на демонстрационной странице можно выбрать необходимые настройки и воочию увидеть, что и за что отвечает и каким будет конечный результат.
Разумеется, некоторым нравится реалистичный эффект масштабирования, а некоторым – более усиленный. Значение масштабирования по умолчанию (1) не слишком высокое или низкое. Оно среднее в действительности. Создается эффект, будто вы на самом деле увеличиваете изображение, где можно увидеть достаточно деталей и получить некоторую информацию. Но при этом, такое масштабирование не настолько сильно, чтобы различать пиксели. Попробуйте разные варианты значения, но, наверное, единица самый удобный.
Плагин отзывчив и так же, как его собрат EasyZoom, поддерживает работу на мобильных сенсорных устройствах. На страничке много информации по использованию, настройке, но на деле это все просто делается.
Smooth ProductsБольшинство функций масштабирования изображений лучше всего подходят для сайтов электронной коммерции. И именно для интернет-магазинов, в первую очередь, и был создан Smooth Products.
Это бесплатный плагин jQuery для миниатюрных фотографий товаров, благодаря которому разработчик может настроить обычную функцию «наведения для увеличения» без необходимости заниматься кодированием с нуля.
Демо-страница служит отличным примером не только функции масштабирования, а также миниатюр для коллекции изображений, слайд-шоу, которые также являются общими атрибутами большинства сайтов электронной коммерции. Как говорится, есть специализированные плагины, есть обычные. Этот как раз специализированный.
Все, что вам нужно знать мгновенно, это то, что подключать jQuery необязательно. Он опционален. Для действительно «классных» эффектов достаточно разобраться в работе самого js и в настройках CSS. Как обычно, вся информация о настройке находится на GitHub и она довольно ясна, поэтому практически любой разработчик сможет настроить плагин под свои цели.
Труднее всего может оказаться его настройка в случае, если вы работаете с «третьими» платформами. То есть, если вы создаете сайт на уже готовых онлайн-ресурсах (Shopify, Wix, Ukit и аналогичные). Обычно они предлагают свой набор плагинов и заменить их бывает не так просто. Но возможно. Во всем остальном – плагин несложный.
Плагин Zoomio можно охарактеризовать как самый простой для мобильного использования среди малоизвестных собратьев. Нет, реально, плагинов создается и пишется настолько много, а ведь, по факту, они выполняют одну и ту же функцию – увеличивают изображение. Но что отличает этот от множества – красивые эффекты перехода увеличения. На демонстрационной страничке лучше не спешить и попробовать все варианты, насладиться красотой возможных переходов.
Работает Zoomio полностью на jQuery и позволяет использовать много, очень много функций для настройки качества конечного результата. Вы можете установить общий масштаб и выбрать какой тип функции масштабирования использовать (внутри миниатюры, внешний блок, увеличительный круг и т. д.).
Несмотря на то, что демо находится на dynamicdrive, существует и страничка на GitHub, где также есть информация о внедрении скрипта на страницу. Тем не менее, на демо-странице информации больше и она подробнее.
Мы рассмотрели незначительную часть JS-плагинов по работе с эффектом Zoom для изображений. Кто-то скажет, что некоторые из них давно не обновлялись, другие подумают, что есть и иные примеры. И все вы правы. Но есть вот какая мысль. Все эти плагины отлично работают в современных браузерах и описать все плагины невозможно. Нам понравились эти, кому-то – воооон тот. И это отлично! Вам есть с чем сравнивать, а в копилке будут храниться вариации для экспериментов.
Думается, что во всем этом списке найдется, по крайней мере, один плагин, который вы захотите попробовать использовать. Не имеет значения, какой вид масштабирования изображения вам нужен, все они учитываются здесь и вы определенно сможете найти отличный плагин для себя. И заметьте – бесплатный.
Просто посмотрите на список еще раз и подумайте вот о чем, какой из JS-плагинов более всего выделяется, изучите рекомендации разработчика, детальные возможности и настройки. Тогда ваш сайт сможет похвастаться не просто наличием Zoom’инга, но еще и красиво настроенным.
Что же касается той части материала и плагинов, о которой мы упоминали в начале, по обрезке изображений, то оставим её на новый год, с неё и начнем.
Zoom-эффект на CSS3
Блог / Танцы с CSS / спец. эффекты / Zoom-эффект на CSS3
Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, добавить динамики. Я не буду использовать скрипты, эффект работает на CSS3.
Рассмотрим как это работает.
Для начала нам понадобиться картинка для фона. Я закачал на сайт вот эту:
И задал следующие стили для блока:
.f-block { background: url(/wp-content/uploads/2015/10/private-interior.jpg) no-repeat center center; width: 400px; height: 200px; background-size: 100% 100%; }
|
1 2 3 4 5 6 |
. background: url(/wp-content/uploads/2015/10/private-interior.jpg) no-repeat center center; width: 400px; height: 200px; background-size: 100% 100%; } |
f-block {Теперь нужно разобраться с анимацией. При наведении мышки мы будем немного увеличивать картинку, после смещения курсора с контейнера, нужно изобразить уменьшение картинки до её исходных размеров.
Т.к. картинка — это фон контейнера, то она не выйдет за границы этого контейнера, а для манипуляций с масштабом воспользуемся атрибутом background-size.
Опишем анимацию для объекта без наведения:
.f-block { animation-delay: .25s; animation: anm1 0.7s ease forwards; } @keyframes anm1 { from { background-size: 115% 115%; } to { background-size: 100% 100%; } }
|
1 2 3 4 5 6 7 8 9 10 11 12 |
. animation-delay: .25s; animation: anm1 0.7s ease forwards; } @keyframes anm1 { from { background-size: 115% 115%; } to { background-size: 100% 100%; } } |
f-block {Т.е. мы задаём две точки анимации @keyframes и её скорость (700 мс).
При наведении анимация будет обратная:
.f-block:hover { animation: anm2 0.7s ease forwards; } @keyframes anm2 { to { background-size: 115% 115%; } }
|
1 2 3 4 5 6 7 8 |
.f-block:hover { animation: anm2 0.7s ease forwards; } @keyframes anm2 { to { background-size: 115% 115%; } } |
Нам достаточно описать только одну точку (конечную фазу to или 100%), т.
к. начальная точка уже описана.
В итоге получим вот такой контейнер (наведите на него курсор мыши):
Вот так совершенно без использования скриптов, удалось произвести симпатичный эффект. Тем не менее минусы здесь есть. Мы не можем, к примеру, определить завершилась ли анимация или ещё нет. При быстром движении мыши, мы увидим скачкообразные переходы одной фазы анимации в другую.
Вариант с увеличением до 200%
Добавил по просьбам трудящихся (в комментариях)…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes anm1 { from { background-size: 200% 200%; } to { background-size: 100% 100%; } } . animation: anm2 0.7s ease forwards; } @keyframes anm2 { to { background-size: 200% 200%; } } |
спец. эффекты
Написать комментарий
Данная запись опубликована в 21.10.2015 21:32 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.
Комментарии к «Zoom-эффект на CSS3»
Понравилась статья? Есть вопросы? — пишите в комментариях.
Масштабирование фонового изображения при наведении курсора в Divi с помощью 2 строк CSS
Тонкий эффект масштабирования фонового изображения при наведении курсора на элемент на веб-странице — это классный и современный эффект, который можно добавить на ваш веб-сайт.
Это также очень легко сделать в Divi всего двумя строками CSS.
Я видел другие руководства по этому вопросу, которые требуют копирования URL-адреса фонового изображения из медиа-менеджера и использования псевдоэлементов до и после. Проблема с этим методом заключается в том, что если вам (или вашему клиенту) неудобно добавлять кучу CSS, становится сложно изменить фоновое изображение.
Учебное пособие, которым я собираюсь поделиться с вами, чрезвычайно простое, быстрое и позволяет вам использовать опцию фонового изображения в Divi . Вам просто нужно добавить 3 строки CSS в переключатель Custom CSS на вкладке Advanced .
Если вы предпочитаете читать учебник о том, как это сделать, не стесняйтесь прыгать ниже видео.
Шаг 1: Добавьте фоновое изображение
Первый шаг — добавить фоновое изображение в раздел, строку или столбец, как обычно, используя встроенную опцию фона, доступную в каждом модуле.
Если вы когда-нибудь захотите изменить фоновое изображение в будущем, вы просто измените его, как обычно.
Шаг 2. Добавьте CSS
Затем перейдите на вкладку Advanced в окне редактора и откройте переключатель Custom CSS
Здесь мы собираемся добавить нашу магию CSS.
В поле «Основной элемент» включите параметры наведения , щелкнув значок курсора мыши.
На вкладке Desktop добавьте следующий CSS:
размер фона: 100%; переход: все 0,5 с легкости;
Мы хотим убедиться, что мы явно установили размер фона на 100% . Не стесняйтесь настраивать время перехода в зависимости от того, насколько быстрым должен быть эффект масштабирования.
В приведенном выше примере я установил значение 0,5 с , что составляет полсекунды.
После этого нам просто нужно указать, что должно происходить при наведении. Нажмите на вкладку
background-size: 130%;
Это, вероятно, говорит само за себя, но когда мы добавляем этот код на вкладку Hover, он сообщает Divi , что фоновое изображение должно увеличиться до размера 130% .