Javascript Code: Merlin in my page

If you want to have a more attractive website, use Merlin. This is a way to show Merlin toy on your website. He comes out and tells you things. You can easily set what you want him to say to your visitor. Just edit the code. Besides, the name of each animation that is running will be written for you.

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
    *, *:before, *:after {
        box-sizing: border-box;
        outline: none;
    }

    html, body {
        height: 100%;
    }

    body {
        font: 16px "Roboto", arial, sans-serif;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100%;
    }

    h1 {
        text-align: center;
    }

    a {
        font-size: 200%;
        position: absolute;
        bottom: 0.5em;
        right: 0.5em;
    }
</style>
<link rel='stylesheet' href='https://www.javascriptfreecode.com/files/clippy.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'>


<!-- partial:index.partial.html -->
<div class="container">
  <h1>Play state: <span class="js-state">move and speak</span></h1>
  <div class="js-states"></div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://www.javascriptfreecode.com/files/clippy.min.js'></script>
<script  >
    let agent;
    clippy.load('Merlin', function (agent) {
        const animations = agent.animations();
        $('.js-states').text(animations.join(' '));
        agent.show();
        agent.moveTo(100, 100);
        agent.speak('When all else fails, bind some paper together. My name is Clippy.');
        setTimeout(animate.bind(null, agent, animations), 8000);
    });

    function animate(agent, animations) {

        function doneCallback(animation) {
            console.log('done ' + animation);
        }

        let statesText = animations.join(' '),
            $state = $('.js-state'),
            $states = $('.js-states');

        for (var i = 0; i < animations.length; i++) {
            (index => {
                setTimeout(_ => {
                    let animation = animations[index];
                    let currentStateInStates = statesText.replace(animation, `<b>${animation}</b>`);
                    $state.text(animation);
                    $states.html(currentStateInStates);
                    agent.play(animation, undefined, doneCallback.bind(null, animation));
                }, index * 8000);
            })(i);
        }
    }
</script>
<a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: effect, browser

Javascript Best Codes

Javascript Code: Merlin in my page

Links