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 meHello there!

.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!