10 CSS bibliotekų, skirtų geresniam vaizdų judėjimo efektui

Naudotojų nuoma lengvai ir aiškiai žinoti, kurią tinklalapio dalį galima spustelėti yra svarbi UX dizaino dalis. Senas, bet auksas, kaip tai padaryti, buvo pakeisti teksto spalvą ir pabrėžti. Šiandien, su CSS, yra daug daugiau būdų, kaip pasiekti hover efektus, ypač vaizdams.

Dabar kūrėjai gali pridedant pereinamojo laikotarpio efektus arba animaciją, kai įsijungia svyruojantis įvykis. Mes žiūrime į kryptinius skaidres, padidiname skirtingus greičius, išnykimą ir išnykimą, šarnyrinius efektus, prožektorius atskleidžia, wobbles, bounces ir daugiau.

Šiame rinkinyje yra daugiau kaip 250 svyravimų efektų įkvėpti jus. Taip pat galite pasiimti kodą iš šaltinio.

Vaizdo slinkimo efektai (16 efektų)

Šiame puslapyje rasite gražią 16 hover vaizdų efektų kolekciją su antraštėmis. Užfiksuokite kiekvieno efekto HTML ir CSS kodą, paspaudę virš vaizdų, tada spustelėdami Rodyti kodą.

„Image Caption Hover“ animacija (4 efektai)

Čia yra 4 vėsios antraštės animacijos, kurios rodomos, kai vienas paslepia vaizdą. Poveikis yra sukurtas naudojant grynus CSS3 perėjimus ir transformuojant, o ne „JavaScript“, kad padidintumėte našumą naršyklėje.

iHover (35 efektai)

„iHover“ yra „CSS3“ sukurtų hover efektų rinkinys. Yra 20 apskritimo svyravimo efektų ir 15 kvadratinių hover efektų. Norėdami naudoti efektus, turėsite parašyti HTML žymėjimą ir įtraukti CSS failus.

Vaizdas Hover (44 efektai)

Šioje bibliotekoje yra 44 efektai, atlikti su grynuoju CSS. Kai kurie iš šių efektų yra išblukimas, stumdymas, skaidrės, vyriai, atskleidimai, priartinimas, neryškumas, sulankstymai, raukšlės ir langinės įvairiomis kryptimis. Yra išplėstas 216 efektų variantas, kurį galima įsigyti už € 14.

Hover Effect Idėjos (30 efektų)

Šis „Codrop“ sukurtas demo vaizdas suteikia jums įkvėpimo, kai pereinate tarp vaizdų ir antraščių. Iš viso yra 30 efektų dviem rinkiniais su vadovais ir šaltinio kodu.

Hover CSS (108 efektai)

„Hover CSS“ leidžia jums pridėti efektus bet kuriam elementui, pvz., Mygtukui, nuorodai ar vaizdui. Poveikis apima 2D perėjimus, fono perėjimus, sieną, šešėlį ir švytėjimą, ir dar daugiau. Biblioteka yra prieinama CSS, Sass ir LESS.

Animatizmas (100+ efektai)

Yra daugiau nei 100 vaizdų slinkimo animacijų į mygtukus, perdangas, detales, antraštes, atvaizdus ir socialinės medijos mygtukus. Visus efektus palaiko CSS3.

Antraštė Hover Effect (7 efektai)

Šioje kolekcijoje yra 7 įvairūs efektai. Visi perėjimai atrodo tikrai gražūs ir lygūs. Eikite į pamokų skyrių, kad sužinotumėte, kaip taikyti šiuos efektus savo projektui.

CSS Image Hover efektai (15 efektų)

Paprastų hover efektų rinkinys, pvz., Priartinimas, skaidrė, pasukimas, pilka skalė, neryškumas, neskaidrumas ir kiti pagrindiniai efektai. Šiuos efektus galite naudoti pridedant CSS klasę prieš jūsų skaičius žyma.

Kryptis žino 3D judėjimo efektas

Tai super atvėsti efektas, kuris aptiks jūsų paskutinį pelės judėjimą. Vaizdo antraštės bus atidarytos iš vienos iš keturių krypčių pagal paskutinę žymeklio padėtį.

Hover animacija

Čia yra UNIQLO įkvėpta pasienio judėjimo animacija. Užvykus įvykiui, vaizdo riba taps animuota.

Plytelės su animuotu slankikliu

Vienas iš plytelių dizaino, tai yra lėtas priartinimas, skaidres, „pop-ins“, tamsus perdangos tarp kitų.

SVG klipas - „Path Hover Effect“

Itin nuostabus rentgeno spindulių prožektoriaus vaizdas, veikiantis SVG klipas ir CSS perėjimai. Veikia puikiai „Chrome“, „Opera“ ir „Safari“.