Home-theater-designers
Efekty vznášania sa obrázka môžu vašej webovej stránke pridať ďalšiu úroveň lesku. Vytvárajú plynulý efekt, vďaka čomu je navigácia v obrazových galériách alebo kolotočoch príjemnejšia. Najlepšie na tom je, že tieto efekty môžete vytvárať iba pomocou CSS a bez JavaScriptu.
Na svojich obrázkoch môžete vytvoriť rôzne štýly animácií. Patrí medzi ne rozmazanie alebo priblíženie pozadia, vyblednutie alebo posunutie textu a zmena farby pozadia.
VYUŽITIE VIDEA DŇA POKRAČUJTE V OBSAHU POKRAČOVANÍM
Vytvorenie HTML pre
Začnite vytvorením index.html súbor v prázdnom priečinku v počítači a potom súbor otvorte v textovom editore. Vo vnútri súboru vytvorte kostru HTML a do úvodných značiek tela a uzatvárania tela pridajte nasledujúce označenie:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Ide o mriežkový kontajner so štyrmi obalmi obrázkov. Prvky div s image-wrapper triedy slúžia ako obal pre obrázok a jeho zodpovedajúci text. K obrázku a obsahu každej sekcie je pridaná jedinečná sada tried.
Vo vnútri šablóny štýlov budete zacieliť na tieto prvky podľa ich názvov tried a aplikujte rôzne štýlové a animačné efekty. Text sa predvolene nezobrazí; zobrazí sa iba vtedy, keď umiestnite kurzor myši na obálku obrázka a obrázok bude mať počas tohto procesu rôzne efekty.
Pridanie základného CSS
Teraz, keď ste vytvorili HTML, je čas upraviť ho pomocou CSS. Vytvor style.css súbor a odkaz na tento hárok štýlov z vášho súboru HTML vo vnútri súboru sekcia:
<link rel="stylesheet" href="style.css">
Vo svojom vnútri style.css súbor, prvá vec, ktorú musíte urobiť, je vynulovať okraj na tele a nastaviť nejaký spodný okraj:
inovácia systému Windows 10 nemá dostatok miesta na disku
body {
margin: 0;
margin-bottom: 20rem;
}
Ďalej musíte premeniť vonkajšiu nádobu na a Mriežka CSS, ktorú môžete použiť na rozloženie prvkov v dvoch rozmeroch . Nasledujúci kód vytvorí mriežku s toľkými stĺpcami alebo riadkami, ktoré sa zmestia. Minimálna veľkosť každého stĺpca je 300 pixelov a maximálna veľkosť je 1 zlomok kontajnera:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Keďže chcete umiestniť text vzhľadom na jeho kontajner, musíte nastaviť polohu vzhľadom na obal obrázka:
.image-wrapper {
position: relative;
overflow: hidden;
}
Ďalším krokom je štylizácia obrázka. Zobrazte obrázok ako prvok bloku, nastavte ho na šírku celého kontajnera a umiestnite ho do stredu kontajnera:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Pokiaľ ide o text, umiestnite ho do stredu a vytvorte priehľadnú svetlosivú farbu pozadia:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Uložte súbor CSS a otvorte ho index.html vo vašom prehliadači. Mali by ste nájsť stránku podobnú tej na obrázku nižšie.
Zapnutie prechodu a textov
Teraz, keď ste na obrázky použili základné štýly, ďalším krokom je pridať k nim nejakú animáciu. Začnite pridaním prechodu do oboch obrázkov a ich zodpovedajúceho textu:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
To znamená, že všetky prechodové efekty (t. j. zoslabenie, priblíženie a rozmazanie) budú trvať 200 milisekúnd a budú mať rovnakú krivku časovania.
Animácia Fade-In a Blur
Prvý štýl animácie v texte mizne. Keď umiestnite kurzor myši na konkrétny obal obrázka, obsah, ktorý má vyblednúť trieda bude mať tento efekt (animácia zoslabenia a zoslabenia) aplikovaný na ňu. Dosiahnete to nastavením nepriehľadnosti na nulu a jej zmenou na jednotku, keď myšou prejdete na konkrétny obal obrázka:
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Ak súbor uložíte a skontrolujete svoj prehliadač, uvidíte aktívnu animáciu prechodu. Môžete si však tiež všimnúť, že text je trochu ťažko čitateľný (ak je obrázok ostrý a má veľa kontrastu). Pripomeňme, že všetky obrázky majú aj názov triedy rozmazať . Toto slúži na rozmazanie obrázkov, aby sa medzi nimi a textom pridal potrebný kontrast:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Teraz, keď umiestnite kurzor myši na obrázok, môžete vidieť, že sa len rozmaže. Môžete zvýšiť hodnotu pixelov, aby bolo rozmazanie na obrázkoch výraznejšie, čím sa pridá väčší kontrast medzi ním a textom.
Pridanie ďalších efektov
Ďalšie efekty sú posúvanie textu zľava, zväčšovanie obrázka a pridávanie odtieňov šedej do obrázka. Tu je kód na dosiahnutie všetkých troch efektov:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Uložte súbor, potom prejdite do prehliadača a umiestnite kurzor myši na každý obrázok. Mali by ste vidieť rôzne efekty v akcii.
Na dokončenie zasúvacích efektov môžete vytvoriť tri ďalšie obaly obrázkov, z ktorých každý obsahuje obrázok a text. Každý kus textu bude mať názov triedy vysúvanie , zošmyknúť sa, alebo mierne-vpravo . Potom by ste odovzdali správnu hodnotu pixel, em alebo rem , vnútri transformovať () funkcia na vytvorenie všetkých troch efektov.
CSS Grid a Flexbox
CSS Grid a Flexbox sú dve funkcie, ktoré vám umožňujú vytvárať fantastické rozloženia pre váš web. Môžete jednoducho vytvoriť prakticky akékoľvek rozloženie, ktoré chcete, a prispôsobiť riadky a stĺpce podľa svojho vkusu. Stĺpce budú tiež v predvolenom nastavení responzívne. Keď sa naučíte, kedy používať jednu cez druhú, pomôže vám to stať sa špičkovým vývojárom CSS o jedno percento.