5 manieren om makkelijk animatie toe te voegen aan je website
We weten allemaal dat animaties de beste blikvangers zijn. Zo trekken de LED-billboards langs de snelweg en de digitale posters op het station zeer effectief onze aandacht. Ook op het web zorgt animatie er voor dat je website aantrekkelijker wordt. Animatie is daarnaast ook een mooie manier om interactie en hiërarchie te communiceren. Het implementeren van animaties kan ingewikkeld lijken, maar vrees niet! Er zijn talloze manieren om makkelijk animatie toe te voegen aan je website. In dit artikel vind je 5 manieren om dit te doen.
CSS â:hoverâ combineren met âtransitionâ
Het is in CSS tegenwoordig heel erg makkelijk om animatie toe te voegen, zeker met de :hover pseudo-selector. Door het CSS kenmerk âtransitionâ daarmee te combineren kun je gemakkelijk effectieve animaties genereren. Bijvoorbeeld:
Mouseover me
.voorbeeld1 {
padding: 10px 25px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
background-color: #000;
border: 1px solid #000;
transition: all 0.3s ease-in-out;
margin: 20px 0;
display: inline-block;
}
.voorbeeld1:hover {
color: #000;
background-color: #fff;
transform: scale(1.05);
}
Hover.css
Hover.css is een los css-bestand dat je kunt aanroepen om zeer gemakkelijk mouseover-animaties toe te voegen aan buttons. Je hoeft dan enkel een klasse zoals âhvr-pulseâ toe te voegen aan je HTML-element en de css wordt automatisch toegepast. Makkelijker dan dit wordt het niet!
Animatie-bibliotheken
Ook zijn er CSS/Javascript-bibliotheken beschikbaar om het animeren van elementen op je site makkelijk te maken. Denk hierbij aan animate.css en anime.js. Hierbij gebruik je specifieke css-klassen in je HTML-elementen of roep je javascript aan om je animaties te creëren.
Animatie generatie tools
Als je meer geavanceerde animaties wilt maken dan kun je ook gebruik maken van animatie generatie tools op het web, zoals animista.net. Hier zie je een voorbeeld van wat ik met Animista heb kunnen maken:
Mouseover me
.voorbeeld2 {
position: relative;
height: 220px;
width: 220px;
display: inline-block;
position: relative;
}
.flip-diagonal-2-br {
width: 200px;
height: 200px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 24px;
color: #fff;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.flip-diagonal-2-br .front {
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: blue;
position: absolute;
padding: 75px 20px 20px 20px;
box-sizing: border-box;
z-index: 20;
}
.flip-diagonal-2-br .back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 85px 20px 20px;
background-color: orange;
transform: rotate3d(-1,1,0,-180deg);
backface-visibility: hidden;
z-index: 10;
-webkit-box-direction: normal;
}
.voorbeeld2:hover .flip-diagonal-2-br {
-webkit-animation: flip-diagonal-2-br 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: flip-diagonal-2-br 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes flip-diagonal-2-br {
0% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
100% {
-webkit-transform: rotate3d(-1, 1, 0, 180deg);
transform: rotate3d(-1, 1, 0, 180deg);
}
}
@keyframes flip-diagonal-2-br {
0% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
100% {
-webkit-transform: rotate3d(-1, 1, 0, 180deg);
transform: rotate3d(-1, 1, 0, 180deg);
}
}
Automatisch afspelende video-achtergronden
Als je al een bedrijfsvideo hebt, of als je comfortabel bent met het gebruiken van stock footage dan kun je ook gebruik maken van automatisch afspelende video-achtergronden. Dit is snel al veel indrukwekkender dan een stilstaand beeld. Zie dmwheelsystems.com voor een voorbeeld hoe wij dit voor één van onze klanten hebben gerealiseerd.
Hopelijk helpt dit artikel je te starten met het toevoegen van animatie op je website. Houdt er rekening mee dat je niet teveel animatie toevoegt aan je site, het kan snel te druk en onoverzichtelijk worden.
Ben jij al een expert in het maken van animaties voor op het web? En ben jij op zoek naar een werkplek waar jij je creativiteit kan uitten? Dan is deze vacature zeer interessant voor jou!