Vi dekker det grunnleggende parallax effekt i denne artikkelen, men hvis du ønsker detaljert informasjon om oppretting av digitale effekter så er det en god idé å melde deg på en animasjon klasse serien. Den parallax effekten er en illusjon som skapes når betrakteren beveger seg og objektene blir så kan synes å bevege seg langsommere i det fjerne mens objekter som er nærmere betrakteren ser ut til å bevege seg mye raskere. Et praktisk eksempel kan være når man rir i en bil ser ut av vinduet på en motorvei, og så du merker objektene nærmeste du liker et gjerde i bevegelse ved raskt mens hester i et felt beveger seg langsommere og gjenstander utover dem som en bakke vant ' t synes å bevege seg i det hele tatt. Det er en forskjell i orientering av objektene du ser. Webdesignere har begynt å bruke denne effekten på ulike nettsteder, og det er en interessant grafisk illusjon som legger et punkt av interesse på nettstedet ditt når du endrer størrelsen på nettleservinduet. For å lage 3D bakgrunn med en parallax effekt på nettstedet ditt må du bruke Photoshop og CSS koder.
Velg et tema. Plukk temaet og bilder du ønsker å opprette en parallax effekt med. Du trenger minst tre lag med bilder for å lage 3D bakgrunn design med en parallax effekt. Du kan lage bakgrunnsbilde med snøflak i forskjellige former og størrelser.
Forbered bildene og lag i Photoshop. Når du har ditt tema og bilder klar, åpne Photoshop-programmet og laste inn bilder i forskjellige lag. I dette eksempelet har vi en vinter tema med snøflak som vil bidra til å skape parallax effekten. Du bør ha 3 bilder og alle vil være i sine respektive lag. Det første laget skal inneholde bakgrunnsbildet. Dette er den lengst bildet fra visningen slik du vil ha den minste snøflak på toppen av en blå bakgrunnsfarge. Det andre laget skal inneholde midten bakken bildet, vil disse være litt større snøflak. Da den tredje og siste lag vil inneholde forgrunnsbildet eller det største bilde.
Lagre lagene i riktig format. Vi vil spare hvert bilde i PNG 24 format. Så når du er ferdig tweaking bildene og fornøyd med resultatet, kan du lagre hvert bilde i PNG 24 format. Først lagre bakgrunnsbildet, men før du lagrer, slå av synlig knapp på forgrunnen og midground lag på lagpaletten. Så den eneste synlige bildet vil være på blå bunn med små snøfnugg på toppen av det. Gå til Lagre for web og enheter og velg Lagre, sørg for at det er i PNG 24-format og name it background.png. Deretter velger du midground bildelaget og gjøre den synlig ved å klikke på synlighet boksen ved siden av den. Siden vi trenger å gjøre dette til et gjennomsiktig lag trenger vi å slå av bakgrunnsbildet synlighet knappen og bakgrunnsfarge. Så den eneste synlige bildet er de mellomstore snøflak uten bakgrunn. Lagre midground laget på samme måte som du lagret bakgrunnslaget. Name it midground.png. Sist vil vi spare forgrunnen lag, slå på forgrunnen synlighet for lag-knappen og slå av midground synlighet knappen. Så den eneste bildet synlig er forgrunnsbildet eller den største snøfnugg bilde uten bakgrunn. Følg samme lagringsprosessen og gi den navnet foreground.png.
Opprett HTML og CSS koder. Gå til din index.html fil og lage div for forgrunnen og midground bilder. Div elementene vil gå mellom kroppskommandoer slik det vil se slik ut:
< body >
< div id = "midground" > < /div >
< div id = "forgrunn" > < /div >
< /body >
gå til din style.css filen og legg i følgende kode i body-kodene:
kroppen product: {
bakgrunn: url (images /background.png) gjenta 5% 5%;
}
#midground {
bakgrunn: url (images /midground.png) gjenta 30 % 80%;
position: absolute;
top: 0; venstre: 0; høyre: 0; bottom: 0;
z-index: 997;
}
#foreground {
bakgrunn: url (images /foreground.png) gjenta 105% 120%,
position: absolute;
top: 0; venstre: 0; høyre: 0; bottom: 0;
z-index: 998;
}
CSS-kode vil style den midground og forgrunn bilder med absolutt posisjonering og gjenta prosenter. Gjentatte prosenter vil kontrollere horisontal og vertikal bevegelse hastigheten på hvert bilde. Du vil merke våre forgrunnen prosenter er høyere enn 100%; Dette betyr at det vil bevege seg med en hastighet raskere enn nettleservinduet rate når det er endret. Nå kan du teste ditt tema i nettleseren din.
Andre gode design teknikker kan læres i en online klasse i dataassistert design.
Hurtigtips:
Effekten kan ikke være synlig i eldre nettlesere.
Juster z-index med en høyere verdi og har det helt posisjonert hvis innhold vil gå på toppen av bildet, ellers innholdet vil bli dekket opp.
Nyttige linker:
Portable Network Graphics