skabe parallax nedad websted med fremragende.,,,,,,, er en af de største tendenser i de moderne web - design, er anvendelse af parallax nedad virkninger.i denne lektion, jeg vil vise dig, hvordan man kan skabe den virkning på din egen hjemmeside, med en smule fantasi og lidt hjælp fra stjerne. js,.,,,,, indledningen, parallax nedad virkning har været populært siden lokaliteter såsom nike er bedre verden, der indføres på deres websteder for nogle år siden.hos parallax virkning med hensyn til grænsefladerne har eksisteret siden 1980, da det først blev brugt i videospil titler og efterfølgende i legene.for nylig begyndte at dukke op i web - grænseflader, - - du vil være bekendt med silverbackapp, der anvendes den virkning, som en del af hovedet.,, når det kombineres med nedad funktionaliteten af et websted, parallax nedad virkninger kan have en stærk visuel virkninger, især når de kombineres med en form for historie, som tager dig med på en rejse.,,, para... hvad?,,, parallax er en fordrivelse eller forskel i tydelig holdning til en genstand betragtes på to forskellige linjer af syne.- wikipedia,,, så hvad er parallax virkning?- det er sikkert en af de ting, som deres kunder, når de henviser til blindt at sige: "jeg vil have min hjemmeside html5".når kunderne spørger mig for en "html5" sted, må jeg bede dem nøje, hvordan tolker betydningen html5 - i øjeblikket ser det ud til at være nøgleordet, at kunderne bliver ved med at sige til mig, uden at forstå, hvad det betyder.,, så er det html5?sikker på, html5 har en rolle at spille i parallax nedad virkning, men det er mere end html5, der også anvendes en form for javascript, f.eks. jquery, og ville ikke være mulig uden en smule css3.,, den faktiske ord parallax er afledt af den græske παραλλαξη (parallaxis), som er ændret.genstande, som er tættere på øjet, har en større parallax end objekter, som er på afstand.det betyder, at genstande, som er tættere på os, kan synes at bevæge sig hurtigere end objekter i baggrunden.,, hvor flere baggrunde og genstande (f.eks. billeder) og giver dem mulighed for at bevæge sig i forskellige hastigheder, skaber en følelse af dybde og dimension.,,, parallax i aktion, og se på nogle eksempler som viser parallax virkninger.,,,,,,,,, hver hjemmeside fortæller en historie, de eksempler, der først og fremmest tage dig på en form for rejse og historie, og de gør det på en række forskellige måder.det er efter min mening, at det er parallax nedad på en succes.nøglen til at gøre det interessant og enestående er ved at fokusere på en god historie og koncept, så med virkning i kreative og opfindsomme måder.,, wieden + kennedy (w & k), de fyre bag nike bedre verden websted.,,, efter vores mening teknologier er uafhængige af begrebet.vores primære fokus er på at skabe en stor interaktive historier erfaring.- wieden + kennedy (w & k),,,,, hvordan vores websted vil arbejde, for at vise en vej af parallax nedad på din hjemmeside, jeg har valgt at vise dig et simpelt fire - websted, der anvender virkning på forskellige baggrunde og billeder.jeg har også tilføjet en sejlads i venstre hjørne, der vil rulle til et bestemt billede på stedet og også vil ændre størrelse for at afspejle den aktive billede nummer.jeg er også bruger nettet skrifttype bebas, selvom du er fri til at bruge noget andet, hvis du vil. og her er, hvordan vores folder struktur skal anføres:,,,,,,, plugins anvendes, stellar.js, hjælper mig med at opnå det bruger jeg stellar.js, en jquery stik af af mark dalgleish, som gør det let at skabe parallax nedad lokaliteter.der er andre plugins til rådighed for at hjælpe dem med at gøre dette, som jeg har anført på bunden af denne artikel.jeg har valgt at anvende stellar.js, som det er let at gennemføre, og selv om de ikke påvist under denne forelæsning, det kan optimeres til at arbejde på intelligent udstyr platforme som f.eks waypoints.js six.,,,, jeg skal også bruge jquery waypoints med caleb troughton.waypoints er en anden jquery stik af, som udfører en funktion, når du ved, at et element.dette gør det muligt for sejlads på webstedet for at fremhæve, der glider vi er i henhold til den holdning, den scrollbar.,, jquery lempelse,, jquery lempelse er et stik af fra gsgd, som tilbyder avancerede og muligheder.vi vil bruge det til at tilføje en sød og bevægelighed, når de skifter fra glide glide,.,,, html avance,, sparker vores. vi tilføjer html5 doctype og skabe hoved afsnit.den består af en css nulstille efterfulgt af vores stil blad "styles. css.vi vil tilføje jquery bibliotek, efterfulgt af vores skik jquery fil ", det er".dette følges op af de tre plugins, jquery. perfekt. min.js,'waypoints. min.js "og" jquery. lempelse. 1.3. js,.,, <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Create a parallax Website using Stellar.js</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/js.js"></script> <script type="text/javascript" src="js/jquery.stellar.min.js"></script> <script type="text/javascript" src="js/waypoints.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3. er "> < /manuskript > < /head >,, det næste element i vores html er billedet af envato logo, der forbliver i en konstant faste holdning i hele stedet.det tilføjer vi en klasse af envatologo «, således at vi kan fastsætte placeringen af det senere, når vi kode op css.,, < img klasse = "envatologo" src = "billeder /envatologo. men heller ikke dér er menneskene sikre" >,, billederne, de fire glider bruger samme avance.,, < div klasse = "glider" id = "slide1" data glide = "1" data fremragende baggrund ratio = "0" > < en klasse = "knap" data glide = "2" afsnit = "> < /a > og lt; /div > <!- ende - 1 - >,, vi bruger en klasse af objektglas, der vil blive anvendt som en generel stil for alle prøverne.hvert objektglas er givet et id "glider" efterfulgt af objektglas nummer, dvs. "slide1".vi bruger html5 data attribut og kalder det 'data glide.det vil give os mulighed for at målrette den ved hjælp af jquery.en anden data attribut af data fremragende baggrund ratio "tilføjes.det er bestemt til stellar.js jquery stik af og siger, stik af, hvad forholdet hastigheden af element skal rulle.,,, at forholdet er i forhold til den naturlige rullen hastighed, så en ratio på 0, 5 ville give det element til at rulle på halv hastighed, forholdet 1 vil ikke have nogen virkning, og forholdet mellem 2 ville medføre element til at rulle dobbelt så hurtigt,.,,, alle objektglas med undtagelse af objektglas fire har en knap, der vil gøre det muligt for os at rulle til den næste.man tilføjer "data til" attribut med værdien af den næste nummer.det er så knap, ved, hvad rutsche er næste, således at vi kan vedtage denne værdi til jquery.de fleste af dem har også en tid med en klasse af slideno « simpelthen en stor udgave af glide - nummer, der findes i nederste venstre hjørne af de fleste blodprøver.det kan også anvendes til titler.,, < over klasse = "slideno" > - 1 < /span >,, diapositiver tre og fire vi også tilføje nogle image elementer til "glide". disse billeder vil give et reelt indblik i parallax virkning, at vi skaber.vi afslutter det i et papir "div., der vil være centraliseret og er 960px stort, det er bare for at sikre, at det er okay, på tværs af alle desktopcomputere overvåge størrelser. hvert enkelt billede har en" data stellar forholdet attribut, der er knyttet til det.This again is stellar.js specific and tells the plugin at what ratio of speed we should scroll the element at., ,<div class="wrapper"> \t\t \t\t\t<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt=""> \t\t\t<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""> \t\t\t<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt=""> \t\t\t<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt=""> \t\t\t<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""> \t\t\t<img src="images/slide3 /psdtuts. men heller ikke dér er menneskene sikre "data stellar ratio =" 1 "data stellar vertikale udligne =" 200 "alat =" > < /div >,,, css, heldigvis for os er der ikke meget, der beskæftiger sig med ccs.det er faktisk på vej et par enkle elementer, men de fleste er det for positionering af nogle af de image elementer.,, den første ting, vi er nødt til at gøre med vores forskning er at bringe i bebas skrifttype ved hjælp af @ skrifttype ansigt.vi vil gerne tilføje, at det i at fastsætte skrifttype til stedet.- satte vi også bredde og højde af html og krop til 100%.dette vil gøre det muligt for vores glider til at vedtage den fulde bredde og højde af brugerens skærm.,, @ skrifttype ansigt (font familie: "bebasregular; src: url ('font /bebas___ - webfont. eot) src: url ('font /bebas___-webfont.eot?# iefix) format ('embedded-opentype), url ('font /bebas___ - webfont. woff) format ('woff), url ('font /bebas___ - webfont. ttf) format ('truetype), url ('font /bebas___ - webfont. perspektivgruppen&#bebasregular) format ('svg) font vægt: normal; skriftstørrelse: normal;}: organ {skrifttype familie: "bebasregular; bredde: 100%, højde: 100%}, navigation, de vigtigste navigation er givet en fast stilling, for at holde det på samme sted i hele området.vi udligne dette 20px fra top til lidt over det og sætte z-index til 1 for at sikre, at det er på toppen af lokaliteten.,, den rigtige liste er bare style i teksten med en grænse på bunden at handle som en understrege.det har en bredde på 53px.en overgang er også tilføjet, så det driver fra sin normale stat til den stat.jeg har brugt - webkit - præfiks her bare for at holde den kode, kort, men den fulde kildekode, som kan downloades ovenfor indeholder alle sælger præfikser.,, den stat, også benytter de samme egenskaber som klasse "aktive", bare en stigning i skriftstørrelse og bredde.de "aktive" klasse anvendes af jquery at stil den relevante skub, som i betragtning af browseren vindue.,,. navigation (holdning: faste, z-index: 1. top. 20px;}. navigation li (farve:񑘕 display: blok polstret: 0 10px; linje højde: 30px; margen nederst: 2px; skrifttype vægt: modig, - webkit overgang. 2s let i; grænse nederst: 1px fast sort tekst tilpasse: venstre; bredde: 53px;}. navigation li: svæv. aktive {skriftstørrelse: 25px; markør: point; bredde: 100px!vigtige;},, envato logo er givet nogle positions - styles, bare for at sikre, at det forbliver i skærmens centrum.på samme måde til navigation, det er givet en z-index '1' for at sikre, at det bliver på toppen.,,. envatologo {holdning: faste, top: 50% tilbage: 50%; bredde: 446px; margen top. - 41px; margen: - 223px; z-index: 1}, nu vi går over til klipning af den faktiske lysbilleder.vi giver dem en baggrund tillæg faste ejendom.baggrund tillæg ejendom fastsætter, om en baggrund image er faste eller ruller med resten af den side, så kommer i til gavn for baggrundsmotiverne (f.eks. til brug på objektglas fire).for eksempel har vi brugt en tapet af philipp seiffert, som kan downloades her.vi sætter den til at "relative".det er det, vi absolut kan holdning klasser "slideno" og "knap" mod glide imod selve enhedsdokumentet.,, rubrik skygge er kun til dekoration og tilføjer et pænt fald skygge til toppen indpresningsdybde for hvert objektglas.,,. glid {baggrund tillæg: fast; bredde: 100%. højde: 100%; holdning: relativ; rubrik skygge: indpresningsdybde 0px 10px 10px rgba (0,0,0,0.3)}. papir (bredde: 960px. højde: 200px; margen: 0 auto. position: relativ;}. slideno {holdning: absolutte og nederst: 0px; tilbage: 0px; skriftstørrelsen: 100px; font vægt: dristigt, farve: rgba (255255255,0.3)},,. knap er for knap på bunden af den side, der giver os mulighed for at nå frem til det næste.vi har placeret det i bunden i centrum af hvert objektglas og har brugt et billede af en pil som indikator.,,. knap (display: blok; bredde: 50px. højde: 50px. position: absolut; nederst: 0px; tilbage: 50%; baggrund farve:񑘕 baggrund billede: url (... /images /pil. men heller ikke dér er menneskene sikre; baggrund gentager: nr.:). knap: den {baggrund farve:񸵥 markør: pointer.}, style for hver enkelt objektglas er relativt enkle og følger samme mønster hver gang.- har en baggrund farve afc9900 ".- to også har en baggrund farve på den.- to indeholder også billeder, og vi kan målrette de ved hjælp af css vælgeren, n 'te barn (n).denne gearvælgeren kan beskrives som,,, denne pseudo - klasse tændstikker elementer, på grundlag af deres stilling inden for en forælder element er liste over barn elementer.,,, så vi er i bund og grund - hvert billede i den rækkefølge, de forekommer i vores oveni.vi er bare sætter dem i forhold til indpakning af rutsjebanen.,, ****************************** glide 1 ******************************* /&#slide1 {baggrund farve:c9900;} /****************************** glide 2 ******************************* /&#slide2 {baggrund farve:c99;}&#slide2 img: for det første barn (holdning: absolutte, top. 700px; tilbage: - 150px;}&#slide2 img: n - barn (2) (forslag: absolutte, top. 300px; tilbage: 100px;}&#slide2 img: n - barn (3) (forslag: absolutte, top. 600px; tilbage: 300px;}&#slide2 img: n - barn (4) (forslag: absolutte. top. 400px; tilbage: 300px;}&#slide2 img: n - barn (5) (forslag: absolutte, top. 600px; ret: 300px;}&#slide2 img: n - barn (6) (forslag: bestemtte, top. 600px; ret: 300px;}&#slide2 img: n - barn (7) (forslag: absolutte, top. 400px; ret: 100px;}&#slide2 img: n - barn (8) (forslag: absolutte, top. 100px; ret: 300px;}, glide tre følger samme jakkesæt til to.,, /****************************** glide 3 ******************************* /&#slide3 {baggrund farve:&#b6c10b;}&#slide3 img: for det første barn (holdning: absolutte, top. 700px; tilbage: 300px;}&#slide3 img: n - barn (2) (forslag: absolutte, top. 100px; tilbage: 100px;)&#slide3 img: n - barn (3) (forslag: absolutte, top. 150px; tilbage: 300px;}&#slide3 img: n - barn (4) (forslag: absolutte, top. 450px; tilbage: 300px;}&#slide3 img- n 'te barn (5) (forslag: absolutte, top. 200px; ret: 300px;}&#slide3 img: n - barn (6) (forslag: absolutte, top. 100px; ret: 300px;}, glide fire er lidt anderledes end de foregående to objektglas, da det ikke indeholder nogen image elementer, eller baggrund farve, men i stedet bruger en baggrund image.vi har også givet det css3 ejendom baggrund størrelse: dækning.denne grundlæggende danner baggrund billede til at dække hele browser vindue og vil resize som browser vindue resizes.vi har også tilføjet en tekstlinie på den sidste billede, som vi har i aften og givet en klasse "parallaxbg", /****************************** glide 4 ******************************* /&#slide4 {baggrund billede: url (.. /images /slide4 /desktop4 jpg); - webkit baggrund størrelse: dæk, - - baggrund størrelse: dækning - o-background-size: dække; baggrund størrelse: dækker}&#slide4. parallaxbg {holdning: absolutte og ret: 40px; top: 40px; skriftstørrelsen: 28px; farve: rgba (51,51,51,0.3)},,, jquery,, jquery virkelig er hvor det hele begyndte at komme til live.jeg har kommenteret den kode, så du kan se, hvad der sker.,, jquery (dokument). klar (funktion ($) (//initialise stellar.js $(vindue). stellar(); //cache nogle variabler var forbindelser = $(. navigation). ('li); - = $('. -'); knap = $("knap"); mywindow = $(vindue); htmlbody = $('html, lig '); //fælde waypoints stik af objektglas. waypoint (funktion (omstændigheder retning) (//cache variablen af data - attribut, der er forbundet med hver enkelt - dataslide = $(det). attr ('data-slide); //, hvis brugeren vises ændre navigation link, som har de samme data - attribut, som glid til aktive og /eller fjerne det aktive klassefra den foregående navigation link, hvis (retning, = = = '') ($(. navigation li [data glide = "+ dataslide +"] «). addclass ('active '). prev(). removeclass ('active)} //andre, hvis brugeren ruller ned ændre navigation link det er de samme data - attribut, som glid til aktive og /eller fjerne det aktive klasse fra næste navigation forbindelse andre {$(. navigation li [data glide = "+ dataslide +"] «). addclass ('active'). next(). removeclass ('active)}}); //waypoints ikke opdage det første billede, når brugeren bevæger sig op til toppen, så vi tilføje lidt kode, der fjerner den klasse //fra sejlads mellem - 2 og tilføjer det til navigation link til 1.mywindow. skriftrulle (funktion () (hvis (mywindow. scrolltop() = = 0) ($(. navigation li [data glide = "1"] «). addclass ('active) $(. navigation li [data glide = "2"] «). removeclass ('active ');}}); //skabe en funktion, der vil blive vedtaget et objektglas nummer, og så vil rulle til at glide med jquerys manipulerer.den jquery //og stik af anvendes også, så vi er gået i en metode til easeinoutquint ", som er tilgængelig gennem et stik af.funktion gotobyscroll (dataslide) (htmlbody. manipulerer ((scrolltop: $(. glid [data glide = "+ dataslide +"] «). offset(). top), 2000, easeinoutquint)} //, når brugeren klik på sejlads forbindelser, få fat i data - attribut værdi forbindelsen og videregive denne variabel til gotobyscroll funktion forbindelser. klik (funktion (e) (f. preventdefault(); dataslide = $(det). attr ('data-slide '); gotobyscroll (dataslide)}); //, når brugeren klik på den knap, så får de oplysninger, glide attributværdi knappen og give denne variabel til gotobyscroll funktion knap. klik (funktion (e) (f. preventdefault(); dataslide = $(det). attr ("data objektglas'); gotobyscroll (dataslide)})});,,, bare et par punkter,,, hvis du ser på objektglas to af vores eksempel, vil du se 3d bobler.jeg har tilføjet et lille gaussisk slør for nogle af disse, især i de meget forgrunds - og baggrundsviden.ved at kombinere disse med skarpere bobler øger følelsen af dybde, at parallax skaber.det er noget, som du måske burde overveje, når de forsøger at få god dybde til din hjemmeside.,, en masse af lokaliteter, der udnytter denne virkning synes at være ret image, tunge, sørg for at begrænse deres billeder, så meget som du kan (uden at det går ud over kvaliteten.hvis der efter komprimering, det er stadig et stykke tid at lade så overveje at tilføje en rampe til din hjemmeside.,,, konklusion, parallax, scroller, er en af de mest elskede virkningerne af den seneste tid, og folk konstant at presse grænserne med det.her i dag har jeg vist dig, hvordan at fælde en grundlæggende websted, hvor der anvendes parallax nedad.demo 'en, som jeg har vist i dag, er et relativt enkelt lokalitet i uddannelsesøjemed.for dem af jer, der er med til at skabe et sted ved hjælp af denne virkning, så opfordrer jeg dem til at bruge tid på begrebet og historie, da det er det, der gør dem enestående, shareable og også en fornøjelse at kigge.det er om, hvordan du kan udnytte denne virkning, klogt og ikke bare bruge det for at bruge det.,, jeg håber du har nydt at læse om parallax nedad, og jeg vil gerne se, hvordan du har brugt det i deres egne lokaliteter, er fri til at gå, forbindelser til dem under.indtil næste gang!,,, yderligere forbindelser læsning og ressourcer, bag kulisserne nike bedre verden.,, 21 eksempler på parallax nedad websteder.,, scrollorama en parallax stik af med nogle af de andre store træk.,, skabe et klæbende navigation header ved hjælp af jquery waypoints,,