Pagrindinis » Įrankių rinkinys » Kaip priartinti vaizdus, ​​pvz., Vidutinį

    Kaip priartinti vaizdus, ​​pvz., Vidutinį

    Dienoraščių platforma „Medium“ naudoja a pasirinktinio vaizdo priartinimo efektas jų tinklaraščių puslapiuose. Kai vartotojas spustelės vaizdą, jis automatiškai priartės prie didesnio dydžio.

    Tai puikus efektas ir neabejotinai unikalus „Medium“, tačiau niekada nebuvo lengva nukopijuoti.

    Dabar, su MediumLightbox scenarijus, tai lengviau nei bet kada. Šis JS scenarijus yra lengvas ir lengvai įterpiamas į bet kurią svetainę ar tinklaraštį.

    Jei norite pamatyti, kaip tai veikia, galite apsilankyti tiesioginis demonstracinis puslapis rengia kūrėjas Davide Calignano.

    Kartą jis praleido tikslią perėjimo ir individualaus animacijos efektą sukurkite vidutinio vaizdo priartinimo veidrodžio vaizdą. Visa biblioteka yra parašyta gryname „JavaScript“, todėl jis nesiremia jokiu 3rd partijos scenarijai, pvz., jQuery.

    Jums reikės žinoti šiek tiek JS, kad jį sukurtumėte, bet jums tikrai nereikia būti ekspertu.

    Kiekvienas vaizdas gali užimti duomenų * atributai nustatant viso dydžio aukštį ir plotį, kurie visi yra dinamiškai iš „Lightbox“ papildinio. Sąrankos kodas yra labai paprastas ir gali nukreipkite vaizdus patys, arba konteineriai, kaip

    elementas.

    Štai vienas kodo fragmentas, kurio reikia norint gauti papildinį:

     „MediumLightbox“ („figūra“); 

    Funkcijos viduje jūs perduoti selektorių visiems elementams (pvz.,.

    ) su .priartinimo efektas klasė. Ši klasė yra konkrečiai apibrėžta „MediumLightbox“ stiliaus lape, todėl tai geriausia naudoti ir jūsų puslapyje.

    Ir, kai tai bus sukurta, jūs visi esate!

    Puslapio turinio srityje galite apvynioti visus vaizdus į a

    naudodami šią klasę. Jie automatiškai gaus šį mylimą Vidutinio paspaudimo priartinimo efektą ir staliniams, ir mobiliesiems vartotojams.

    Jei norite atsisiųsti šio scenarijaus kopiją ir pradėti, tiesiog apsilankykite pagrindiniame „GitHub“ repo. Čia taip pat rasite dokumentai kartu su kodo fragmentais galite kopijuoti, kad galėtumėte greitai nustatyti.