Scrollmagic: morsom webdesign

I webdesign er en trend som stilen som er tatt i bruk for realisering av nettstedene som er sterkt akseptert av brukere, vanligvis i midlertidige perioder. En del av trendene så langt i 2016 og tilsynelatende vil fortsette å sette tonen i 2017, er animasjonene og lange seksjonene med mye bla.

Det er ikke en hemmelighet at denne stilen er ganske attraktiv og morsom for brukeren, med animasjonene kan vi gjøre navigering på nettstedet intuitivt og underholdende så lenge de er godt brukt. Av denne grunn har vi laget en tutorial for å inkludere animerte ruller på nettstedet ditt ved hjelp av jQuery ScrollMagic- plugin.

ScrollMagic: Fun Web Design

ScrollMagic er et bibliotek laget i javascript for å oppnå interaksjoner når du flytter nettsteder. Det er en fullstendig omskriving av forgjengeren Superscrollorama og arkitekturen er basert på plugins som gir enkel tilpasning og utvidbarhet.

Det er ideelt hvis vi ønsker å implementere noen av følgende ting:

• Animasjon basert på plasseringen eller forskyvningen av nettstedet. Utløs animasjonen eller synkroniser den med bevegelsen av rullen. Legg til parallakseffekt uten mye anstrengelse. Lag en side med uendelig bla, håndtering av innholdsbelastning med ajax.

ScrollMagic-funksjoner

• Optimalisert ytelse, den er lett, fleksibel og tillater utvidbarhet. Eventstyring og objektorientert programmering. Den støtter adaptiv webdesign. Den har støtte for bevegelser i begge retninger (horisontal og vertikal). Den har støtte for bevegelser i containere (div), til og med flere på én side. Det fungerer perfekt for nettlesere: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. I sin GitHub- lagring har den detaljert dokumentasjon og mange applikasjonseksempler.

Få ScrollMagic

Det er tilgjengelig for å få det på forskjellige måter.

1: GitHub

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

2: Bower

bower install scrollmagic

3: node pakkesjef

npm installer scrollmagic

4: CDN

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

Du kan også lese Hvordan tilpasse designen til en e-post i Outlook

Installasjon og bruk

Installasjonen er ganske enkel, vi inkluderer bare kjernefilen i HTML-filene der vi vil bruke den.

;

For bruk gir plugin et kontrollorientert designmønster, som en eller flere scener er lagt til. Disse scenene brukes til å definere hva som skjer i beholderne når de flytter til et bestemt punkt.

Dette vil være et grunnleggende eksempel:

// init controller var controller = new ScrollMagic.Controller (); // opprette en ny scene ScrollMagic.Scene ({varighet: 100, // scenen skal vare i en rulleavstand på 100px forskyvning: 50 // start denne scenen etter å ha rulle 50px}).setPin ("# my-sticky- element ") // pinner elementet til scenens varighet. addTo (kontroller); // tilordne scenen til kontrolleren

Et mer avansert eksempel er å oppnå flere forskyvninger, og kildekoden ville være:

$ (funksjon () {// vent på dokumentet er klart // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {skala: 3, letthet: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", varighet: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // legg til indikatorer (krever plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animert", 0, 5, {rotasjon: 360, letthet: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({varighet: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // legg til indikatorer (krever plugin).addTo (controller_h);});

Du kan finne mange flere eksempler med kildekoden deres i plugin-dokumentasjonen.

VI ANBEFALER DEG Slik gjør du en ren installasjon av Windows 10 ved hjelp av en USB-pinne