typeit Codonist logo

index.html

<div id="loader" class="loader">
    <h1 id="codeit"></h1>
</div>

script.js

     new TypeIt('#codeit', {
         speed: 150,
         startDelay: 900,
         loop: true,
           afterComplete: (instance) => {
             //-- Will fire after the entire instance has completed typing.
             //-- NOTE: If "loop" is enabled, this will never fire.
             $('.loader').fadeOut();
         },
     })
         .type('<em class="c-braces" style="margin-right: 6px;">{{</em><em class="c-braces">}}</em>')
         .pause(500)
         .delete(2)
         .pause(300)
         .type('<em>NAV1</em>')
         .pause(750)
         .delete(1)
         .pause(750)
         .type('<em>.co.nl</em><em class="c-braces">}}</em>')
         .pause(1500).go();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/6.0.2/typeit.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Courier+Prime&display=swap');

.loader {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            z-index: 1040;
        }

        .loader h1 {
            text-align: center;
            text-transform: uppercase;
            font-weight: 700;
        }

        .loader h1 em {
            font-family: 'Courier Prime', Courier, monospace;
            font-style: normal;
        }

        .loader .c-braces {
            letter-spacing: -8px;
            vertical-align: middle;
        }

typeit-codonist-logo.markdown

typeit Codonist logo

A Pen by Nav Appaiya on CodePen.

License.