10 CSS-biblioteker til bedre billedflyttereffekter
Lad brugere let og tydeligt vide, hvilken del af websiden der kan klikkes på er en vigtig del af UX design. Den gamle, men guld måde at gøre det på var at ændre tekstfarven og understrege den. I dag, med CSS, er der mange flere måder at levere sveveffekter på, især på billeder.
Udviklere kan nu Tilføj overgangseffekter eller animation, når en svinghændelse udløses. Vi kigger på retningssider, zoomer i forskellige hastigheder, fade-ins og fade-outs, hængsel effekter, spotlight afslører, wobbles, hopper og mere.
I denne sammenstilling er der mere end 250 svæveffekter at inspirere dig. Du kan også hente koden ved kilden.
Billedflyttereffekter (16 effekter)
På denne side finder du en dejlig samling af 16 hover billeder effekter med billedtekster. Grib HTML og CSS-koden for hver effekt ved at svinge over billederne og derefter klikke Vis kode.
Billedtekst Hover Animation (4 effekter)
Her er 4 seje billed animationer, der kører, når man svæver over billedet. Virkningerne er bygget med rene CSS3 overgange og transformere, og ingen JavaScript, for at øge kompatibiliteten på tværs af browseren.
iHover (35 effekter)
iHover er en samling af svæveffekter, der drives af CSS3. Der er 20 cirkelhvirvelvirkninger og 15 kvadrathøjdeffekter. For at bruge effekterne skal du skrive nogle HTML-markeringer og inkludere CSS-filerne.
Image Hover (44 effekter)
Dette bibliotek indeholder 44 effekter lavet med rent CSS. Nogle af virkningerne omfatter fades, skubber, glider, hængsler, afslører, zoomer, blurs, flips, folder og skodder, i flere retninger. Der er en udvidet version af 216 effekter, der kan købes til € 14.
Hover Effect Ideas (30 effekter)
Denne image hover demo lavet af Codrop, giver dig inspiration, når du foretager glatte overgange mellem billeder og dets billedtekster. Der er i alt 30 effekter på to sæt med vejledninger og kildekoden.
Hover CSS (108 effekter)
Hover CSS giver dig mulighed for at tilføje hover-effekter til ethvert element, såsom en knap, link eller billede. Virkningerne omfatter 2D overgange, baggrundsovergange, grænse, skygge og glød overgange og meget mere. Biblioteket er tilgængeligt i CSS, Sass og LESS.
animatisme (100 + effekter)
Der er mere end 100 billedhugger animationer til knapper, overlejringer, detaljer, billedtekster, billeder og sociale medier knapper. Alle effekter er drevet af CSS3.
Caption Hover Effect (7 effekter)
Der er 7 forskellige effekter i denne samling. Alle overgange ser rigtig flot og glat ud. Gå til vejledning sektionen for at lære at anvende disse effekter på dit projekt.
CSS Image Hover Effects (15 effekter)
En samling af simple svæveffekter såsom zoom, dias, roter, grå skala, sløring, opacitet og andre grundlæggende effekter. Du kan bruge disse effekter ved at tilføje CSS-klassen før din figur tag.
Retningsbevidst 3D-svæveffekt
Dette er en super cool svæveffekt, der registrerer din sidste musbevægelse. Billedteksterne åbnes fra en af fire retninger baseret på din sidste markørposition.
Hover Animation
Her er en animation med grænsevægge inspireret fra UNIQLO. Ved en svinghændelse bliver billedets kant animeret.
Fliser med animeret svømmer
En til fliser design, denne har slow zoom, dias, pop-ins, dimmet overlay blandt andre.
SVG-klip-path-overflytningseffekt
En super awesome x-ray spotlight-billedhugger-effekt, der drives af SVG clip-sti og CSS overgange. Fungerer fint i Chrome, Opera og Safari.
