Home
Programming

Ken Burns Effect Pure HTML and CSS

Syiainfoku make a Ken Burns Effect Pure HTML and CSS
Ken Burns Effect Pure HTML and CSS

Hello !

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Ken Burns Effect no JavaScript pure HTML and CSS.

Ok, let's get started

Preview Ken Burns Effect

Preview Ken Burns Effect

More or less the result will be like in the image above.

Source Code and Brief Explanation

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ken Burns Effect | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div class="wrapper">
        <div class="img-box">
            <div class="single-img"></div>
            <h1>beautiful</h1>
        </div>
    </div>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    display: table;
}

.img-box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.wrapper h1 {
    position: relative;
    color: #e8ebff;
    text-shadow: 0px 5px 20px #6287ff;
    text-align: center;
    font-size: 90px;
    /* text-transform: uppercase; */
    font-weight: 300;
    letter-spacing: 3px;
    z-index: 4;
}

.single-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: url(../images/simple2.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    animation: animate ease-in-out 40s 0s infinite;
    transform: translate3d(0, 0, 0);
    z-index: 0;
}

@keyframes animate {
    15% {
        transform: scale(2);
        filter: blur(3px);
    }

    30% {
        transform: scale(1);
        filter: blur(0);
        background: url(../images/simple3.jpg);
    }

    85% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
        background: url(../images/simple2.jpg);
    }
}

That's it, now you have successfully created a Ken Burns Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment