Kaip sukurti vaizdo užvedimo efektą CSS

Vaizdo užvedimo efektai gali suteikti jūsų svetainei papildomo poliravimo lygio. Jie sukuria sklandų efektą, todėl vaizdų galerijose ar karuselėse naršyti yra maloniau. Geriausia tai, kad šiuos efektus galite sukurti naudodami tik CSS ir be JavaScript.

Savo vaizduose galite sukurti įvairių stilių animaciją. Tai apima fono suliejimą arba mastelio keitimą, teksto išblukimą arba slinkimą ir fono spalvos keitimą.

Vaizdų HTML kūrimas

Pradėkite kurdami index.html failą tuščiame kompiuterio aplanke, tada atidarykite failą naudodami teksto rengyklę. Failo viduje sukurkite HTML skeletą ir įtraukite toliau nurodytus žymėjimus į atidarymo ir uždarymo turinio žymas:

<divklasė="tinklelis">
<divklasė="vaizdo įvynioklis">
<imgklasė="sulieti"src=" https://picsum.photos/500?random=1"alt="">
<divklasė=„turinys išnyks“>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta skelbimas





instagram viewer

 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>

<divklasė="vaizdo įvynioklis">
<imgklasė=„Mastelio suliejimas“src=" https://picsum.photos/500?random=2"alt="">
<divklasė=„turinys išnyks“>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta skelbimas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklasė="vaizdo įvynioklis">
<imgklasė="sulieti"src=" https://picsum.photos/500?random=3"alt="">
<divklasė=„turinio skaidrė į kairę“>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta skelbimas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklasė="vaizdo įvynioklis">
<imgklasė="pilka"src=" https://picsum.photos/500?random=3"alt="">
<divklasė=„turinio skaidrė į kairę“>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta skelbimas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Tai tinklelio talpykla su keturiais vaizdo apvalkalais. Div elementai su vaizdo įvynioklis klasė tarnauja kaip paveikslėlio ir jį atitinkančio teksto įvyniojimas. Prie kiekvienos skilties vaizdo ir turinio pridedamas unikalus klasių rinkinys.

Stiliaus lapo viduje jūs nukreipkite šiuos elementus pagal jų klasių pavadinimus ir pritaikykite įvairius stiliaus bei animacijos efektus. Tekstas nebus rodomas pagal numatytuosius nustatymus; jį rodysite tik užvedę pelės žymeklį virš vaizdo apvalkalo, o vaizdas bus skirtingai veikiamas.

Pridedamas pagrindinis CSS

Dabar, kai sukūrėte HTML, laikas sukurti jo stilių naudojant CSS. Sukurti stilius.css failą ir nuorodą į šį stiliaus lapą iš savo HTML failo viduje skyrius:

<nuorodarel="stiliaus lapas"href="stilius.css">

Tavo viduje stilius.css failą, pirmas dalykas, kurį turite padaryti, tai iš naujo nustatyti korpuso paraštę į nulį ir nustatyti apatinę paraštę:

kūnas {
marža: 0;
paraštė-apačia: 20rem;
}

Toliau reikia pasukti atokiausią talpyklą į a CSS tinklelis, kurį galite naudoti elementams išdėstyti dviem matmenimis. Šis kodas sukuria tinklelį su tiek stulpelių ar eilučių, kurie tinka. Mažiausias kiekvieno stulpelio dydis yra 300 pikselių, o didžiausias – 1 sudėtinio rodinio dalis:

.tinklelis {
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: kartoti(automatinis pritaikymas, minmax(300px, 1fr));
}

Kadangi norite išdėstyti tekstą, palyginti su jo konteineriu, turite nustatyti padėtį, palyginti su vaizdo apvyniojimu:

.vaizdo įvynioklis {
padėtis: giminaitis;
perpildymas: paslėptas;
}

Kitas žingsnis yra įvaizdžio stilius. Pateikite vaizdą kaip blokinį elementą, padarykite jį per visą konteinerio plotį ir padėkite jį konteinerio centre:

.vaizdo įvynioklis > img {
ekranas: blokas;
plotis: 100%;
kraštinių santykis: 1 / 1;
tinkamas objektui: viršelis;
objektas-pozicija: centras;
}

Kalbant apie tekstą, pastatykite jį centre ir suteikite skaidrų, šviesiai pilką fono spalvą:

.vaizdo įvynioklis > .turinys {
padėtis: absoliutus;
intarpas: 0;
šrifto dydis: 2rem;
kamšalas: 1rem;
fone: rgba(255, 255, 255, .4);
ekranas: lankstus;
išlyginti elementus: centras;
pateisinti-turinys: centras;
}

Išsaugokite CSS failą ir atidarykite index.html savo naršyklėje. Turėtumėte rasti puslapį, panašų į toliau pateiktame paveikslėlyje esantį puslapį.

Vaizdų ir tekstų perėjimo nustatymas

Dabar, kai vaizdams pritaikėte pagrindinius stilius, kitas žingsnis yra pridėti prie jų animaciją. Pradėkite pridėdami perėjimą prie abiejų vaizdų ir atitinkamo teksto:

.vaizdo įvynioklis > img,
.vaizdo įvynioklis > .turinys {
perėjimas: 200mslengvumas į išorę;
}

Tai reiškia, kad visi perėjimo efektai (pvz., išnykimas, mastelio keitimas ir suliejimas) truks 200 milisekundžių ir turės tą pačią laiko kreivę.

„Fade-In“ ir „Blur“ animacija

Pirmasis animacijos stilius išnyksta tekste. Užvedus pelės žymeklį virš konkretaus vaizdo apvalkalo, turinys, kuriame yra išblukti klasėje bus pritaikytas šis efektas (išnykimo ir išnykimo animacija). Tai pasieksite nustatę nepermatomumą į nulį ir pakeitę jį į vienetą, kai pelė užves ant konkretaus vaizdo apvalkalo:

.vaizdo įvynioklis > .turinys.išnyks {
neskaidrumas: 0;
}
.vaizdo įvynioklis:užveskite pelės žymeklį > .turinys.išnyks {
neskaidrumas: 1;
}

Jei išsaugosite failą ir patikrinsite savo naršyklę, pamatysite, kad veikia išnyksanti animacija. Tačiau taip pat galite pastebėti, kad tekstas yra šiek tiek sunkiai įskaitomas (jei vaizdas yra ryškus ir turi daug kontrasto). Prisiminkite, kad visi vaizdai taip pat turi klasės pavadinimą sulieti. Tai skirta vaizdams sulieti, kad būtų sukurtas labai reikalingas kontrastas tarp jų ir teksto:

vaizdo įvynioklis:užveskite pelės žymeklį > img.Blur {
filtras: sulieti(5px)
}

Dabar, kai užvedate pelės žymeklį virš vaizdo, matote, kad jis tiesiog išsilieja. Galite padidinti pikselių reikšmę, kad vaizdų suliejimas būtų ryškesnis ir taip būtų daugiau kontrasto tarp jo ir teksto.

Kitų efektų pridėjimas

Kiti efektai yra teksto slinkimas iš kairės, vaizdo mastelio keitimas ir pilkos spalvos tonų pridėjimas prie vaizdo. Štai kodas, skirtas visiems trims efektams pasiekti:

.vaizdo įvynioklis > .turinys.slyskite į kairę {
transformuoti: išverstiX(100%)
}
.vaizdo įvynioklis:užveskite pelės žymeklį > .turinys.slyskite į kairę {
transformuoti: išverstiX(0%)
}
.vaizdo įvynioklis:užveskite pelės žymeklį > img.pilka {
filtras: pilkos spalvos(1)
}
.vaizdo įvynioklis:užveskite pelės žymeklį > img.Blur {
filtras: sulieti(5px)
}
.vaizdo įvynioklis:užveskite pelės žymeklį > img.padidinti {
transformuoti: skalė(1.1)
}

Išsaugokite failą, tada eikite į naršyklę ir užveskite pelės žymeklį ant kiekvieno vaizdo. Turėtumėte pamatyti skirtingus efektus.

Norėdami užbaigti įstumiamus efektus, galite sukurti dar tris vaizdų paketus, kurių kiekviename yra vaizdas ir tekstas. Kiekviena teksto dalis turi klasės pavadinimą slydimas aukštyn, nuslinkti žemyn, arba šiek tiek dešinėn. Tada įvestumėte tinkamą vertę pikselis, em arba rem, viduje transformuoti () funkcija sukurti visus tris efektus.

CSS tinklelis ir „Flexbox“.

CSS Grid ir Flexbox yra dvi funkcijos, leidžiančios sukurti fantastiškus svetainės maketus. Galite lengvai sukurti beveik bet kokį norimą išdėstymą ir tinkinti eilutes bei stulpelius pagal savo skonį. Pagal numatytuosius nustatymus stulpeliai taip pat bus atsakingi. Sužinoję, kada naudoti vieną, o ne kitą, galėsite tapti geriausiu CSS kūrėju.