Thomas, Divipower

Het is tegenwoordig misschien wel een van het meest gebruikte effect, het Ken Burns effect. in films, documentaires, websites en animaties wordt het veel gebruikt tegenwoordig, en terecht.

Het was de documentaire maker Ken Burns die voor het eerst gebruik maakte van een nieuwe methode. Door gebruik te maken van zoom -en verplaatsing effecten worden foto’s werkelijk tot leven gebracht.
Een afbeelding wordt omgetoverd tot een bewegende foto waarbij er over een bepaald tijdsbestek wordt in -of uitgezoomd naar een bepaalde richting.

Hieronder is een normale afbeelding weergegeven, deze afbeelding kan door middel van het Ken Burns effect tot leven worden gebracht, lees mee.

 

Een standaard afbeelding.

Een afbeelding van Pixabay

Een afbeelding op een pagina geef je speciaal weer om een impressie achter te laten. Dankzij het Ken Burns effect kunnen deze beelden op een levendige manier woorden weergegeven. We laten hieronder 4 voorbeelden zien hoe het Ken Burns effect een afbeelding levendig maakt.

 

1

Zoom in effect

2

Zoom uit effect

3

Zoom uit naar rechts effect

4

Zoom in naar rechts effect

Divipower heeft op de website van Sidecar Team #99 gebruik gemaakt van het Ken Burns effect. Bij de home pagina is gekozen voor een stoere foto waar het Ken Burns effect over heen wordt geladen. Zie hieronder een preview, neem vooral een kijkje!

Divipower voorbeeld

Bekijk hoe we voor Sidecarr Team #99 een prachtige header hebben gecreeeërd voor hun website.

Achter deze effecten zit een stukje code wat ervoor zorgt dat elke pagina de effecten weer geeft. Voor elk effect is hieronder de code weergegeven. Deze code is alleen werkend voor een Divi website maar geeft toch een zeer goede indicatie over de werking van het effect met alle variabelen.

Zoom in CSS

.kb-zoomin .et_pb_slide .et_parallax_bg {
animation: zoomin 7s forwards;
-ms-animation: zoomin 7s forwards;
-webkit-animation: zoomin 7s forwards;
-0-animation: zoomin 7s forwards;
-moz-animation: zoomin 7s forwards;

}
@keyframes zoomin{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;

}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

Zoom uit CSS

.kb-zoomout .et_pb_slide .et_parallax_bg {
animation: zoomout 7s forwards;
-ms-animation: zoomout 7s forwards;
-webkit-animation: zoomout 7s forwards;
-0-animation: zoomout 7s forwards;
-moz-animation: zoomout 7s forwards;

}

@keyframes zoomout{
0% {
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100% {
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

Zoom in naar rechts CSS

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 7s forwards;
-webkit-animation: zoomin-right 7s forwards;
-0-animation: zoomin-right 7s forwards;
-moz-animation: zoomin-right 7s forwards;

}

@keyframes zoomin-right{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}

Zoom uit naar rechts CSS

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 7s forwards;
-webkit-animation: zoomout-right 7s forwards;
-0-animation: zoomout-right 7s forwards;
-moz-animation: zoomout-right 7s forwards;

}

@keyframes zoomout-right{
0%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

Wilt u ook gebruik maken van het Ken Burns effect op uw nieuwe website?

Schrijf u in voor onze nieuwsbrief

Het is leuk om af en toe een mailtje te krijgen met leuke tips and tricks. Wees niet bang we zullen je echt niet spammen en opzeggen kan echt elk moment!

Bedankt voor het inschrijven, bekijk uw (spam)mailbox om te activeren!