Kasper

Author: kasper (page 1 of 7)

Loader animaties

Zo nu en dan krijg je als frontend developer een toffe animatie van een designer met de opdracht, dit moet in de website als loader. Soms lijkt de animatie heel eenvoudig. In dit geval was er een (lucht)bel die van rechts naar links beweegt, in eerste instantie groeit hij en daarna krimpt hij alsof deze uiteen spat.

In eerste instantie wilde we de animatie in SVG maken en dat was ook vrij snel gedaan, echter het probleem hiermee is dat we de animatie niet goed op de pagina kregen en deze niet lekker wilde schalen. Daarom hebben we gekeken naar een andere oplossing. Ik vond de animatie redelijk plat, dus heb met html/css geprobeerd de animatie na te bouwen.

Vanuit design was de animatie opgedeeld in 4 stappen:

  1. een stilstaande bel
  2. een naar rechts bewegende bel die groeit
  3. een naar rechts bewegende bel die even groot blijft
  4. een naar rechts bewegende bel die krimpt

Dit zouden dus 4 keyframes zijn, echter na beter de animatie te bestuderen bleek dat de bellen niet allemaal tegelijk bewegen. Als 3 beweegt beweegt 4 ook maar staat 2 stil. De eerste stilstaande bel is een gegeven en dus niet nodig om op te nemen in de keyframes. Zo kwam ik uit op 6 keyframes.

  1. schaal 0.5 + links 0
  2. schaal 1 + links 30%
  3. schaal 1 + links 30%
  4. schaal 1 + links 65%
  5. schaal 1 + links 65%
  6. schaal 0, links 90%

Hiermee kreeg ik de hele ‘levensloop’ van een bel voor elkaar. Een bel was natuurlijk niet genoeg dus door na elkaar liggende bellen met een vertraging te starten werd de animatie compleet.

Zie hier het resultaat:


See the Pen loader by Kasper (@kasperedeb) on CodePen
0

Angular presentatie

Afgelopen januari heb ik bij de developers meetup van Alkmaar een presentatie gegeven over Angular.


Deel 2 van het open source avontuur.

Kickstart je project met de Frontend Incubator

Je software open source maken

Ik ben sinds kort actiever geworden met open source software maken. Mijn Github activity is daardoor ook flink verhoogd. Tijdens dit avontuur heb ik het een en ander opgeschreven en gepubliceerd op Now Digital.

Hier deel 1 van de reeks:

Je software open source maken

Hands-on Google Apps for Work customisation

Ik heb een nieuwe blogpost geschreven voor Now Digital:

Zo gebruiken we bij Incentro vaak formulieren om collega’s uit te nodigen voor een meeting of evenement en kunnen we daarmee direct inventariseren wat men wil eten.We merkten echter dat vaak mensen wel ja zeiden maar geen afspraak in hun agenda zette en daardoor last minute toch niet kwamen.

Kasper – Now Digital

Lees verder op Now Digital: http://nowdigital.nl/hands-on-google-apps-for-work-customisation/

Is jouw content zichtbaar?

Ik heb een nieuwe blogpost geschreven voor Now Digital:

Veel websites hebben heel veel content en links naar subpagina’s. Verschillende afdelingen binnen je bedrijf willen graag dat hun pagina’s op zo veel mogelijk plekken staan en zo hoog mogelijk scoren.

Kasper – Now Digital

Lees verder op Now Digital: http://www.nowdigital.nl/is-jouw-content-zichtbaar/

De eerste vlucht

In de vroege morgen staat de zon laag aan de hemel. Een rode gloed straalt van over de weiden bovenop de bloemen in het veld. Het blauwe water wordt voor even rood verlicht. Vandaag is de dag dat je het voor het eerst gaat doen. De cocon is al open gebroken en de schaduw achter je is groter dan ooit tevoren. Nog een keer kijk je achterom voordat je begint. De resten vallen op de grond en je weet dat het tijd is. De damp van nog natte vleugels spettert op als je ze voor het eerst uitslaat. Zo’n eerste vlucht kost altijd wat meer maar de wereld wacht op je. Vandaag is jouw avontuur begonnen. Vaarwel mooie vlinder.

“Zonsopkomst”

Wanneer je de zon op ziet komen
Daar in de verte achter de bomen
Door het groene bladerdak
Rustig kijkend geheel op je gemak
Een vogel zingt in de verte
En zie je daar nou herten?
De serene rust is jou niet bekend
Normaal is alles wat je doet gerend
Terwijl je dit alles in je opneemt
Weet je het, dit is vreemd
Wanneer je plots ontwaakt is alles klaar
Het was maar een droom en niet waar

Thursday the 4th of December I gave a presentation at the Secret Labs AngularJS event. In case you’ve missed out the entire event is on youtube! #worldofincentro

Olderposts

Copyright © 2017 Kasper

Theme by Anders NorenUp ↑