Priyank Dey Priyank Dey - 2 months ago 9
Javascript Question

How to change background when using typed.js?

I am using typed.js from the link http://www.mattboldt.com/demos/typed-js/. Its working very nicely. Now I want to change my body background every time when a sentence completed.

I mean when "abcd ef" comes background should be blue.

for "ghijkl" ---the background should be red

and so on.
How can I do this. Please share with me if any one has any idea. I am adding my code below.

<div id="typed-strings">
<p><span>abcd ef.</span></p>
<p><span>ghijkl.</span></p>
<p><span>mnopqr.</span></p>
<p><span>stuvwxyz.</span></p>
</div>
<span id="typed" class=""></span>



<script src="/assets/typed.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 60,
backDelay: 800,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});

$(".reset").click(function(){
$("#typed").typed('reset');
});

});

function newTyped(){ console.log("Call");/* A new typed object */ }

function foo(){ console.log("Callback"); }

</script>


<style type="text/css">

/* code for animated blinking cursor */
.typed-cursor{
opacity: 1;
font-weight: 100;
font-size: 36px;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>

Answer

Got the solution:

$(function(){

  var x=1;
    $("#typed").typed({
        // strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
        stringsElement: $('#typed-strings'),
        typeSpeed: 100,
        backDelay: 1000,
        loop: true,
        contentType: 'html', // or text
        // defaults to false for infinite loop
        loopCount: false,
        /*preStringTyped: function() { myfunc(); },*/
        callback: function(){ foo(); },
        preStringTyped: function() { 
            console.log(x);
            x++;
            if(x == 5) {
                x = 1;                    
            }

            if(x == 1){
                $("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3");

            }
            if(x == 2){
                $("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4");

            }
            if(x == 3){
                $("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4");

            }
            if(x == 4){
                $("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4");

            }

            myfunc(); },

        resetCallback: function() { newTyped(); }
    });



    $(".reset").click(function(){
        $("#typed").typed('reset');
    });



});

css

    .myimg1 {
        background-image: url('../assets/home/bg_1.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }
    .myimg2 {
        background-image: url('../assets/home/bg_2.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out; 
    }
    .myimg3 {
        background-image: url('../assets/home/bg_3.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }
    .myimg4 {
        background-image: url('../assets/home/bg_4.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }
Comments