A modern web design háttérrel nagy (szó szerint, átvitt értelemben). Az advent a HD (most 4K) kijelzők, a tervezők létre háttérrel, hogy vegye fel rengeteg képernyő ingatlan. Miért? Mert hihetetlen vizuális hatást fejtenek ki, és segítenek elmesélni egy történetet.

de sokkal több van a háttérrel, mint egyszerűen egy fényképet vagy textúrát egy nagy helyre dobni. A kombináció a CSS, valamint az alkalmi kis JavaScript teljesítmény létrehozása néhány csodálatos speciális effektusok.

fedezzük fel azokat az egyedi módszereket, amelyekkel a tervezők háttereket spicingelnek. Mi is tartalmaz egy tollat minden technika, így láthatja, hogy pontosan hogyan működnek.

CSS Blend Mode Color Change

ami ezt a háttérhatást annyira hűvösvé teszi, hogy a tetején lévő rögzített elem úgy tűnik, hogy a felhasználó görgetésekor színt vált. A CSS mix-blend-mode tulajdonság használata lehetővé teszi a színárnyalat megváltoztatását, amely a háttér tartalmától függ.

görgetés animáció

emlékeztet side-scroll videojátékok a múlt, ez a technika funkciók két különálló képek-minden görgetés az ellenkező irányba. Ez történik a CSS segítségével transform és néhány JS.

ferde

ferde háttérrel az egyik legforróbb trendek web design. Ez egy olyan hatás, amelyet hihetetlenül könnyű volt megvalósítani a nyomtatási tervezésben, és fájdalom az interneten-eddig. Ez a tiszta HTML / CSS megoldás teszi a cinch.

mozgóképek

egy meglehetősen egyszerű CSS használatával ez a háttér lehetővé teszi a több kép közötti zökkenőmentes átmenetet. Ez teszi a sokkal könnyebb csúszka, mint a hagyományos JavaScript.

animált gradiens

ha nem gondosan történik meg, az animált háttér elvonhatja a tetején ülő tartalmakat. Ez az animált gradiens példa szép, mert finomabb hatás. A JavaScript használatával meghatározhatja a színátmenet színeit, hogy megfeleljen a palettának.

Blur a Scroll

Ez a technika nagyon hasznos lehet azokban az időkben, amikor valóban azt akarja, hogy a látogatók a háttérképre összpontosítsanak (mint például egy hírcikk fejlécében), majd engedélyezzék a szöveg könnyű olvasását a tetején. Egy kis jQuery megváltoztatja abackground-size tulajdonságot a görgetéskor a hatás létrehozásához.

Fade-In hős kép Overlay

van néhány dolog folyik ezzel a példával. Először is, egy teljes szélességű hős kép egy színes overlay hozzá a tetején, hogy hozzon létre egy másik színárnyalat. Ezután egy fade animációt hajtanak végre, hogy vizuálisan sima módon bemutassák a képet. Végül egy parallax stílusú görgetési effektus kerül hozzáadásra a keverékhez. Az eredmény egy nagyon modern megjelenés, amely viszonylag kevés kódot használ (nincs JS).

háttér Zoom és Pan

itt van egy olyan hatás, amelyet az utóbbi időben kissé látunk. Ahogy a felhasználó lebeg egy panel felett,a háttérkép a kurzor bármely mozdulatával együtt nagyít. Ez egy egyszerű módja annak, hogy adjunk néhány interaktivitás, valamint fenntartani a felhasználói érdeklődés.

Reveal on Hover

Ez a példa egy osztott képernyőt jelenít meg, ahol a háttér a felhasználó egér pozíciója alapján jelenik meg. Nagy összehasonlítások, mint a “előtt” és “után” felvételek.

színváltozás a Görgetésen

néha elfelejtjük, milyen erős lehet az egyszerű egyszínű színek használata. Itt látjuk, hogy milyen hatással lehet A háttérszínekre a görgetési pozíció alapján. Ez a könnyű megoldás ugyanolyan vizuálisan hatékony lehet, mint a nehéz képek.

háttér az élvonalban

a háttér már nem csak a tartalom keretezésének eszköze-most gyakran maga a tartalom része. A sok érdekes módon, hogy kihasználja őket, érdemes kísérletezni a különböző háttér technikák, valamint, hogy hogyan tudják növelni a felhasználói élményt a következő projekt.