4 Modernin taustan temppuja kokeilla
Vaikuttaa siltä, että suunnittelun osana taustat elävät varjossa; Se ei kuitenkaan ole täysin totta. Aikoina, jolloin CSS alkoi tehdä ensimmäisiä askeleitaan kohti maailmanvalloitusta, taustalla oli jo otettu huomioon sivuston tärkein koristeellinen elementti.
Nykyään tilanne ei ole muuttunut voimakkaasti. Useimmissa tapauksissa se toimii ensisijaisena visuaalisena voimana, joka vaikuttaa merkittävästi yleiseen teemaan.
Perinteisesti valokuvat ja videot ovat ensimmäisiä valintoja taustaksi. Tosiasia on, että he ovat yksinkertaisesti ylikansallisia sankareita. Jokainen muu verkkosivusto tervehtii online-yleisöä joko kuvapohjaisella tai elokuvaperusteisella taustalla. Ja tämä tekee Webistä (ja käyttöliittymästäsi erityisesti) melko samanlaisia, mikä johtaa odotettuun käyttökokemukseen.
Yksi ulosmatka on löytää uusia ratkaisuja hyödyntämällä uusia tekniikoita ja pelaamalla CSS3: n, HTML5: n ja JavaScriptin avulla. Itse asiassa nähtäväksi on havaittavissa suuntaus. On olemassa ainakin neljä erilaista nykyaikaista dynaamista taustaa, jotka osallistuvat kilpailuun voittaakseen paikkansa auringossa näinä päivinä.
Katsotaanpa niitä:
Hiukkasten animaatio
Partikkananimaatio on yksi suosituimmista valinnoista juuri nyt. Paljon sivustoja on onnistuneesti hyväksynyt tämän tyylikäs kosmoksen innoittamana ratkaisu. Se toimii hyvin yhdessä tavallisen yksivärikankaan, kuvituksen, vektoripiirrosten ja jopa valokuvien kanssa.
Lisäksi animaatio vaihtelee. Se voi olla joukko kaaokseen liikkuvia pisteitä, jotka ovat hajallaan koko sivun ajan tähtitaivasta tai sateesta tai tähtikuvioidusta ratkaisusta, jossa voit yhdistää piirejä ohuilla viivoilla. Eikä siinä vielä kaikki; joskus se on yhdistetty hiiren osoittimien tapahtumien aiheuttamiin vaikutuksiin: tässä tapauksessa voit ohjata hiukkasia pois, muodostaa niistä pyörteitä, liittää ne kursoriin polulla jne.
Huub on esimerkki tyypillisistä hiukkasten animaatioista. Siinä on siisti liikkuva klusteri pisteistä, jotka sopivat täydellisesti tumman värin ja taakse sijoitetun kartan kanssa. Käytä hiiren osoittimella hiukan hauskaa.
Vihje: Jos haluat päästä käsiksi Huubin dynaamiseen otsikon taustaan, sinun kannattaa tutustua Dominic Kolben luomaan projektiin hiiren parallaksin demo . Se näyttää lähes samalta. Mutta jos tarvitset välitöntä ratkaisua, niin kutsuttu Vincent Garreauen JavaScript-kirjasto Particles.js on mitä etsit.
Hiukkasten aallot
Edellisessä esimerkissä vaikutus voidaan saavuttaa älykkäästi manipuloiduilla HTML5- ja CSS3-ohjelmilla sekä JavaScript-taikaisillaan, tämä on nerokas kokeilu Three.js-kirjaston kanssa. Kaarevat muodot ja sileät aaltoilevat liikkeet muistuttavat helposti yhden pienestä vuorovedestä. Se luo hengityskankaan tunteen. Voit käyttää hiiren osoittimen kiertää sitä eri suuntiin, tutkia sitä vaakasuoraan ja pystysuoraan.
StuurMen on yksinkertainen, hienostunut "tervetullut" -osio. Se on pieni, puhdas ja hieno. Sisältö tulee huomaamattomasti näkökentään, kun sykkivä tausta luo oikean mielialan projektille.
Vihje: Täältä löytyy alkuperäiskappale ThreeJS ja sen onnistunut mukauttaminen Deathfang demo kutsutaan kolme.js kangas - partikkelit - aallot .
Hiiren vuoro parallaksi
Kerroksellinen parallaksi on toinen kasvava suuntaus. Hiukkasten animaation rinnalla se voi muuttaa tylsää staattista taustaa koostumukseltaan hienovaraisella 3D-tunnelilla. Suuri asia on, että sinun ei tarvitse ojaa suosikkikuvasi valintasi, vaan käytä parallaksia kuumennettaessa sitä vähän.
Se on melko hyödyllinen, kun haluat piristää otsikkoa, logotyyppiä, surrealistista kohtausta tai kuvaa. Se sopii myös erilaisiin abstrakteihin animaatioihin. Käynnistetty tavallisella hiirellä tapahtuvalla tapahtumalla, se ei ainoastaan lisää toista ulottuvuutta vaan myös mahdollistaa käyttäjien pelata ympäristöä.
Henkilökohtainen portfolio Alexandre Rochet on erinomainen splash-sivu. Ei vain, että käyttäytyminen saa silmän, mutta myös hiiren hiiren parallaalinen tekee kirjaimet siirtymällä.
Vihje: Parallaaksen tuottamiseen on olemassa lukuisia kirjastoja ja elinkelpoisia koodinpätkiä. Yksi suosituimmista on Matthew Wagerfieldin luoma plugin Parallax.js . Jos kuitenkin haluat nähdä sen käytännössä, erityisesti typografiassa, voit tutkia Frontnerdin kynää, jossa on hänen 3d parallaksi hiirellä .
WebGL-kokeilut
WebGL-kokeilut ovat tietenkin muunnelma hienostuneille kovettuneille kehittäjille ja asiakkaille, joilla on runsas budjetti. Ne voivat olla loistavia, kunnioitusta herättäviä ja hieman pompona. Se on jokaisen pennin arvoinen. Kuitenkin silmässä on aina perho. Suurella voimalla on suuri vastuu, ja WebGL: n kanssa sinun ei tule koskaan unohtaa sen käyttämänsä resurssien määrää ja täydellistä selaimesi yhteensopivuutta.
Solarin on kyse unohtumattomasta ja mielenkiintoisesta käyttäjäkokemuksesta. Se on 3D WebGL -kokeilu, joka sisältää runsaasti jännittäviä ja innovatiivisia ominaisuuksia. Header-tausta on valtava futuristinen pallo, joka reagoi hiiren kohdistimeen ja luo valtavan vaikutelman.
Vihje: Kun jäljität, mitä MediaMonksin geniitit ovat tehneet, on mielikuvituksellisesti monimutkaista, verkossa voit aina löytää lähtökohdan, joka antaa sinulle ruokavaliota. Harkitse WebGL API , ja tämä codepen Yoichi Kobayashista, joka on luonut kutsutun projektin "Värikäs pallo" .
johtopäätös
Kuvien ja videoiden hyödyntäminen on aika-todistettu ja vähemmän tuskallinen tapa taittaa tausta, mutta on olemassa muita lupaavia ja kokeellisia vaihtoehtoja, jotka voivat saada halutun tuloksen. Pysyttäminen banaaneista on haastavaa ja jopa rahaa kuluttavaa, mutta nämä toimenpiteet ovat perusteltuja ja aika kohtuullisia.
Olipa kyse yksinkertaisesta, mutta tyylikkäästä hiukkasten animaatiosta tai huomattavasta WebGL-kokeesta, se injektoi uuden elämän käyttöliittymän ydinosioon, jolloin verkkosivustosi pää aloitetaan.