Snygga animationer som involverar att sväva över bilder som används för att kräva JavaScript. Inte mer! CSS är här för att liva upp dina miniatyrer och gallerier.
Bildsvävningseffekter kan lägga till en extra nivå av polering till din webbplats. De skapar en mjuk effekt, vilket gör bildgallerier eller karuseller trevligare att navigera i. Det bästa är att du kan skapa dessa effekter med bara CSS och utan JavaScript.
Du kan skapa olika stilar av animering på dina bilder. Dessa inkluderar att sudda eller zooma bakgrunden, bleka eller skjuta in texten och ändra bakgrundsfärgen.
Skapa HTML för bilderna
Börja med att skapa en index.html fil i en tom mapp på din dator och öppna sedan filen med en textredigerare. Inuti filen skapar du HTML-skelettet och lägg till följande markering i öppningstexten och avslutande texttaggar:
<divklass="rutnät">
<divklass="image-wrapper">
<imgklass="fläck"src=" https://picsum.photos/500?random=1"alt=""><divklass="innehåll blekna">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annons
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklass="image-wrapper">
<imgklass="zoom oskärpa"src=" https://picsum.photos/500?random=2"alt=""><divklass="innehåll blekna">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annons
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklass="image-wrapper">
<imgklass="fläck"src=" https://picsum.photos/500?random=3"alt=""><divklass="innehåll glida-vänster">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annons
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklass="image-wrapper">
<imgklass="grå"src=" https://picsum.photos/500?random=3"alt="">
<divklass="innehåll glida-vänster">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annons
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Detta är en rutnätsbehållare med fyra bildomslag. div-elementen med bild-omslag klass fungera som omslag för bilden och dess motsvarande text. Varje avsnitts bild och innehåll har en unik uppsättning klasser lagt till.
Inne i stilmallen ska du rikta in dessa element med deras klassnamn och tillämpa de olika stil- och animationseffekterna. Texten visas inte som standard; du visar det bara när du håller muspekaren över bildomslaget, och bilden kommer att genomgå olika effekter under processen.
Lägger till Basic CSS
Nu när du har skapat HTML-koden är det dags att styla den med CSS. Skapa en style.css fil och länka till denna stilmall från din HTML-fil, inuti sektion:
<länkrel="stilmall"href="style.css">Inuti din style.css fil, det första du behöver göra är att återställa marginalen på kroppen till noll och ställa in en bottenmarginal:
kropp {
marginal: 0;
marginal-botten: 20rem;
}Därefter måste du förvandla den yttersta behållaren till en CSS-rutnät som du kan använda för att lägga ut element i två dimensioner. Följande kod skapar ett rutnät med så många kolumner eller rader som passar. Minsta storlek för varje kolumn är 300px och den maximala storleken är 1 bråkdel av behållaren:
.rutnät {
visa: rutnät;
rutnät-mall-kolumner: upprepa(automatisk passning, min Max(300px, 1fr));
}Eftersom du vill placera texten i förhållande till dess behållare, måste du ställa in positionen i förhållande till bildomslaget:
.image-wrapper {
placera: relativ;
svämma över: dold;
}
Nästa steg är att styla bilden. Visa bilden som ett blockelement, låt den sträcka sig över hela behållarens bredd och placera den i mitten av behållaren:
.image-wrapper > img {
visa: blockera;
bredd: 100%;
bildförhållande: 1 / 1;
objektpassning: omslag;
objekt-position: Centrum;
}
När det gäller texten, placera den centralt och ge en transparent, ljusgrå bakgrundsfärg:
.image-wrapper > .innehåll {
placera: absolut;
infälld: 0;
textstorlek: 2rem;
stoppning: 1rem;
bakgrund: rgba(255, 255, 255, .4);
visa: böja;
align-objekt: Centrum;
motivera-innehåll: Centrum;
}
Spara CSS-filen och öppna index.html i din webbläsare. Du bör hitta en sida som liknar den på bilden nedan.
Ställa in övergången på bilder och texter
Nu när du har tillämpat de grundläggande stilarna på bilderna är nästa steg att lägga till lite animation till dem. Börja med att lägga till en övergång till båda bilderna och deras motsvarande text:
.image-wrapper > img,
.image-wrapper > .innehåll {
övergång: 200Frökenlätta-in-ut;
}
Det betyder att alla övergångseffekter (d.v.s. tona in, zooma och oskärpa) varar i 200 millisekunder och har samma timingkurva.
Tona in och oskärpa animering
Den första animationsstilen bleknar i texten. När du håller muspekaren över ett visst bildomslag visas innehållet som har blekna klass kommer att ha denna effekt (fade-in och fade-out animation) tillämpad på den. Du uppnår detta genom att ställa in opaciteten till noll och ändra den till ett när en mus svävar på ett visst bildomslag:
.image-wrapper > .innehåll.blekna {
opacitet: 0;
}
.image-wrapper:sväva > .innehåll.blekna {
opacitet: 1;
}
Om du sparar filen och kontrollerar din webbläsare kommer du att se intoningsanimationen i kraft. Men du kanske också märker att texten är lite svår att läsa (om bilden är skarp och har mycket kontrast). Kom ihåg att alla bilder också har ett klassnamn fläck. Det här är för att sudda ut bilderna för att lägga till lite välbehövlig kontrast mellan dem och texten:
bild-omslag:sväva > img.fläck {
filtrera: fläck(5px)
}
Nu när du håller muspekaren över bilden kan du se att den bara blir suddig. Du kan öka pixelvärdet för att göra oskärpan mer uttalad på bilderna och därigenom lägga till mer kontrast mellan den och texten.
Lägga till andra effekter
De andra effekterna är att skjuta texten från vänster, zooma bilden och lägga till gråskala i bilden. Här är koden för att uppnå alla tre effekterna:
.image-wrapper > .innehåll.slide-vänster {
omvandla: translateX(100%)
}.image-wrapper:sväva > .innehåll.slide-vänster {
omvandla: translateX(0%)
}.image-wrapper:sväva > img.grå {
filtrera: gråskala(1)
}.image-wrapper:sväva > img.fläck {
filtrera: fläck(5px)
}
.image-wrapper:sväva > img.zoom {
omvandla: skala(1.1)
}
Spara filen, gå sedan till din webbläsare och håll muspekaren över varje bild. Du bör se de olika effekterna i aktion.
För att slutföra glidningseffekterna kan du skapa ytterligare tre bildomslag, som var och en innehåller en bild och text. Varje textstycke skulle ha klassnamnet glid upp, glida ner, eller lätt-höger. Då skulle du skicka in rätt värde pixel, em eller rem, inuti omvandla() funktion för att skapa alla tre effekter.
CSS Grid och Flexbox
CSS Grid och Flexbox är två funktioner som gör att du kan skapa fantastiska layouter för din webbplats. Du kan skapa praktiskt taget vilken layout du vill med lätthet och anpassa raderna och kolumnerna efter din smak. Kolumnerna kommer också att vara lyhörda som standard. Att lära dig när du ska använda den ena framför den andra hjälper dig att bli en av de bästa CSS-utvecklarna med en procent.
