nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Bouw coole CSS-animaties gemakkelijk met Animista

Er zijn talloze CSS-animatie web-apps online . Maar zeer weinigen vergelijken met het detailniveau en gebruiksgemak dat u bij Animista krijgt .

Met deze gratis webapp kun je met één klik op de knop aangepaste CSS-animaties genereren . U kiest tussen vooraf ontworpen bewegingen, zoals dia's, transformaties, schommels en zelfs schaduwdruppelanimaties.

Nadat u uw animatie hebt gemaakt, kunt u de code exporteren net zoals met andere CSS-generators. Behalve, deze code is veel gemakkelijker om mee te werken en komt zelfs met een ingebouwde minifier tool .

De interface kan in het begin verwarrend lijken, maar dat is alleen vanwege het aantal opties dat je hebt!

U bouwt aangepaste animaties volgens drie hoofdstappen en gebruikt de interface van boven naar beneden :

  1. Kies een bewegingsstijl (schommel, schuif, flip-schaal) uit de cirkels bovenaan
  2. Pas het aan met verschillende soorten bewegingen eronder
  3. Bewerk je animatie-opties in de zwevende linkerzijbalk van de optiebalk

Door dit proces kun je de totale duur van de animatie, de versnellingsstijl, de vertraging, vrijwel alles veranderen. En het werkt allemaal via pure CSS3, wat het nog indrukwekkender maakt.

Let ook op de allerbeste navbar, je kunt zelfs kiezen tussen verschillende soorten animatiedoelstijlen .

De standaardinstelling is "standaard" en kan vrijwel overal werken (zweven, klikken of directe animatie). Andere doelen zijn paginatekst, achtergrondanimaties en zelfs aangepaste ingangsanimaties om een ​​verborgen pagina-element in beeld te brengen.

Ik vind vooral de "attention" -link bovenaan die coole shake en jitter-effecten heeft voor knopstijlen. Deze werken geweldig op CTA-knoppen om de aandacht te trekken en gebruikersinteracties aan te moedigen.

Als u klaar bent met het maken van aanpassingen, klikt u op het pictogram van de kleine haakjes in de rechterbovenhoek van het voorbeeldvenster.

Hiermee wordt een nieuwe pagina in beeld gebracht met uw volledige CSS-animatieklasse, samen met de hoofdframes . Met optionele functies kunt u de code verkleinen en de automatische prefixer opnemen die oudere webbrowsers ondersteunt.

Ik heb tonnen aangepaste CSS-animatietools gebruikt en zonder twijfel is Animista de meest veelzijdige tool die er is. Het is in eerste instantie helemaal gratis en een beetje ingewikkeld, maar als je de interface eenmaal begrijpt, is dit verreweg de beste generator die je kunt gebruiken.

Om het eens te proberen, gaat u naar de startpagina en klikt u op "Probeer mij". Je kunt ook je gedachten en complimenten delen met de maker van de web-app @ ana108.

10 Interessante gesprekken Ontwerpers moeten uitkijken

10 Interessante gesprekken Ontwerpers moeten uitkijken

Ontwerpconferenties zijn leuk. Ze zitten vol energieke, creatieve mensen die ideeën uitwisselen en briljante gesprekken voeren. Maar deze evenementen kunnen ook vrij duur zijn. Gelukkig zijn er veel geweldige content van 's werelds beste webconferenties online beschikbaar . Het enige dat u nodig hebt, is enige tijd uit uw drukke schema halen om te kijken en luisteren naar wat de experts moeten delen .

(Technische en ontwerptips)

Google-app voor Android komt nu met een offline-modus

Google-app voor Android komt nu met een offline-modus

Als u veelvuldig gebruikmaakt van de Google-app op uw Android-apparaat, is het wellicht interessant om te weten dat Google momenteel een update implementeert. Deze update bevat een offline-modus waarmee de app kan werken, zelfs wanneer uw internetverbinding te onregelmatig is .Voordat u te opgewonden raakt, betekent de offline-modus voor de Google-app niet dat u nu Google-zoekopdrachten kunt uitvoeren zonder een internetverbinding

(Technische en ontwerptips)