Kako zumirati slike kao Medium
Platforma za bloganje Medium koristi a učinak prilagođenog zumiranja slike na svojim stranicama na blogu. Kad god korisnik klikne na sliku, automatski se povećava na veću veličinu.
To je veliki učinak i zasigurno jedinstven za Medium, ali nikada nije bio nešto što bi se moglo lako kopirati.
Sada, sa MediumLightbox skripta, lakše je nego ikad. Ovaj JS skript je lagan i jednostavan za dodavanje na bilo koju web-lokaciju ili blog.
Ako želite vidjeti kako to funkcionira, možete posjetiti demo stranicu uživo domaćin kreator Davide Calignano.
Proveo je neko vrijeme prikucavajući točan prijelaz i efekt prilagođene animacije stvorite zrcalni prikaz zumiranja slike tvrtke Medium. Cijela knjižnica je napisan u čistom JavaScriptu, tako da se ne oslanja na bilo koje 3rd party skripte kao što je jQuery.
Morat ćete znati malo JS-a da ga namjestite, ali sigurno ne morate biti stručnjak.
Svaka slika može potrajati podaci- * atributi za postavljanje visine i širine u punoj veličini, a sve su to izvukao dinamički iz dodatka lightbox. Kôd za postavljanje je vrlo jednostavan i može ciljajte slike same, ili spremnici poput
Ovo je jedinstveni isječak koda koji trebate za pokretanje dodatka:
MediumLightbox ( 'figure.zoom efektom');
Unutar funkcije, vi ćete proći selektor za sve elemente (npr. .zum-efekt klase. Ovaj razred je posebno definirane u stilskom slogu MediumLightbox, pa je najbolje i to koristiti na svojoj stranici.
I, kad se jednom postavi, spremni ste!
U području sadržaja stranice možete zamotati sve slike u
Da biste preuzeli kopiju ove skripte i započeli s radom, posjetite glavni GitHub repo. Ovdje ćete također pronaći dokumentaciju zajedno s isječcima koda možete kopirati da biste se brzo postavili.
