5 manieren om makkelijk animatie toe te voegen aan je website header image

5 manieren om makkelijk animatie toe te voegen aan je website

zondag 28 april 2019 ·Leestijd: 5 minuten
contacteer auteur:

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 E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º