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.

Last ned gratis utskrivbare wireframing maler på Sneakpeekit

Tradisjonell wireframing er flott for å lage ideer og få dem raskt fra hodet til papir. Du kan alltid wireframe på datapapir, men noen ganger vil du ha litt mer struktur .Det er der Sneakpeekit kan hjelpe. Denne gratis ressursen som er opprettet av Pasquale Vitiello, tilbyr syv tilpassede utskrivbare wireframe-ark fra tradisjonelle dotgrids til mer spesifikke layouter for stasjonære og mobile enheter.Du

(Tekniske og design tips)

5 Nyttige Smartphone Gadgets Under $ 20

Mens smarttelefonen er en svært nyttig enhet i seg selv, er det noen gadgets og tilbehør som kan gjøre smarttelefonen enda smartere.For denne artikkelen har jeg listet ned fem smarttelefongrensesnitt som kan være potensielt nyttige for deg, avhengig av hvordan du bruker dem. Og siden noen gadgets kan være potensielt dyre, har jeg satt et budsjettloft på USD20 når det gjelder disse gadgets, noe som betyr at du ikke trenger å bryte banken for å skaffe dem.Trilobi

(Tekniske og design tips)