Как да мащабирате изображения като средни
Платформата за блогове Medium използва a ефект на мащабиране на персонализирано изображение на страниците на блога си. Всеки път, когато потребителят кликне върху изображението, той автоматично ще се увеличи в по-голям размер.
Това е голям ефект и със сигурност уникален за Medium, но никога не е нещо, което лесно може да бъде копирано.
Сега, с MediumLightbox е по-лесно от всякога. Този скрипт на JS е лек и лесен за добавяне във всеки уебсайт или блог.
Ако искате да видите как работи това, можете да посетите демо страница на живо домакин на създателя Davide Calignano.
Той прекарва известно време, заковавайки точния преход и ефекта на персонализираната анимация създайте огледален образ на мащаба на изображението на Medium. Цялата библиотека е написан на чист JavaScript, така че не разчита на никой 3тата парти скриптове като jQuery.
Трябва да знаете малко JS, за да го настроите, но със сигурност не е нужно да сте експерт.
Всяко изображение може да отнеме данни- * атрибути за настройка на височината и ширината в пълен размер, всички от които са издърпва се динамично от приставката за лайтбокс. Кодът за настройка е много прост и може насочете самите изображения, или контейнери като
Ето единствения кодов фрагмент, от който се нуждаете, за да стартирате плъгина:
MediumLightbox ( "figure.zoom ефект");
Вътре в функцията, вие ще преминете селектора за всички елементи (напр. .мащабиране ефект клас. Този клас е конкретно дефинирани в таблицата със стилове на MediumLightbox, така че е най-добре да го използвате и на страницата си.
И след като веднъж го направите, сте готови!
В областта на съдържанието на страницата можете да обгръщате всички изображения в
За да изтеглите копие от този скрипт и да започнете, просто посетете основното GitHub repo. Тук също ще откриете документация заедно с кодови фрагменти можете да копирате, за да се настрои бързо.
