3 fantastiske CSS animationseffekter, der vil opfange dine brugere
Smukt visuelt design er ikke nok mere, moderne design har brug for stor interaktion til virkelig at skille sig ud. Animationer i dine designs kan give klarhed, direkte opmærksomhed og skabe en dejlig oplevelse.
Design af interaktioner er spændende, men dyrt. Ofte tager det frem og tilbage mellem designere og udviklere at få animationer lige højre; men det behøver ikke at være sådan.
CSS-overgange giver mulighed for designere med begrænset kendskab til kode for at forbedre deres projekter med fantastiske bevægelseseffekter, der vil involvere brugere som aldrig før.
Lad os starte med noget simpelt: Flytning fra en skærm til en anden ...
Enkel visning-skyderen teknik
Du kan bygge med en teksteditor og en browser til at teste, men jeg foretrækker at bruge et værktøj som jsfiddle eller codepen.
Byg et grundlæggende layout noget som dette:
Du skal bruge en 'skærm' og derefter en 'skyder' inde i skærmen. Glideren strækker sig ud over kanten af skærmen og holder mockup-billederne.
For at opnå dette skal du sikre dig, at du tilføjer overløb: skjult til .screen div.
Din CSS vil se sådan ud:
.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 erklæring i CSS er, hvad der styrer skyderens position, det bevæger .slider div venstre ved 320px afslører det andet billede.
Her er jsfiddlen med hele koden.
Med lidt kreativitet kan du virkelig køre med denne enkle teknik og skabe nogle kloge animationer. Ting begynder virkelig at blive interessante, når du kombinerer effekter. For eksempel: Jeg genskabte Twitter's "swipe-to-reveal profil" fra deres mobil app ved hjælp af en meget lignende 'skyder' tilgang.
3D transformer
Børste op på din 3d transformerer hvis du har brug for det, fordi de giver en fantastisk visuel effekt.
Bruger -webkit-transform: ejendom, kan vi behandle browseren som et 3D-rum og lave nogle animationer med dybde. IOS7 bruger især 'single space' metaforen i sine native apps. Også 3D-transformer er meget nyttige til at skabe 'hoppende' eller 'popping' animationer.
Jeg brugte det samme :hover taktik fra vores tidligere eksempel og tilføjede nogle 3D-transformer for at skabe denne effekt:
Brug af jQuery og JavaScript
Indtil videre har vi kun set på CSS :hover effekter til at producere animationer. Med jQuery kan vi bruge click() begivenheder at udpege addClass() og removeClass() på elementer. Dette giver os en stor fleksibilitet til at gøre hvad slags skøre animationer vi ønsker.
Nedenfor har jeg en funktion kaldet kaskade , som anvender open klasse til hver af 4 menupunkter i 0.15s intervaller. Det open klassen giver ikonerne opacity:1; og left:0; hvornår de var på opacity:0; og left:-50px . Dette skaber en legende åbningseffekt for menuen. Eksperiment for dig selv inde i jsfiddle.
Denne sidste er et ret ekstremt eksempel, men det går bare for at vise, hvad der er muligt med dette prototypesystem:
En gang til, her er jsfiddlen.
Ved at designe dine egne enkle animationer, sparer du dig selv og din udviklingsteam meget tid og energi. Med CSS kan du eksperimentere med animationer og sende dine ingeniører levende, vejrtrækning, bevægelige eksempler. Alt det kræver for at bringe dine mockups til liv er en lille smule kode.