Додати ефект збільшення на веб-сторінці за допомогою jfMagnify

Є багато безкоштовні масштабування плагінів що працює неймовірно добре. Однак більшість з них є побудований для зображень і вони визначають напрямки вміст лише для зображень.

Що робити, якщо можна додайте ефект збільшення до кожної частини веб-сторінки? Завдяки jfMagnify, ти можеш.

Це безкоштовний плагін jQuery що підтримує не тільки масштабування зображення, але й масштабування всієї сторінки. Це один з небагатьох плагінів, що також дозволяє вам вибрати рівень збільшення і підтримує сенсорні події для мобільних користувачів.

Зверніть увагу, цей плагін може відчувати себе трохи важким, тому що він спирається на дві залежності: регулярні jQuery і Інтерфейс jQuery. Обидва вони необхідні для правильної роботи jfMagnify. Не кажучи вже про фактичний сценарій jfMagnify потрібно буде включити на свою сторінку.

Налаштування трохи складніше, оскільки ви можете націлювати лише на збільшені елементи в контейнері. Якщо потрібно націлити всю сторінку, вам потрібно включити клас над усім веб-сайтом.

Ось як єдиний рядок jQuery виглядатиме так:

 $ (". magnify"). jfMagnify (); 

Це цілі всі елементи всередині .збільшити контейнер яка зазвичай є div елемент.

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

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

Ти можеш знайти всі правила стилю за умовчанням у програмі GitHub repo, але це може завадити налаштувати, якщо ваш макет вже побудований і запущений. Переваги jfMagnify, на мою думку, коштують зусиль. Дійсно, це залежить від ваших потреб і від того, чи подобається вам інтерфейс.

Перегляньте документи на GitHub, щоб дізнатися, що ви думаєте. І, ви також можете попередній перегляд інтерфейсу на CodePen, якщо ви хочете бачити бібліотеку в дії, перш ніж встановити її.