Movie Effect for Text in HTML Page

Written by @kerixa 30 March 2021

To differentiate your website from other websites, you must use special styles for different sections of the site. The following code provides a special style for displaying your texts and headlines. Old movie playback style is located in the background of your text in a HTML page, which makes it nostalgic.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
.main-content {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    height: 100vh;
    background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
    color: #fff;
    text-align: center;
}

.vignette {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 150px 20px black;
    mix-blend-mode: multiply;
    -webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
    -moz-animation: vignette-anim 3s infinite; /* Fx 5+ */
    -o-animation: vignette-anim 3s infinite; /* Opera 12+ */
    animation: vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .15;
}

.line {
    position: absolute;
    height: 100%;
    width: 1px;
    opacity: 0.1;
    background-color: #000;
}

.titleCont {
    position: relative;
}

.main-title {
    padding: .3em 1em .25em;
    font-weight: 400;
    font-size: 40px;
    color: white;
    font-family: 'Bellefair', serif;
    position: relative;
    line-height: 1.3;
    white-spacing:
}

.overTitle {
    position: absolute;
    top: 0;
    left: 0;
}

.dot {
    width: 3px;
    height: 2px;
    background-color: white;
    position: absolute;
    opacity: 0.3;
}


@-webkit-keyframes vignette-anim {
0%, 100% {
    opacity: 1;
}

50% {
    opacity: 0.7;
}
}

@-moz-keyframes vignette-anim {
0%, 100% {
    opacity: 1;
}

50% {
    opacity: 0.7;
}
}

@-o-keyframes vignette-anim {
0%, 100% {
    opacity: 1;
}

50% {
    opacity: 0.7;
}
}

@keyframes vignette-anim {
0%, 100% {
    opacity: 1;
}

50% {
    opacity: 0.7;
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Bellefair" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<main role="main" class="main-content" id="main-content">
    <div class="titleCont">
        <h1 class="main-title" id="main-title">
            "Here, in the forest,<br><span style="padding-left:100px">dark and deep,</span><br>
            <span style="padding-right:110px">I offer you,</span><br><span style="padding-left:-20px">eternal sleep."</span>
        </h1>
    </div>
    <canvas id="noise" class="noise"></canvas>
  <div class="vignette"></div>
</main>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://www.htmlbestcodes.com/files/movie1.js'></script>
<script src='https://www.htmlbestcodes.com/files/movie2.js'></script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300