Pagrindinis » Įrankių rinkinys » Sukurkite atsakingą ir gražią viso puslapio švieslentę su „BaguetteBox.js“

    Sukurkite atsakingą ir gražią viso puslapio švieslentę su „BaguetteBox.js“

    Yra dešimtys šviesolaidžių įskiepių ir jie visi puikiai dėl įvairių priežasčių. Kai kurie geriau dirba portfelio svetainėse, o kiti geriausiai tinka atsakingiems išdėstymams.

    Tačiau vienas iš mano mėgstamų naujų papildinių baguetteBox.js, sukūrė „JavaScript“ kūrėjas Marek Grzybek.

    Žinoma, šis įskiepis yra visiškai laisvas ir atviras šaltinis „GitHub“, jei norite įeiti į kodą rankiniu būdu.

    Biblioteka neturi jokių priklausomybių, todėl galite paleisti jį be „jQuery“, „Zepto“ ar nieko kito. Tai yra gryna „JavaScript“ biblioteka su tikrai paprasta sąranka.

    Tai skirta puikiai dirbti mobiliuosiuose įrenginiuose, todėl jis gali palaikyti swipes ir čiaupus, taip pat numatytąjį elgesį kompiuteriuose ir nešiojamuose kompiuteriuose. Tai viena iš nedaugelio viso ekrano galerijų palaikyti judriojo ryšio sąveiką, kartu su visišku modaliniu efektu.

    Patikrinkite demonstracinis puslapis matyti, kaip ji gyvena. Ji turi pilnai atrinktą galeriją kartu su viena eilutė kodo, reikalingo tam, kad ji veiktų:

     baguetteBox.run ('. baguetteBoxOne'); 

    Taigi tai nukreipia konteinerio elementą į klasę .BaguetteBoxOne ir visa galerija veikia.

    Tu galėtum nustatyti pasirinktines parinktis jei norite, kad antraštės, mygtukų stiliai, išankstinio įkrovimo funkcijos ir atgalinio ryšio režimai būtų naudojami tiesioginiams / keitimosi įvykiams. Visos šios parinktys yra gerai dokumentuota „GitHub“ jei norite nardyti.

    Bet tai tikrai nereikalauja daug, kad tai viršytų konteinerio elementą ir kai kuriuos pagrindinius vaizdo elementus.

    Tu turėti visišką kontrolę per animacijas, vaizdo dydžius, braukimo efektus ir galerijos turinį, pvz., antraštes / antraštes. Tai nereikalauja „JavaScript“, todėl ji neturi grynos CSS alternatyvos modalui. Tačiau, kadangi dauguma naršyklių palaiko „JavaScript“, tai neturėtų būti problema.

    Jei norite sužinoti daugiau, apsilankykite pagrindiniame „baguetteBox.js“ puslapyje ir taip pat galite pasidalinti savo mintimis su „Twitter @feimosi“ kūrėju.