5 manieren om makkelijk animatie toe te voegen aan je website

Geschreven door: op zondag 28 april 2019

Leestijd: 5 minuten

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!


Andere blogartikelen

  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
  • Succesvolle B2B Marketing met deze 5 Tools

    Geschreven door: op woensdag 12 augustus 2020

    Zoals mooi gevisualiseerd in het filmpje ‘The Man in the Chair’. De fundamenten onder marketing veranderen niet, de technologieën en bijbehorende tools wel. Lees hier 5 tools die wij inzetten om B2B M ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten