no.hideout-lastation.com
Paradis For Designere Og Utviklere


Hvordan lage animasjoner og overganger med Motion UI

Animasjoner og overganger tillater designere å visualisere endring og skille mellom innhold. Animasjoner og overganger er bevegelige effekter som hjelper brukere å gjenkjenne når noe endres på nettstedet, for eksempel de klikker på en knapp og et nytt stykke informasjon vises på skjermen. Å legge til bevegelse til apper og nettsteder forbedrer brukeropplevelsen, da det gir brukerne mulighet til å gi mening på en mer intuitiv måte .

Vi kan lage animasjoner og overganger enten fra grunnen av eller ved hjelp av biblioteker eller rammer. Gode ​​nyheter for oss, frontend folk, er at Zurb, skaperen av Stiftelsen, i oktober i oktober åpnet Motion UI, animasjons- og overgangsbiblioteket basert på Sass.

Den ble opprinnelig bunket med Foundation for Apps, og nå, for den frittstående utgivelsen, fikk den en revolusjon, inkludert et animasjonskøysystem og fleksible CSS-mønstre . Motion UI styrer også enkelte komponenter i Foundation-rammeverket, for eksempel Orbit-skyveknappen, Toggler-bryteren og Reveal Modal, så det er et ganske robust verktøy.

Starter

Selv om Motion UI er et Sass-bibliotek, trenger du ikke nødvendigvis å bruke det med Sass, da Zurb gir utviklere et praktisk startpakke som bare inneholder kompilert CSS. Du kan laste den ned fra Motion UIs hjemmeside, og raskt begynne å prototype ved å bruke forhåndsdefinerte CSS animasjon og overgangsklasser.

Startpakken inneholder ikke bare Motion UI, men også Foundation Framework, som betyr at du kan bruke Foundation grid og alle de andre funksjonene til Foundation for Sites hvis du vil.

Startpakken leveres også med en index.html fil som lar deg raskt teste rammen.

Hvis du trenger mer sofistikerte justeringer og ønsker å utnytte Motion UIs kraftige Sass mixins, kan du installere den fullstendige versjonen som inneholder kilde. .scss filer med npm eller Bower.

Motion UIs dokumentasjon er foreløpig halvfabrikert. Du kan finne den her på Github, eller bidra til det hvis du vil.

Rask prototyping

For å starte prototyping, kan du redigere index.html filen til startpakken, eller lage din egen HTML-fil. Du kan bygge oppsettet ved hjelp av Foundation grid, men Motion UI kan også brukes som et frittstående bibliotek uten Foundation Framework.

Det er 3 hovedtyper av forhåndsdefinerte CSS-klasser i Motion UI:

  1. Overgangsklasser - gjør det mulig å legge til overganger, for eksempel glidende, fading og hengselvirkninger til et HTML-element.
  2. Animasjonsklasser - gjør det mulig å bruke forskjellige rystelser, wiggling og spinning effekter
  3. Modifierings klasser - samarbeide med både overgangs- og animasjonsklasser, og de lar deg justere hastigheten, timingen og forsinkelsen av en bevegelse.
Bygg HTML-koden

Det gode med forhåndsdefinerte CSS-klasser er at de ikke bare kan brukes som klasser, men også som andre HTML-attributter. For eksempel kan du legge dem til value attributtet til

I kodebiten nedenfor valgte jeg dette sistnevnte alternativet for å skille adferd og modifikator klasser . Jeg brukte egenskapene til slow og ease modifikatorer som klasser, og opprettet et tilpasset data-animation for scale-in-up overgangen. Click me knappen er ment å utløse effekten.

Tilpass SoundCloud Audio Player med ToneDen SDK

Tilpass SoundCloud Audio Player med ToneDen SDK

Audio streaming har eksistert på Internett siden 1990, og det er ikke mange populære lyd streaming plattformer å velge mellom nå. En av de mest populære er SoundCloud som har noen distinkte fordeler over sine konkurrenter, inkludert å være enkel å legge inn.Mens den innebygde spilleren er veldig brukervennlig og responsiv - du kan sette den på sidelinjen, på et innlegg eller en hjemmeside - du kan begrense når det gjelder å tilpasse spilleren. Du kan bar

(Tekniske og design tips)

Spectre.css - Lett Flexbox-basert Responsive CSS Framework

Spectre.css - Lett Flexbox-basert Responsive CSS Framework

Hvis du vil dykke inn i flexbox-oppsett, er det nå den beste tiden å starte. Moderne nettlesere aksepterer endelig flexboxegenskaper og flere utviklere kommer inn i handlingen.Men hvorfor begynner du fra bunnen av når du kan bygge på gjenbrukbar kode ? Spectre.css er en av de beste rammer for å begynne å bruke hvis du er ny til flexbox.Dette

(Tekniske og design tips)