Efektní animace zahrnující umístění kurzoru nad obrázky, které vyžadují JavaScript. Už ne! CSS je tu pro oživení vašich náhledů a galerií.
Efekty při najetí na obrázek mohou vašemu webu přidat další úroveň lesku. Vytvářejí plynulý efekt, díky čemuž je navigace v obrazových galeriích nebo kolotočích příjemnější. Nejlepší na tom je, že tyto efekty můžete vytvářet pouze pomocí CSS a bez JavaScriptu.
Na svých obrázcích můžete vytvořit různé styly animace. Patří mezi ně rozmazání nebo přiblížení pozadí, vyblednutí nebo posunutí textu a změna barvy pozadí.
Vytvoření HTML pro obrázky
Začněte vytvořením index.html soubor v prázdné složce v počítači a poté soubor otevřete pomocí textového editoru. Uvnitř souboru vytvořte kostru HTML a do úvodních značek těla a zavírání přidejte následující označení:
<divtřída="mřížka">
<divtřída="obálka">
<imgtřída="rozmazat"src=" https://picsum.photos/500?random=1"alt=""><divtřída="vyblednutí obsahu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtřída="obálka">
<imgtřída="zoom rozostření"src=" https://picsum.photos/500?random=2"alt=""><divtřída="vyblednutí obsahu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtřída="obálka">
<imgtřída="rozmazat"src=" https://picsum.photos/500?random=3"alt=""><divtřída="obsah snímek vlevo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtřída="obálka">
<imgtřída="Šedá"src=" https://picsum.photos/500?random=3"alt="">
<divtřída="obsah snímek vlevo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Jedná se o mřížkový kontejner se čtyřmi obaly obrázků. Prvky div s image-wrapper třídy slouží jako obal pro obrázek a jeho odpovídající text. Ke každému obrázku a obsahu sekce je přidána jedinečná sada tříd.
Uvnitř šablony stylů budete zacílit tyto prvky podle jejich názvů tříd a aplikujte různé stylingové a animační efekty. Text se ve výchozím nastavení nezobrazí; zobrazíte jej pouze tehdy, když najedete na obálku obrázku a obrázek bude mít různé efekty.
Přidání základního CSS
Nyní, když jste vytvořili HTML, je čas upravit jej pomocí CSS. Vytvořit styl.css a odkaz na tuto šablonu stylů z vašeho souboru HTML uvnitř souboru sekce:
<odkazrel="stylesheet"href="style.css">Uvnitř vašeho styl.css soubor, první věc, kterou musíte udělat, je resetovat okraj na těle na nulu a nastavit nějaký spodní okraj:
tělo {
okraj: 0;
okraj-dole: 20rem;
}Dále musíte proměnit vnější nádobu na a Mřížka CSS, kterou můžete použít k rozložení prvků ve dvou rozměrech. Následující kód vytvoří mřížku s tolika sloupci nebo řádky, které se vejdou. Minimální velikost každého sloupce je 300 pixelů a maximální velikost je 1 zlomek kontejneru:
.mřížka {
Zobrazit: mřížka;
mřížka-šablona-sloupce: opakovat(automatické přizpůsobení, minmax(300px, 1fr));
}Protože chcete umístit text vzhledem k jeho kontejneru, musíte nastavit polohu vzhledem k obalu obrázku:
.obrazový obal {
pozice: relativní;
přetékat: skrytý;
}
Dalším krokem je stylizace obrázku. Zobrazte obrázek jako prvek bloku, nastavte jej na šířku celého kontejneru a umístěte jej do středu kontejneru:
.obrazový obal > img {
Zobrazit: blok;
šířka: 100%;
poměr stran: 1 / 1;
objekt-fit: Pokrýt;
objekt-pozice: centrum;
}
Pokud jde o text, umístěte jej do středu a vytvořte průhlednou, světle šedou barvu pozadí:
.obrazový obal > .obsah {
pozice: absolutní;
vložka: 0;
velikost písma: 2rem;
vycpávka: 1rem;
Pozadí: rgba(255, 255, 255, .4);
Zobrazit: flex;
zarovnat-položky: centrum;
ospravedlnit-obsah: centrum;
}
Uložte soubor CSS a otevřete index.html ve vašem prohlížeči. Měli byste najít stránku podobnou té na obrázku níže.
Nastavení přechodu na obrázcích a textech
Nyní, když jste na obrázky použili základní styly, je dalším krokem přidat k nim nějakou animaci. Začněte přidáním přechodu k oběma obrázkům a jejich odpovídajícímu textu:
.obrazový obal > img,
.obrazový obal > .obsah {
přechod: 200slečnaeasy-in-out;
}
To znamená, že všechny přechodové efekty (tj. roztmívání, přiblížení a rozostření) budou trvat 200 milisekund a budou mít stejnou křivku časování.
Animace Fade-In a Blur
První styl animace v textu mizí. Když umístíte ukazatel myši na konkrétní obálku obrázku, obsah, který má slábnout třída bude mít na sebe tento efekt (animace zatmívání a slábnutí). Toho dosáhnete nastavením krytí na nulu a jeho změnou na jedničku, když myš najede na konkrétní obálku obrázku:
.obrazový obal > .obsah.slábnout {
neprůhlednost: 0;
}
.obrazový obal:vznášet se > .obsah.slábnout {
neprůhlednost: 1;
}
Pokud soubor uložíte a zkontrolujete svůj prohlížeč, uvidíte aktivní animaci prolínání. Ale můžete si také všimnout, že text je trochu špatně čitelný (pokud je obrázek ostrý a má hodně kontrastu). Připomeňme, že všechny obrázky mají také název třídy rozmazat. Slouží k rozmazání obrázků a přidání potřebného kontrastu mezi nimi a textem:
image-wrapper:vznášet se > img.rozmazat {
filtr: rozmazat(5px)
}
Když teď najedete na obrázek, můžete vidět, že se jen rozmaže. Můžete zvýšit hodnotu pixelů, aby bylo rozmazání na obrázcích výraznější, a tím přidat větší kontrast mezi ním a textem.
Přidání dalších efektů
Další efekty jsou posunutí textu zleva, přiblížení obrázku a přidání stupňů šedi do obrázku. Zde je kód pro dosažení všech tří efektů:
.obrazový obal > .obsah.slide-left {
přeměnit: překládatX(100%)
}.obrazový obal:vznášet se > .obsah.slide-left {
přeměnit: překládatX(0%)
}.obrazový obal:vznášet se > img.Šedá {
filtr: stupně šedi(1)
}.obrazový obal:vznášet se > img.rozmazat {
filtr: rozmazat(5px)
}
.obrazový obal:vznášet se > img.Zvětšení {
přeměnit: měřítko(1.1)
}
Uložte soubor, přejděte do prohlížeče a najeďte myší na každý obrázek. Měli byste vidět různé efekty v akci.
Chcete-li dokončit zasouvací efekty, můžete vytvořit další tři obaly obrázků, z nichž každý obsahuje obrázek a text. Každý text bude mít název třídy vysunout, sklouznout dolů, nebo mírně vpravo. Pak byste předali správnou hodnotu pixel, em nebo rem, uvnitř přeměnit() funkce pro vytvoření všech tří efektů.
CSS Grid a Flexbox
CSS Grid a Flexbox jsou dvě funkce, které vám umožní vytvářet fantastické rozvržení pro váš web. Snadno můžete vytvořit prakticky libovolné rozvržení a přizpůsobit si řádky a sloupce podle svého vkusu. Sloupce budou také ve výchozím nastavení responzivní. Když se naučíte, kdy používat jednu přes druhou, pomůže vám to stát se špičkovým vývojářem CSS o jedno procento.
