Kuidas luua CSS-is pildi hõljumise efekti

Kujutise hõljumise efektid võivad teie veebisaidile lihvida. Need loovad sujuva efekti, muutes pildigaleriides või karussellides liikumise meeldivamaks. Parim osa on see, et saate neid efekte luua ainult CSS-i ja ilma JavaScriptita.

Saate oma piltidele luua erinevaid animatsiooni stiile. Nende hulka kuuluvad tausta hägustamine või suumimine, teksti tuhmumine või libisemine ning taustavärvi muutmine.

Piltide jaoks HTML-i loomine

Alustage selle loomisega index.html faili oma arvuti tühjas kaustas, seejärel avage fail tekstiredaktoriga. Looge faili sees HTML-i skelett ja lisage järgmine märgistus avatavasse ja sulgevasse kehamärgendisse:

<divklass="võrk">
<divklass="pildiümbris">
<imgklass="hägu"src=" https://picsum.photos/500?random=1"alt="">
<divklass="sisu tuhmub">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta kuulutus
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>





instagram viewer

<divklass="pildiümbris">
<imgklass="suumi hägusus"src=" https://picsum.photos/500?random=2"alt="">
<divklass="sisu tuhmub">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta kuulutus
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklass="pildiümbris">
<imgklass="hägu"src=" https://picsum.photos/500?random=3"alt="">
<divklass="sisu slaid vasakule">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta kuulutus
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklass="pildiümbris">
<imgklass="hall"src=" https://picsum.photos/500?random=3"alt="">
<divklass="sisu slaid vasakule">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta kuulutus
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

See on nelja pildiümbrisega ruudustikukonteiner. Div-elemendid koos pildiümbris klass toimivad pildi ja sellele vastava teksti ümbrisena. Iga jaotise pildile ja sisule on lisatud ainulaadne klasside komplekt.

Stiililehe sees saate sihtida neid elemente nende klassinimede järgi ja rakendada erinevaid stiili- ja animatsiooniefekte. Vaikimisi teksti ei kuvata; kuvatakse see ainult siis, kui hõljutate kursorit pildiümbrise kohal ja pildile avaldatakse protsessi käigus erinevaid efekte.

Põhilise CSS-i lisamine

Nüüd, kui olete HTML-i loonud, on aeg kujundada see CSS-iga. Loo stiil.css fail ja link sellele stiililehele oma HTML-failist jaotis:

<linkrel="laadileht"href="stiil.css">

Sinu sees stiil.css faili, peate esimese asjana lähtestama keha veerise nulli ja määrama alumise veerise:

keha {
marginaal: 0;
margin-alumine: 20rem;
}

Järgmiseks peate pöörama kõige välimise konteineri a CSS-võrk, mida saate kasutada elementide kahemõõtmeliseks paigutamiseks. Järgmine kood loob ruudustiku, milles on nii palju veerge või ridu, mis sobivad. Iga veeru minimaalne suurus on 300 pikslit ja maksimaalne suurus on 1 konteineri osa:

.grid {
kuva: võre;
ruudustik-mall-veerud: korda(automaatne sobivus, minmax(300px, 1fr));
}

Kuna soovite paigutada teksti selle konteineri suhtes, peate määrama asukoha pildiümbrise suhtes:

.image-wrapper {
positsiooni: sugulane;
ülevool: peidetud;
}

Järgmine samm on pildi stiil. Kuvage pilt plokielemendina, muutke see kogu konteineri laiusele ja asetage see konteineri keskele:

.image-wrapper > img {
kuva: blokk;
laius: 100%;
kuvasuhe: 1 / 1;
objektile sobiv: kaas;
objekt-positsioon: Keskus;
}

Mis puutub teksti, asetage see keskele ja andke läbipaistev helehall taustavärv:

.image-wrapper > .sisu {
positsiooni: absoluutne;
sisend: 0;
fondi suurus: 2rem;
polsterdus: 1rem;
taustal: rgba(255, 255, 255, .4);
kuva: painduv;
joondada-üksused: Keskus;
õigustama-sisu: Keskus;
}

Salvestage CSS-fail ja avage index.html oma brauseris. Peaksite leidma lehe, mis sarnaneb alloleval pildil olevaga.

Piltide ja tekstide ülemineku seadistamine

Nüüd, kui olete piltidele põhilised stiilid rakendanud, on järgmine samm lisada neile animatsioon. Alustage ülemineku lisamisega mõlemale pildile ja neile vastavale tekstile:

.image-wrapper > img,
.image-wrapper > .sisu {
üleminek: 200Prlkergus sisse-välja;
}

See tähendab, et kõik üleminekuefektid (st tuhmumine, suumimine ja hägustumine) kestavad 200 millisekundit ja neil on sama ajastuskõver.

Pimenduse ja hägustamise animatsioon

Esimene animatsioonistiil on tekstis hääbumas. Kui hõljutate kursorit konkreetse pildiümbrise kohal, kuvatakse sisu, millel on tuhmuma klassis rakendatakse seda efekti (sisse- ja väljalangemisanimatsioon). Selle saavutamiseks määrate läbipaistmatuse nulliks ja muudate selle üheks, kui hiir hõljub teatud pildiümbrisel:

.image-wrapper > .sisu. tuhmub {
läbipaistmatus: 0;
}
.image-wrapper:hõljuma > .sisu. tuhmub {
läbipaistmatus: 1;
}

Kui salvestate faili ja kontrollite oma brauserit, näete efektiiv animatsiooni. Kuid võite ka märgata, et teksti on veidi raske lugeda (kui pilt on terav ja palju kontrastset). Tuletage meelde, et kõigil piltidel on ka klassi nimi hägusus. See on mõeldud piltide häguseks muutmiseks, et lisada nende ja teksti vahel vajalikku kontrasti:

pildiümbris:hõljuma > img.hägu {
filter: hägusus(5px)
}

Nüüd, kui hõljutate kursorit pildi kohal, näete, et see lihtsalt häguneb. Saate suurendada pikslite väärtust, et muuta piltidel hägusus selgemaks, lisades seeläbi rohkem kontrasti selle ja teksti vahel.

Muude efektide lisamine

Muud efektid on teksti libistamine vasakult, pildi suumimine ja halltoonide lisamine pildile. Siin on kood kõigi kolme efekti saavutamiseks:

.image-wrapper > .sisu.libista vasakule {
teisendada: tõlkidaX(100%)
}
.image-wrapper:hõljuma > .sisu.libista vasakule {
teisendada: tõlkidaX(0%)
}
.image-wrapper:hõljuma > img.hall {
filter: halltoonid(1)
}
.image-wrapper:hõljuma > img.hägu {
filter: hägusus(5px)
}
.image-wrapper:hõljuma > img.suum {
teisendada: kaal(1.1)
}

Salvestage fail, seejärel minge oma brauserisse ja hõljutage kursorit iga pildi kohal. Te peaksite nägema erinevaid efekte.

Sisselibistatavate efektide lõpuleviimiseks saate luua veel kolm pildiümbrist, millest igaüks sisaldab pilti ja teksti. Igal tekstil oleks klassi nimi liug üles, alla libisemine, või kergelt-paremale. Siis sisestaksite õige väärtuse piksel, em või rem, sees teisenda() funktsioon kõigi kolme efekti loomiseks.

CSS-võrk ja Flexbox

CSS Grid ja Flexbox on kaks funktsiooni, mis võimaldavad teil luua oma veebisaidile fantastilisi paigutusi. Saate hõlpsasti luua peaaegu iga soovitud paigutuse ning kohandada ridu ja veerge oma maitse järgi. Veerud reageerivad ka vaikimisi. Õppides, millal üht teist kasutada, aitab teil saada ühe protsendi parimaks CSS-i arendajaks.