Добавьте эффект увеличения на свою веб-страницу с помощью jfMagnify

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

Что если бы ты мог добавить эффект увеличения к каждой части вашей веб-страницы? Благодаря jfMagnify, вы можете.

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

Обратите внимание, что этот плагин может быть немного тяжелым, потому что он опирается на две зависимости: обычный JQuery а также JQuery UI. Они оба необходимы для правильной работы jfMagnify. Не говоря уже о актуальный скрипт jfMagnify вам нужно будет включить на своей странице.

Установка немного сложнее, потому что вы можете использовать только увеличенные элементы в контейнере. Если вы хотите настроить таргетинг на всю страницу, вам нужно включить класс на весь ваш сайт.

Вот как одна строка jQuery будет выглядеть так:

 $ ( "Возвеличивать") jfMagnify (). 

Это цели все элементы внутри .увеличивать контейнер который обычно ДИВ элемент.

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

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

Вы можете найти все правила стиля по умолчанию в репозитории GitHub, но может быть сложно настроить, если ваш макет уже создан и работает. Преимущества jfMagnify, на мой взгляд, стоят усилий. На самом деле, это зависит от ваших потребностей и от того, нравится ли вам интерфейс.

Посмотрите документы на GitHub, чтобы узнать, что вы думаете. И вы также можете Предварительный просмотр интерфейса на CodePen, если вы хотите увидеть библиотеку в действии перед ее установкой.