10 knižníc CSS pre lepšie efekty zobrazenia obrazu

Povoliť používateľom ľahko a jasne vedieť, ktorú časť webovej stránky je možné kliknúť je dôležitou súčasťou dizajnu UX. Starým, ale zlatým spôsobom, ako to urobiť, bolo zmeniť farbu textu a podčiarknuť ho. V dnešnej dobe s CSS existuje oveľa viac spôsobov, ako dodať efekty vznášania, najmä na obrázky.

Vývojári môžu teraz pridať prechodové efekty alebo animáciu pri spustení udalosti vznášania. Pozeráme sa na smerové diapozitívy, priblížime pri rôznych rýchlostiach, fade-in a fade-out, závesy efektov, odhalenie reflektorov, wobbles, skákanie a ďalšie.

V tejto kompilácii sú viac ako 250 efektov vznášania inšpirovať vás. Môžete tiež vyzdvihnúť kód pri zdroji.

Obrazovkové efekty (16 efektov)

Na tejto stránke nájdete peknú zbierku efektov s 16 titulkami. Uchopte kód HTML a CSS pre každý efekt tak, že prejdete kurzorom myši nad obrázky a potom kliknete Zobraziť kód.

Animácia nadpisu animácie nadpisu obrázka (4 efekty)

Tu sú 4 animácie s nádhernými titulkami, ktoré sa spúšťajú, keď sa jeden pohybuje nad obrázkom. Efekty sú vytvorené s čistým prechodom a transformáciou CSS3 a bez JavaScript na zvýšenie kompatibility medzi prehliadačmi.

iHover (35 efektov)

iHover je zbierka efektov vznášania s pohonom CSS3. Existuje 20 efektov vznášania kruhov a 15 štvorcových efektov vznášania. Ak chcete použiť efekty, budete musieť napísať nejaké označenie HTML a obsahovať súbory CSS.

Obrázok presuňte (44 efektov)

Táto knižnica obsahuje 44 efektov vytvorených s čistým CSS. Niektoré z účinkov zahŕňajú miznutia, tlaky, diapozitívy, závesy, odhalenia, priblíženia, rozostrenie, preklopenie, záhyby a uzávery vo viacerých smeroch. K dispozícii je rozšírená verzia 216 efektov, ktoré je možné zakúpiť za € 14.

Nápady s efektom vznášania (30 efektov)

Tento obrazový hover demo od Codrop vám ponúka inšpiráciu pri hladkých prechodoch medzi obrázkami a titulkami. Na dvoch súboroch s tutoriálmi a zdrojovým kódom je celkovo 30 efektov.

Podržte CSS (108 efektov)

Hover CSS umožňuje pridávať efekty vznášania sa na ľubovoľný prvok, napríklad tlačidlo, odkaz alebo obrázok. Účinky zahŕňajú 2D prechody, prechody na pozadí, hranice, prechody Shadow a Glow a ďalšie. Knižnica je k dispozícii v CSS, Sass a LESS.

animatizmus (100 efektov)

Existuje viac ako 100 animácií pohybujúcich sa záberov na tlačidlá, prekryvy, detaily, titulky, obrázky a tlačidlá sociálnych médií. Všetky efekty sú napájané pomocou CSS3.

Titulok efekt presmerovania (7 efektov)

V tejto zbierke je 7 rôznych efektov. Všetky prechody vyzerajú veľmi pekne a hladko. Prejdite do sekcie tutorial, kde sa dozviete, ako tieto efekty aplikovať na váš projekt.

CSS efektov pre pohybovanie obrazu (15 efektov)

Zbierka jednoduchých efektov vznášania, ako sú zoom, posúvanie, otáčanie, šedá stupnica, rozmazanie, nepriehľadnosť a iné základné efekty. Tieto efekty môžete použiť pridaním triedy CSS pred vašou figúra štítok.

Smerový vzhľad 3D efekt vznášania

Jedná sa o super chladný vznášací efekt, ktorý detekuje vaše posledné pohyby myši. Titulky obrázkov sa otvoria v jednom zo štyroch smerov na základe vašej poslednej pozície kurzora.

Animácia kurzora

Tu je hraničná animácia animácie inšpirovaná UNIQLO. Po udalosti vznášania sa okraj obrázka oživí.

Dlaždice s animovaným pohybom myši

Jeden pre dizajny dlaždíc, to je pomalý zoom, diapozitívy, pop-iny, tmavé prekrytie medzi ostatnými.

SVG Clip-Path Hover Effect

Super úžasný efekt röntgenového reflektora, ktorý funguje na SVG clip-path a prechodov CSS. Funguje v Chrome, Opera a Safari.