Membuat Animasi Efek Mengetik Dengan CSS Dan Jquery

Membuat Animasi Efek Mengetik Dengan CSS Dan Jquery

Juragan Coding - halo para web designer kali ini juragan coding akan memberikan tutorial membuat animasi efek mengetik dengan CSS dan jquery, efek ini sering kita lihat di website yang terkena deface oleh para hacker, nah bagaimana cara membuat nya silahkan simak di bawah ini

HTML

 <p class="css-typing">saya <span data-typer-targets="chandra hamdani,owner juragan coding,hanya newbie"></span></p>

CSS

 .css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
    font-size: 44px;
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
} 

Jquery

 /* =================================
   TYPING EFFECT
=================================== */
(function($) {
    "use strict";

    $('[data-typer-targets]').typer();
    $.typer.options.clearOnHighlight=false;

})(jQuery);

// http://cosmos.layervault.com/typer-js.html
// http://www.paulund.co.uk/create-typing-effect
// http://www.mattboldt.com/demos/typed-js/

Silahkan teman-teman copy sintaks di atas kedalam editor web sobat, dan lihat hasil nya akan seperti di bawah ini