„Scrollmagic“: įdomus interneto dizainas

Žiniatinklio kūrimo srityje tendencija yra tokia pati, kaip svetainių realizavimui pritaikytas stilius, kuriam labai pritaria vartotojai, paprastai laikinais laikotarpiais. Dalis iki šiol vykusių tendencijų 2016 m. Ir, matyt, ir toliau kurs toną 2017 m., Yra animacijos ir ilgi skyriai, kuriuose daug slinkties.

Ne paslaptis, kad šis stilius vartotojui yra gana patrauklus ir įdomus, nes animacijas galime naršyti svetainėje intuityviai ir linksmai, jei tik jie gerai naudojami. Dėl šios priežasties mes sukūrėme mokymo programą, kuria norėdami įtraukti animuotus slinkius į savo svetainę, naudodami „jQuery ScrollMagic“ papildinį.

„ScrollMagic“: įdomus interneto dizainas

„ScrollMagic“ yra biblioteka, sukurta „ javascript“, kad būtų galima sąveikauti judant svetaines. Tai yra visas ankstesnio „ Superscrollorama“ perrašymas, o jo architektūra pagrįsta įskiepiais, kuriuos lengva pritaikyti ir išplėsti.

Idealu, jei norime įgyvendinti šiuos dalykus:

• Animacija, pagrįsta svetainės padėtimi ar poslinkiu. Suaktyvinkite animaciją arba sinchronizuokite ją su slinkties judesiu. Pridėkite paralakso efektą be didelių pastangų. Sukurkite puslapį su begaliniu slinkties būdu, tvarkydami turinį su ajax.

„ScrollMagic“ funkcijos

• Optimizuotas našumas, jis yra lengvas, lankstus ir suteikia galimybę jį išplėsti. Įvykių valdymas ir objektinis programavimas. Jis palaiko adaptyvųjį internetinį dizainą. Jis palaiko judėjimą abiem kryptimis (horizontaliai ir vertikaliai), palaiko judėjimą konteineriuose (div)., net keli viename puslapyje. Tai puikiai veikia naršyklėse: „Firefox 26+“, „Chrome 30+“, „Safari 5.1+“, „Opera 10+“, „IE 9+“. Savo „ GitHub“ saugykloje jis pateikia išsamią dokumentaciją ir daugybę programų pavyzdžių.

Gaukite „ScrollMagic“

Jį galima įsigyti įvairiais būdais.

1: „GitHub“

„git clone git“: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower įdiegti

3: mazgo paketo tvarkyklė

npm įdiegti

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Taip pat galite perskaityti Kaip tinkinti el. Pašto dizainą „Outlook“

Montavimas ir naudojimas

Įdiegimas yra gana paprastas, branduolio failą į HTML failus įtraukiame tik ten, kur norime jį naudoti.

;

Naudojimui papildinys pateikia į valdiklį orientuotą dizaino modelį, prie kurio pridedama viena ar kelios scenos. Šios scenos yra naudojamos apibrėžti, kas vyksta konteineriuose, kai jie juda į tam tikrą tašką.

Tai būtų pagrindinis pavyzdys:

// iniciatoriaus var variklis = naujas „ScrollMagic.Controller“ (); // sukurkite naują sceną „ScrollMagic.Scene“ ({trukmė: 100; // scena turėtų trukti 100 slenksčio poslinkio atstumu: 50 // šią sceną pradėkite slinkdami 50 pikselių}).setPin („# my-lipni- elementas)) // kaiščioja elementą scenos trukmei.addTo (valdiklis); // priskirkite sceną valdikliui

Sudėtingesnis pavyzdys būtų pasiekti kelis įskaitymus, jo išeities kodas būtų:

$ (function () {// laukti, kol dokumentas bus paruoštas // init valdiklio var valdiklis = naujas „ScrollMagic.Controller“); // kurti „tween var tween = TweenMax.to“ („# animuoti“, 0, 5, {mastelis: 3, lengvumas): Linear.easeNone}); // kurti scenos var sceną = nauja „ScrollMagic.Scene“ ({triggerElement: "#multiDirect", trukmė: 400, poslinkis: 250}).setTween (tween).setPin ("# animacinis"). „addIndicators“ ({vardas: "keičiamas dydis"}) // pridedami indikatoriai (reikalingas papildinys).addTo (valdiklis); // iniciatoriaus valdiklis horizontalus var controller_h = naujas ScrollMagic.Controller ({vertikalus: klaidingas}); // statyti tarp horizontalių var. tween_h = TweenMax.to („# animuoti“, 0, 5, {pasukimas: 360, lengvumas: Linear.easeNone}); // kurti scenos var scen_h = nauja „ScrollMagic.Scene“ ({trukmė: 700}).setTween (tween_h). „setPin“ („# animuoti“).addIndicators ({vardas: „pasukti“}) // pridėti indikatorius (reikalingas įskiepis).addTo (controller_h);});

Įskiepio dokumentacijoje galite rasti daug daugiau pavyzdžių su jų šaltinio kodu.

REKOMENDUOJAME JUMS Kaip švariai įdiegti „Windows 10“ naudojant USB atmintinę