Kuinka luoda kerrostettu parallax vaikutus sivustoosi

Sep 14, 2025
Miten tehdään
layered parallax effect
(Kuva luotto: www.beargrylls.com)

Parallax-liike, käsite liikkuvien kerrosten eri nopeuksilla on käytetty vuosittain animaatiossa. Bear Gyllsin virallinen verkkosivusto (yksi suosikkiamme Parallax Scrolling Sites ), se vaikuttaa uusiin ja mielenkiintoisiin suuntiin. Taustan vuoret skaalavat alas paikalleen, samalla kun ne ovat täysin läpinäkymättömiä ja sivun taustalla, tekstin "seikkailu" nousee paikalleen vuorien takana, kun se haalistuu.

Lisää inspiroivia liikevaikutuksia, tarkista opas parhaiten CSS-animaatiot ja miten ne koodaavat .

Bear Grylls Site Design on Yhdistyneen kuningaskunnan luovan markkinointitoimiston työ Etuvartio Ja tavoite yleisellä alueella on 16-55-vuotias ja yli 7 miljoonaa seuraajaa maailmanlaajuisesti, heillä oli vakava tehtävä kädet.

"Verkkosivuston pääpiirre oli kotisivu; halusimme kävijöitä kirjaimellisesti hypätä näytölle ja liity karhun seikkailuihin", selitä perustaja Chris Wilcock ja Creative Dan Dan Williams. "Tämän saavuttamiseksi käytämme joitain fiksuja siirtymiä, yhdistettynä muokattuihin videoihin, dramaattisiin kuviin ja koko kielelle sivustolla."

Katso sivuston toiminnassa www.beargrylls.com . Tässä artikkelissa selitämme, kuinka luoda vaikutus omiin sivustoihin. Alkaa Opetustiedostojen lataaminen .

01. Luo skaalausvaikutus

Rakenne, jonka avulla kaikki animoitava sisältö on suhteellisen yksinkertainen. Kääreellä on kaikki ja piilottaa ylivuotopitoisuuden. Sitten on olennaisesti kolme kerrosta div-tunnisteita ylhäällä. 

 & lt; div luokka = "kääre" & gt;
& lt; div luokka = "POS-teksti" & gt; & lt; / div & gt;
& lt; div luokka = "POS Mountain1" & gt; & lt; / div & gt;
& lt; div luokka = "POS Mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Käynnistä CSS

Suunnittelun tekemiseksi taustagradientti kuva lisätään kehoon ja asetetaan näytön koko. Kääreellä on kaikki kerrokset ja sisällön ylivuoto on piilotettu siten, että skaalausvaikutuksia voidaan soveltaa. 

 Body {
Marginaali: 0;
Pehmuste: 0;
Korkeus: 100%;
Taustaa: URL (IMG / BG.JPG)
Center Center;
Tausta-koko: kansi;
}
.wrapper {
Leveys: 100vW;
Korkeus: 100vh;
Asento: Suhteellinen;
ylivuoto piilotettu;
}

03. Aseta jokainen kerros

Seuraava koodi varmistaa, että kukin kerros on sijoitettu ehdottomasti, yksi toisen yli kääreen sisällä. Tämän koko täyttää näkymän leveyden ja korkeuden, jotta kuvat täyttävät näytön. 

 .POS {
Asema: Absoluuttinen;
Top: 0;
Vasen: 0;
Leveys: 100vW;
Korkeus: 100vh;
}

04. Lisää teksti

Tekstin luokka todella lisää vain oikean kuvan ja asettaa aloitusaseman ennen animointia paikalleen käyttämällä liiku ylös Avainkehykset, jotka lisätään lopulliseen vaiheeseen. 

 .Text {
Taustaa: URL (IMG / Text.png)
Center Center;
Tausta-koko: kansi;
Muunna: Käännä3d (0, 30px, 0);
Opasiteetti: 0;
Animaatio: Siirrä 1.8S helppokäyttöisyys;
Animaatio-täyttötila: eteenpäin;
}

05. Animoi ensimmäinen vuori

Ensimmäinen vuori on kaukana näytöstä, ja tämä saa pienen skaalauksen, joka on animoitu. Kaikkien kerrosten läpinäkyvyys on myös alhainen niin, että ne näkyvät paikallaan. 

 .Mountain1 {
Taustaa: URL (IMG / Mountain1.png)
Center Center;
Tausta-koko: kansi;
Muunnos: Scale3D (1.1, 1.1, 1.1);
opasiteetti: 0,2;
Animaatio: Scaler 1S Helppo-ulos;
Animaatio-täyttötila: eteenpäin;
}

06. Animoida etualalla vuori

Etualan vuoren on lähes identtinen toiselle vuorille - se vain paljon enemmän asteikolla. Molemmat vuoret jakavat scaler-avainkehykset animaatiolle. 

 .Mountain2 {
Taustaa: URL (IMG / Mountain2.png)
Center Center;
Tausta-koko: kansi;
Muunna: Scale3D (1.3, 1.3, 1.3);
Opasiteetti: 0,1;
Animaatio: Scaler 1.2s Helppo-ulos;
Animaatio-täyttötila: eteenpäin;
}

07. Lisää KeyFrame Animaatio

Avainkehitteet luodaan nyt, mikä määrittää sen. Liikkeen lopputilassa tämä lopputila pidetään paikallaan. Teksti siirretään ylös, ja vuoret skaalataan alas, sopivat suunnitteluun. 

 @Keyframes Siirrä {
100% {
Muuntaminen: Käännä3d (0, 0, 0);
Opasiteetti: 1;
}
}

@keyframes scaler {
100% {
Muunnos: Scale3D (1, 1, 1);
Opasiteetti: 1;
}
}

generate CSS

Poimia lippu luodaan CSS nyt suurelle alennukselle (Kuva luotto: tulevaisuus)

Tämä artikkeli julkaistiin alun perin asiassa 289 Nettisivujen suunnittelija - Myynti nyt . Tilaa täältä .

Lue lisää:

  • Kuinka lisätä Animaatio SVG: lle CSS: llä
  • Dos ja Don'ts ihastuttaville web-animaatioille
  • Miten suunnitella CSS-muotoja: Johdanto

Miten tehdään - Suosituimmat artikkelit

Mikä on kulmikas 8?

Miten tehdään Sep 14, 2025

(Kuva luotto: tulevaisuus) Kulma 8 on uusin versio Googlen kulma - yksi Parhaat JavaScript-kehykset no..

Kuinka piirtää merkki kynä ja muste

Miten tehdään Sep 14, 2025

Taiteilijana pelin studiossa olen unohtanut perinteisimmät välineet, mutta muste kutsuu aina takaisin minulle. Päivän jälkee..

Miten prototyyppi mobiilisovellus origami studiolla

Miten tehdään Sep 14, 2025

Maailmassa, jossa käyttäjillä on suuria odotuksia kokemuksistaan ​​verkosta ja mobiililaitteesta, prototyyppistä ja käyttäjän arvioinnista on avainasemassa. Nyt on tavallista astei..

Malli ulkomaalainen merirosvo olento Zbrushissa

Miten tehdään Sep 14, 2025

Auttaa sinua oppimaan luomaan 3D-ulkomaalainen merirosvo luonne, näytän sinulle, kuinka veuletin olennukseni kasvot, Worgrock (..

Kuinka luoda sarjakuvahahmot elokuvassa 4D

Miten tehdään Sep 14, 2025

MOBILE-pelien ja Indien kanssa Videopelit , on ollut suuria kuvittelijöitä ja animaattoreita 3D-taide ..

Ikä valokuva Photoshop CC

Miten tehdään Sep 14, 2025

Valokuvan ikääntyminen Photoshopissa on klassinen tekniikka, joka voi kääntää jopa ho-hum, täysi väri kuva jotain silmiin..

Opi suorittamaan suunnittelu ja sisältö Sprints

Miten tehdään Sep 14, 2025

Suunnittelu ja sisältö Sprints ovat avain koko tuotannon omistajien, suunnittelijoiden, tutkijoiden, sisällön strategisteiden..

Luo vuorovaikutteisia kaavioita Ionic 2

Miten tehdään Sep 14, 2025

Kun työskentelet pienessä tiimissä, se on vaikea kirjoittaa ja ylläpitää erillistä koodia Android, iOS ja Windows. Siellä..

Luokat