Ken-Burns-Effekt mit CSS

Ken-Burns Effekt für Bilder mit CSS.

Den Ken-Burns-Effekt dürfte jeder schonmal gesehen haben, auch wenn dieser nicht namentlich bekannt ist. Benannt nach Ken Burns, kommt dieser oft in Dokumentationen zum Einsatz, wenn es nur Standbilder gibt. Es ist in Zoomeffekt der in die historischen Bilder eine gewisse Bewegung reinbringt.

Wir schauen uns an, wie wir dies mit CSS umsetzen können. Das Online-Beispiel zum Ausprobieren gibt es hier.

Inhaltsverzeichnis

CSS-Code

Erreicht wird der Effekt mit folgendem CSS-Code.

<style>
    .ken-div {
        width: 100%;
        height: 50vw;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }

    .ken-div img {
        width: 100%;
        animation: move 40s ease;
        -ms-animation: move 40s ease;
        -webkit-animation: move 40s ease;
        -0-animation: move 40s ease;
        -moz-animation: move 40s ease;
        position: absolute;
    }

    @-webkit-keyframes move {
        0% {
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
            -o-transform-origin: bottom left;
            transform-origin: bottom left;
            transform: scale(1.0);
            -ms-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -o-transform: scale(1.0);
            -moz-transform: scale(1.0);
        }
        100% {
            transform: scale(1.3);
            -ms-transform: scale(1.3);
            -webkit-transform: scale(1.3);
            -o-transform: scale(1.3);
            -moz-transform: scale(1.3);
        }
    }
</style>

Die Transformation, bzw. den maximalen Zoom können wir über den Parameter “1.3” am Ende steuern, wobei 1,3 eine Vergrößerung von 30% bewirkt.

Bild einbinden

Nun binden wir das Bild ein:

<div class="ken-div">
    <img src="bild.jpg" />
</div>

Wie wir sehen wird dieses von einem DIV umschlossen, ansonsten ist es ein ganz normaler IMG-Tag.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert