3 Bedövning CSS Animation Effekter som kommer att fånga dina användare
Vacker visuell design räcker inte längre, modern design behöver stor interaktion för att verkligen sticka ut. Animationer i dina mönster kan ge tydlighet, direkt uppmärksamhet och skapa en härlig upplevelse.
Att utforma interaktioner är spännande, men dyrt. Ofta tar det fram och tillbaka mellan designers och utvecklare att få animeringar precis rätt; men det behöver inte vara så här.
CSS-övergångar ger möjlighet till designers med begränsad kunskap om kod för att förbättra sina projekt med fantastiska rörelseeffekter som kommer att engagera användare som aldrig tidigare.
Låt oss börja med något enkelt: att flytta från en skärm till en annan ...
Enkel visningslägerteknik
Du kan bygga med en textredigerare och en webbläsare för att testa, men jag föredrar att använda ett verktyg som jsfiddle eller codepen.
Bygg en grundläggande layout något så här:
Du behöver en "skärm" och sedan en "reglage" inuti skärmen. Skjutreglaget sträcker sig bortom kanten på skärmen och håller mockup-bilderna.
För att uppnå detta måste du försäkra dig om att du lägger till överflöde: gömd till .screen div.
Din CSS kommer att se något ut så här:
.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;}Det slutliga uttalandet i CSS är det som styr glidarens position, det flyttar .slider-diven som lämnas av 320px och avslöjar den andra bilden.
Med lite kreativitet kan du verkligen springa med den här enkla tekniken och skapa några smarta animationer. Saker börjar verkligen bli intressanta när du kombinerar effekter. Till exempel: Jag skapade Twitters "swipe-to-reveal-profil" från deras mobilapp med en mycket liknande "slider" -metod.
3D-transformer
Borsta upp på din 3d omvandlar om du behöver, för att de ger en fantastisk visuell effekt.
Använda -webkit-transform: egendom, vi kan behandla webbläsaren som ett 3D-utrymme och göra några animeringar med djup. IOS7 använder sig i synnerhet av metaphoren "singelutrymme" i sina inbyggda appar. Även 3D-transformer är mycket användbara för att skapa "studsande" eller "popping" -animeringar.
Jag använde samma :hover taktik från vårt tidigare exempel och lagt till några 3D-transformer för att skapa denna effekt:
Använda jQuery och JavaScript
Hittills har vi bara tittat på CSS :hover effekter för att producera animeringar. Med jQuery kan vi använda click() händelser att utse addClass() och removeClass() på element. Detta ger oss en stor flexibilitet för att göra vad som helst galen animationer vi vill ha.
Nedan har jag en funktion som heter kaskade , som gäller open klass till var och en av 4 menyalternativ i 0,15 s intervaller. De open klassen ger ikonerna opacity:1; och left:0; när innan de var på opacity:0; och left:-50px . Detta skapar en lekfull öppningseffekt för menyn. Experiment för dig själv inuti jsfiddle.
Den här sista är ett ganska extremt exempel, men det går bara att visa vad som är möjligt med det här prototypsystemet:
En gång till, här är jsfiddle.
Genom att utforma dina egna enkla animeringar sparar du dig själv och ditt utvecklingslag mycket tid och energi. Med CSS kan du experimentera med animeringar och skicka dina ingenjörer som lever, andas, rörliga exempel. Allt som krävs för att få dina mockups till liv är en liten bit av kod.