Een van die "warmste" tegnieke op die web vandag is parallaxrolle. Ons was almal op die webwerwe waar u die rolrol op u muis draai en die inhoud op die bladsy beweeg op en af of oor die bladsy terwyl u die muiswiel draai.
Vir diegene wat nuut is op webontwerp en grafiese ontwerp, kan hierdie tegniek besonder moeilik wees om te bereik as gevolg van die hoeveelheid CSS benodig.
As dit jou beskryf, is daar 'n aantal toepassings wat net op grafiese kunstenaars kan appelleer. Hulle gebruik basies 'n bekende bladsy uitleg benadering tot webblaaie, wat beteken dat daar nie veel, indien enige, kodering betrokke is nie. Een aansoek wat regtig in die vooruitsig gestel is, is Adobe Muse.
Die werk wat gedoen word deur grafiese voorstellings met behulp van Muse is nogal ongelooflik en jy kan 'n steekproef sien van wat jy kan doen deur die Muse- webwerf van die Dag te besoek . Alhoewel webprofessionele geneig is om Muse te beskou as 'n soort van "wind-up toy", word dit ook deur ontwerpers gebruik om mobiele en web prototipes te skep wat uiteindelik aan die ontwikkelaars op hul span oorhandig sal word.
Een tegniek wat baie maklik is om te bereik met Muse, is parallax-blaai. As jy die voltooide weergawe van die oefening wil sien, sal ons deurloop, wys jou blaaier na hierdie bladsy. Wanneer jy jou muis se wielrol rol, lyk die teks om op of af te beweeg en die beelde verander.
Laat ons begin.
01 van 07
Skep 'n webbladsy
Wanneer jy Muse begin, klik die New Site skakel. Dit sal die New Site Properties oopmaak. Hierdie projek sal ontwerp word vir 'n lessenaarprogram en jy kan dit kies in die keuselys Initiale uitleg . U kan ook die waardes stel vir die aantal kolomme, gootbreedte, marges en padding. In hierdie geval was ons nie baie bekommerd daaraan nie en het u net OK geklik.
02 van 07
Formateer die Bladsy
As u die eienskappe van die werf instel en OK gekliek het, is u na die planbeskouing geneem. Daar is 'n Tuisblad bo en 'n Meester Bladsy onderaan die venster. Ons het net een bladsy benodig. Om by Design View te kry, het ons dubbel gekliek op die tuisblad wat die koppelvlak oopgemaak het.
Aan die linkerkant is 'n paar basiese gereedskap en aan die regterkant is 'n verskeidenheid panele gebruik om die inhoud op die bladsy te manipuleer. Langs die bokant is die eienskappe wat op die bladsy toegepas kan word, of iets wat op die bladsy gekies is. In hierdie geval wou ons 'n swart agtergrond hê. Om dit te bereik, klik ons op die blaaiervulkleurskyfie en kies swart van die kleurkieser.
03 van 07
Voeg teks by die bladsy
Die volgende stap is om teks by die bladsy te voeg. Ons het die teks gereedskap gekies en 'n tekskassie uitgewerk. Ons het die woord "Welkom" ingevoer en in die eienskappe stel die teks op Arial, 120 pixels White. Sentrum Aligned.
Ons het dan na die keuringsinstrument oorgeskakel, op die tekskassie gekliek en sy Y-posisie tot 168 pixels van bo af gestel. Met die tekskassie wat nog gekies is, het ons die paneel Align oopgemaak en die tekskassie in die middel gerig.
Ten slotte, met die gekose teksbus, het ons die opsie / Alt en Skuif sleutels gehou en vier kopieë van die tekskassie gemaak. Ons het die teks en die Y-posisie van elke kopie verander na:
- Tot, 871
- Grafiek, 1621
- Sagteware, 2371
- @ About.com, 3181
U sal opmerk dat, soos u die ligging van elke tekskassie bepaal, die bladsy grootte verander om die ligging van die teks te akkommodeer.
04 van 07
Voeg Image Plekhouers by
Die volgende stap is om beelde tussen die teksblokke te plaas.
Die eerste stap is om die Gereedskap Gereedskap te kies en ons 'n boks wat van die een kant van die bladsy na die ander strek, te teken. Met die gekose reghoek stel ons die hoogte tot 250 pixels en die Y-posisie tot 425 pixels . Die plan is om hulle altyd te strek of te kontrak tot die breedte van die bladsy om 'n gebruiker se blaaieruitsig te akkommodeer. Om dit te bereik, het ons die 100% breedte- knoppie in die eienskappe gekliek. Wat dit wel doen, is grys uit die X-waarde en om te verseker dat die beeld altyd 100% van die breedte van die sigpoort in 'n blaaier is.
05 van 07
Voeg prente by Image Placeholders
Met die gekose Rectangle het ons die Vul-skakel gekliek - nie die Color Chip nie - en die Ink-ink ink geklik om 'n beeld in die reghoek te voeg. In die pasgemaakte gebied het ons Skaal om te pas en gekliek op die middelhandvatsel in die Posisie- omgewing om te verseker dat die beeld van die middel van die prent afgeskaal word.
Vervolgens het ons die opsie / Alt-Skuif-sleep tegniek gebruik om 'n kopie van die prent tussen die eerste twee teksblokke te skep, die Vulpaneel oopgemaak en die prent vir 'n ander ruil. Ons het dit ook gedoen vir die oorblywende twee beelde.
Met beelde in plek is dit tyd om die mosie by te voeg.
06 van 07
Voeg Parallax Scrolling by
Daar is 'n aantal maniere om parallax te blaai in Adobe Muse. Ons gaan jou 'n eenvoudige manier om dit te doen, wys.
Klik met die paneel Vul op, kliek op die blad Rol en wanneer dit oopmaak, klik die kassie .
U sal waardes vir Aanvanklike en Finale Beweging sien . Hierdie bepaal hoe vinnig die prentjie beweeg in verhouding tot die Scroll Wheel. Byvoorbeeld, 'n waarde van 1.5 sal die beeld 1.5 keer vinniger beweeg as die wiel. Ons het 'n waarde van 0 gebruik om die beelde in plek te sluit.
Die Horisontale en Vertikale pyle bepaal die rigting van die beweging. As die waardes 0 is, sal die beelde nie opbreek nie, ongeag watter pyltjie jy kliek.
Die middelwaarde- sleutel posisie - wys die punt waar die beelde begin beweeg. Die lyn bokant die beeld begin, vir hierdie prent, 325 pixels van die bokant van die bladsy. Wanneer die blaai die waarde bereik, begin die prentjie beweeg. U kan hierdie waarde verander deur óf dit in die dialoogkassie te verander of deur die punt bo-aan die lyn te skuif óf op of af.
Herhaal dit vir die ander beelde op die bladsy.
07 van 07
Blaaier toets
Op hierdie punt is ons klaar. Die eerste ding wat ons gedoen het om duidelike redes, was om Lêer> Stoor webwerf te kies. Vir blaaier toets, het ons eenvoudig Lêer> Voorbeeld Bladsy in Browser gekies . Dit het ons rekenaar se verstekwebleser oopgemaak en toe die bladsy oopgemaak het, het ons begin skuif.