3 fantastiske CSS animasjonseffekter som vil fange brukerne dine
Vakker visuell design er ikke nok mer, moderne design trenger stor interaksjon for å virkelig skille seg ut. Animasjoner i designene dine kan gi klarhet, direkte oppmerksomhet og skape en herlig opplevelse.
Å designe interaksjoner er spennende, men kostbart. Ofte tar det frem og tilbake mellom designere og utviklere for å få animasjoner akkurat; men det trenger ikke å være slik.
CSS-overganger gir mulighet for designere med begrenset kjennskap til kode for å forbedre sine prosjekter med flotte bevegelseseffekter som vil involvere brukere som aldri før.
La oss starte med noe enkelt: å flytte fra en skjerm til en annen ...
Enkel visning-skyve teknikk
Du kan bygge med en tekstredigerer og en nettleser for å teste, men jeg foretrekker å bruke et verktøy som jsfiddle eller codepen.
Bygg en grunnleggende layout noe slikt:
Du trenger en 'skjerm' og deretter en 'glidebryter' inne i skjermen. Skyvekontrollen strekker seg utover kanten av skjermen, og holder mockup-bildene.
For å oppnå dette må du sørge for at du legger til overløp: skjult til skjermbildet.
Din CSS vil se slik ut:
.screen {overflow:hidden;width:320px;height:568px;}.slider {position:relative;float:left;height:568px;width:700px;left:0;-webkit-transition:all 0.5s ease-in-out;}.slider img {position:relative;float:left;height:568px;width:320px;}.screen:hover .slider {left:-320px;}Den endelige setningen i CSS er hva som kontrollerer posisjonen til skyvekontrollen, den beveger divisjonen .slider div etter 320px som avslører det andre bildet.
Her er jsfiddle med all koden.
Med litt kreativitet kan du virkelig kjøre med denne enkle teknikken og skape noen smarte animasjoner. Ting begynner virkelig å bli interessant når du kombinerer effekter. For eksempel: Jeg gjenskapte Twitters "swipe-to-reveal-profil" fra mobilappen deres ved hjelp av en veldig lignende "glidere" -tilnærming.
3D-transformer
Børst opp på din 3d transformerer hvis du trenger det, fordi de gir en fantastisk visuell effekt.
Bruker -webkit-transform: eiendom, kan vi behandle nettleseren som et 3D-rom og lage noen animasjoner med dybde. IOS7 bruker spesielt "single space" metaforen i sine native apps. Også 3D-transformasjoner er svært nyttige for å lage "hoppende" eller "popping" animasjoner.
Jeg brukte det samme :hover taktikk fra vårt tidligere eksempel og lagt til noen 3D-transformasjoner for å skape denne effekten:
Bruk av jQuery og JavaScript
Så langt har vi bare sett på CSS :hover effekter for å produsere animasjoner. Med jQuery kan vi bruke click() hendelser å utpeke addClass() og removeClass() på elementer. Dette gir oss en stor fleksibilitet for å gjøre hva slags sprø animasjoner vi vil ha.
Nedenfor har jeg en funksjon som heter kaskade , som gjelder open klasse til hver av 4 menyelementer i 0,15 s intervaller. De open klassen gir ikonene opacity:1; og left:0; når før de var på opacity:0; og left:-50px . Dette skaper en lekfull åpningseffekt for menyen. Forsøke for deg selv innenfor jsfiddle.
Denne siste er et ganske ekstremt eksempel, men det går bare for å vise hva som er mulig med dette prototypesystemet:
En gang til, her er jsfiddle.
Ved å designe dine egne enkle animasjoner, sparer du deg selv og utviklingslaget ditt mye tid og energi. Med CSS kan du eksperimentere med animasjoner og sende dine ingeniører levende, pustende, bevegelige eksempler. Alt som trengs for å bringe mockups til liv er en liten kodekode.