A DayTrip webhely az oldal fejlécénél egy elegáns hatást alkalmaz, amely animált, szemcsés textúrával torzítja a háttérképet. A hatás finom, de poros, retro hangulatot kelt.
A hatás nagyon finom. Láthatja azt a különbséget, ahol a hatás a jobb oldalon van, a bal oldalon pedig letiltva:
Ugyanazon rusztikus hatást hozhatjuk létre egyetlen képpel és egy kis CSS-sel.
1. lépés: A dolgok beállítása
Először állítsuk be az oldal fejlécünket. Olyan közös mintát fogunk használni, ahol a háttérkép a teljes helyet lefedi.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Íme egy példa a kezdéshez:
Lásd Geoff Graham (@geoffgraham) Pen RpLKdx-jét a CodePen-en.
2. lépés: Válasszon egy textúrát
Ezután szükségünk van egy szemcsés textúrájú képre. Ezt maga hozhatja létre. A Finom mintáknak számos szép lehetősége van, beleértve ezt is, amelyet a bemutatónkhoz használunk. Ne feledje, hogy a képnek nem kell hatalmasnak lennie. Valami a 400pxtér szomszédságában fog cselezni.
Az ötlet az, hogy a szemcsés textúrát ráhelyezzük a .page-header. Használhatjuk az :afterálelemet, .page-headerígy nincs szükség újabb elem létrehozására.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Ne feledje, hogy a heightés widthaz álelemre, valamint az a topés a elemeket úgy helyeztük el left, hogy az valójában túllépje az oldal fejlécének határait és középre kerüljön . Ezt azért akarjuk megtenni, hogy a szemcsés textúrarétegnek legyen helye mozogni anélkül, hogy kitenné az alatta lévő fejlécréteget. Ez azt jelenti, hogy a rétegek inkább így vannak elrendezve:
Most van egy szép nagy oldal fejlécünk, amelynek tetején szemcsés kép található:
Lásd Geoff Graham (@geoffgraham) Pen evGvKg-jét a CodePen-en.
3. lépés: A szemcsés réteg animálása
Az utolsó dolog, amit meg kell tennünk, az a szemcsés réteg animálása. Ez az a hatás, amelyet követünk, és az oldal fejlécének ezt a retro, analóg vonzerőt adja.
A DayTrip webhely a következőket használja az animációs kulcsképek meghatározásához:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Valahogy nehéz elképzelni, hogy ez a kód mit jelent, de alapvetően cikcakk formában mozgatja a felső szemcsés réteget. Az alábbiakban bemutatjuk, hogyan néz ki kisebb méretben:
Most már csak annyit kell tennünk, hogy alkalmazzuk a kulcsképeket, .page-header:afterhogy lássuk őket. Beállítjuk, hogy az animáció 8 másodpercig játsszon, és végtelenül ciklusozzon:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Összeállítva
Itt van a teljes részlet az összes darabbal a helyén. Vegye figyelembe, hogy feltételezzük az Autoprefixer használatát az összes szállító előtagnál.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Lásd Geoff Graham (@geoffgraham) Pen Animated Grainy Effect-jét a CodePen-en.