Slik zoomer du på bilder som Medium

Blogging-plattformen bruker en tilpasset bildezoom-effekt på deres bloggsider. Når brukeren klikker et bilde, vil det automatisk zoome inn i en større størrelse.

Det er en flott effekt og absolutt unik for Medium, men det var aldri noe som lett kunne kopieres.

Nå, med MediumLightbox- skriptet, er det enklere enn noensinne. Dette JS-skriptet er lett og enkelt å legge til i noen nettsider eller blogger.

Hvis du vil se hvordan dette fungerer, kan du besøke live demo siden som er vert av skaperen Davide Calignano.

Han spenderte en stund på å nippe ned den nøyaktige overgangen og tilpassede animasjonseffekten for å skape et speilbilde av Mellans bildezoom . Hele biblioteket er skrevet i ren JavaScript, slik at den ikke stole på noen ^tredje partskript som jQuery.

Du må vite litt JS for å sette opp det, men du trenger ikke å være ekspert.

Hvert bilde kan ta data- * attributter for å sette høyde og bredde i full størrelse, som alle trekkes dynamisk fra lysboksen plugin. Oppsettkoden er veldig enkel, og den kan målrette mot bildene selv, eller beholdere som

element .

Her er den enkle kodebiten du trenger for å få pluginet kjørt:

 MediumLightbox ( 'figure.zoom-effekten'); 

Innenfor funksjonen vil du passere en velger for alle elementer (f.eks

) med .zoom-effect . Denne klassen er spesifikt definert i MediumLightbox-stilarket, så det er best å bruke dette på din side også.

Og når det er satt opp, er du klar!

I området for sidens innhold kan du pakke alle bilder inn i en

tagg med denne klassen. De vil automatisk få denne kjære, middels klikk-til-zoom-effekten for både stasjonære og mobile brukere .

Hvis du vil laste ned en kopi av dette skriptet og komme i gang, kan du bare gå til hovedgitHub-repo. Her finner du også dokumentasjon sammen med kodestykker du kan kopiere for å sette opp raskt.

20 beste Google Pixel 2 og Pixel 2 XL-tilfeller

Som de fleste andre smarttelefoner i dag, følger Google Pixel 2 også den samme trenden med slank og skjør kropp . Hvis du fikk deg selv den siste Pixel-telefonen, vil du nok se etter å få et beskyttende tilfelle for det.Enten du vil ha et klart tilfelle, minimal, solid, strikket eller til og med en tre, fikk jeg deg dekket. Ned

(Tekniske og design tips)

50 Geeky Valentinsdagskort du vil gjerne motta

Valentinsdag kommer snart (hvis du har glemt, dette er din påminnelse), så du sannsynligvis ser etter gaveideer og kort. I stedet for de osteiske, ferdigstilte, lovey-dovey V-dagskortene du sender som en forpliktelse, i stedet for fordi du vet din betydelige andre, vil faktisk ha det, har vi her en samling av 50 søte Valentinsdagskort.Sk

(Tekniske og design tips)