Scrollmagic: hauska web-suunnittelu

Verkkosuunnittelussa trendi on kuin tyyli, joka on hyväksytty sivustojen toteuttamiseen ja jonka käyttäjät ovat voimakkaasti hyväksyneet, yleensä väliaikaisesti. Osa ansioluetteloista ja pitkistä osista, joissa on paljon vieritystä, on osa vuoden 2016 suuntauksia ja ilmeisesti jatkaa äänenmuodostusta vuonna 2017.

Ei ole salaisuus, että tämä tyyli on melko houkutteleva ja hauska käyttäjälle, animaatioilla voimme tehdä sivustossa navigoinnin intuitiiviseksi ja viihdyttäväksi niin kauan kuin niitä käytetään hyvin. Tästä syystä olemme luoneet opetusohjelman animoitujen vieritysten lisäämiseksi verkkosivustollesi käyttämällä jQuery ScrollMagic -laajennusta.

ScrollMagic: Hauska web-suunnittelu

ScrollMagic on kirjasto, joka on tehty javascriptinä vuorovaikutuksen aikaansaamiseksi verkkosivuja siirrettäessä. Se on edeltäjänsä Superscrollorama täydellinen uudelleenkirjoitus ja sen arkkitehtuuri perustuu laajennuksiin, jotka tarjoavat helpon räätälöinnin ja laajennettavuuden.

On ihanteellista, jos haluamme toteuttaa joitain seuraavista asioista:

• Animaatio sivuston sijainnin tai siirtymän perusteella. Käynnistä animaatio tai synkronoi se vierityksen liikkeen kanssa. Lisää parallaksitehoste ilman paljon vaivaa. Luo sivu, jolla on ääretön vieritys, käsittelemällä sisällön lataamista ajaxilla.

ScrollMagic-ominaisuudet

• Optimoitu suorituskyky, se on kevyt, joustava ja mahdollistaa laajennettavuuden. Tapahtumien hallinta ja olio- ohjelmointi. Se tukee adaptiivista web- suunnittelua. Se tukee molempiin suuntiin (vaaka- ja pystysuunnassa) tapahtuvia liikkeitä. Se tukee konttien sisäisiä liikkeitä (div), jopa useita yhdellä sivulla.Se toimii täydellisesti selaimissa: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. GitHub- arkistossaan on yksityiskohtainen dokumentaatio ja monia sovellusesimerkkejä.

Hanki ScrollMagic

Sitä on saatavana useilla tavoilla.

1: GitHub

git klooni git: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower install scrollmagic

3: solmupaketin hallinta

npm asenna vierityskuva

4: CDN

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

Voit myös lukea kuinka muokata sähköpostin suunnittelua Outlookissa

Asennus ja käyttö

Asennus on melko yksinkertaista, ytiedosto sisällytetään vain html-tiedostoihin, joissa haluamme käyttää sitä.

;

Käyttöön plugin tarjoaa ohjaimeen suuntautuneen suunnittelumallin, johon yksi tai useampi kohtaus lisätään. Näitä kohtauksia käytetään määrittelemään, mitä kontteissa tapahtuu, kun ne siirtyvät tiettyyn pisteeseen.

Tämä olisi perus esimerkki:

// init-ohjain var-ohjain = uusi ScrollMagic.Controller (); // luo kohtaus uusi ScrollMagic.Scene ({kesto: 100, // kohtauksen tulisi kestää 100 pikselin siirtoetäisyydellä: 50 // aloita kohtaus sen jälkeen kun vieritetään 50 pikseliä}).setPin ("# my-sticky- elementti)) // kiinnittää elementin kohtauksen keston ajan.addTo (ohjain); // määritä kohtaus ohjaimelle

Edistyneempi esimerkki olisi saavuttaa useita poikkeamia, sen lähdekoodi olisi:

$ (function () {// odota asiakirjan valmiita // init-ohjaimen var-ohjain = uusi ScrollMagic.Controller (); // rakenna tween var tween = TweenMax.to ("# animoi", 0, 5, {asteikko: 3, helppous: Linear.easeNone}); // rakenna kohtaus var kohtaus = uusi ScrollMagic.Scene ({triggerElement: "#multiDirect", kesto: 400, offset: 250}).setTween (tween).setPin ("# animoi"). addIndicators ({nimi: "koon koko"}) // lisää indikaattoreita (vaatii laajennuksen).addTo (ohjain); // init-ohjain vaakasuora var ohjain_h = uusi ScrollMagic.Controller ({pystysuora: väärä}); // rakenna vaakasuuntaisen varren välille tween_h = TweenMax.to ("# animoi", 0, 5, {kierto: 360, helppous: Linear.easeNone}); // rakenna kohtaus var scene_h = uusi ScrollMagic.Scene ({kesto: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({nimi: "rotate"}) // lisää indikaattorit (vaatii plugin).addTo (controller_h);});

Löydät monia muita esimerkkejä heidän lähdekoodistaan ​​laajennuksen dokumentaatiosta.

Suosittelemme, että teet Windows 10: n puhtaan asennuksen USB-tikulla