Bevezetés
Modern CSS egy hatékony eszköz segítségével számos fejlett felhasználói felület (UI) jellemzői. A múltban ezek a funkciók a JavaScript könyvtárakra támaszkodtak.
ebben az útmutatóban beállíthat néhány CSS sort, hogy görgető parallax hatást hozzon létre egy weboldalon. A placekitten.com képeket helyőrző háttérképként fogja használni.
lesz egy weboldal tiszta CSS görgetés parallaxis hatása, miután befejezte a bemutató.
figyelmeztetés: Ez a cikk olyan kísérleti CSS tulajdonságokat használ, amelyek nem működnek a böngészőkben. Ezt a projektet tesztelték, és a Chrome-on is működik.
Ez a technika nem működik jól a Firefoxban, a Safariban és az iOS-ben a böngészők optimalizálásának köszönhetően.
1. lépés-új projekt létrehozása
ebben a lépésben használja a parancssort egy új projektmappa és fájlok beállításához. A kezdéshez nyissa meg a terminált, majd hozzon létre egy új projektmappát.
írja be a következő parancsot a projektmappa létrehozásához:
- mkdir css-parallax
ebben az esetben a css-parallax mappát hívta. Most váltson át acss-parallax mappába:
- cd css-parallax
ezután hozzon létre egyindex.html fájlt acss-parallax mappába anano parancs:
- nano index.html
a projekt összes HTML-jét ebbe a fájlba helyezi.
a következő lépésben elkezdi létrehozni a weboldal szerkezetét.
2. lépés-az Alkalmazásstruktúra beállítása
ebben a lépésben hozzáadja a projekt struktúrájának létrehozásához szükséges HTML-t.
aindex.html fájlban adja hozzá a következő kódot:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>Ez a legtöbb olyan weboldal alapvető szerkezete, amely HTML.
adja hozzá a következő kódot a<body> tag:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>Ez a kód három különböző szakaszt hoz létre. Kettőnek lesz háttérképe, az egyik statikus, sima háttér lesz.
a következő néhány lépésben az egyes szakaszok stílusait a HTMLosztályok segítségével adja hozzá.
3. lépés-CSS fájl létrehozása és kezdeti CSS hozzáadása
ebben a lépésben létrehoz egy CSS fájlt. Ezután hozzáadja a kezdeti CSS-t, amely a weboldal stílusához szükséges, majd létrehozza a parallax effektust.
először hozzon létre egy styles.css fájlt a css-parallax mappában a nano paranccsal:
- nano styles.css
Ez az, ahol fel az összes CSS létrehozásához szükséges parallax görgetés hatása.
ezután kezdje a .wrapper osztály. A styles.css fájlban adja hozzá a következő kódot:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}The .wrapper class beállítja az egész oldal perspektíváját és görgetési tulajdonságait.
a csomagolás magasságát rögzített értékre kell állítani a hatás működéséhez. Használhatja a nézetablak egység vh állítva 100, hogy a teljes magassága a képernyő nézetablak.
a képek méretezésekor vízszintes görgetősávot adnak a képernyőhöz, így letilthatja azt a overflow-x: hidden;hozzáadásával. Aperspective tulajdonság szimulálja a távolságot a nézetablaktól a létrehozandó pszeudo-elemekig, majd tovább átalakítja aCSS.
a következő lépésben további CSS-t ad hozzá a weboldal stílusához.
4. lépés-stílusok hozzáadása a .szakasz osztály
ebben a lépésben stílusokat ad hozzá a .section osztályhoz.
astyles.css fájlban adja hozzá a következő kódot a wrapper osztály alatt:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}a .section osztály meghatározza a fő szakaszok méretét, megjelenítését és szöveg tulajdonságait.
állítsa be arelative pozíciót úgy, hogy a gyermek,.parallax::after teljesen elhelyezhető a.sectionszülő elemhez képest.
minden szakasz view-height(vh)100 a nézetablak teljes magasságának felvételéhez. Ez az érték lehet változtatni, majd állítsa be, hogy bármilyen magasságot szeretne az egyes szakaszok.
végül a fennmaradó CSS tulajdonságokat használják formázásra és stílus hozzáadására az egyes szakaszokon belüli szöveghez. Az egyes szakaszok közepére helyezi a szöveget, majd hozzáadja a whiteszínt.
ezután hozzáad egy pszeudo-elemet és stílusosítja, hogy a parallaxis hatást a HTMLkét szakaszára hozza létre.
5. lépés-stílusok hozzáadása a .parallax osztály
ebben a lépésben hozzáadja a stílusokat a .parallax osztályhoz.
először hozzáad egy pszeudo-elemet a.parallax osztályhoz.
Megjegyzés: Akkor látogasson MDN web docs többet CSS pszeudo-elemek.
adja hozzá a következő kódot a.section osztály:
....section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}.parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}...The.parallax class ad egy ::after pszeudo-elemet a háttérképhez, és biztosítja a parallax hatáshoz szükséges átalakításokat.
a pszeudo-elem az elem utolsó gyermeke a .parallaxosztályral.
a kód első felében megjelenik a psuedo-elem. Atransform tulajdonság elmozdítja a pszeudoelemet az-index fényképezőgépről, majd a nézetablak kitöltéséhez visszaállítja.
mivel a pszeudo-elem távolabb van, úgy tűnik, hogy lassabban mozog.
a következő lépésben hozzáadja a háttérképeket és a statikus háttérstílust.
6. lépés — az egyes szakaszok képeinek és hátterének hozzáadása
ebben a lépésben hozzáadja a végleges CSS tulajdonságokat a statikus szakasz háttérképeinek és háttérszínének hozzáadásához.
először adjon hozzá egyszínű háttérszínt a .static szakaszhoz a következő kóddal a .parallax::after osztály után:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}...The .static class ad hátteret a statikus szakaszhoz, amely nem rendelkezik képpel.
a két szakasz a .parallax osztály is van egy extra osztály, amely különbözik az egyes. A.bg1 és.bg2 osztályok segítségével adja hozzá a cica háttérképeit.
adja hozzá a következő kódot a.static osztály:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}...The .bg1, .bg2 osztályok hozzá a megfelelő háttérképeket az egyes szakaszok.
a képek a placekitten weboldaláról származnak. Ez egy szolgáltatás a kiscicák képeinek készítéséhez helyőrzőként való felhasználásra.
most, hogy a parallax görgetési effektus összes kódja hozzáadásra kerül, hivatkozhat a styles.css fájlra a index.htmlfájlban.
7. lépés-stílusok összekapcsolása.css és Nyitóindex.html a böngészőben
ebben a lépésben összekapcsolja a styles.css fájlt, majd megnyitja a projektet a böngészőben, hogy megnézze a parallax görgetési hatást.
először adja hozzá a következő kódot a <head>címkéhez a index.html fájlban:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...most megnyithatja aindex.html fájlt a böngészőjében:
ezzel létrehozott egy görgető hatású működő weboldalt. Nézze meg ezt a GitHub adattár, hogy a teljes kódot.
következtetés
ebben a cikkben egy index.htmlés styles.css fájlt állítottál be, és most már van egy funkcionális weboldalad. A weboldal struktúrájában hozzáadta a stílusokat a webhely különböző szakaszaihoz.
lehetséges, hogy a használt képeket vagy a parallax hatást távolabb helyezzük, hogy lassabban mozogjanak. A képpont összegét a perspective és a transform tulajdonságokon kell módosítania. Ha egyáltalán nem szeretné, hogy a háttérkép görgessen, használja a background-attachment: fixed;perspective/translate/scalehelyett.