TUTORIAL How to create an interactive animation by using the jquery...

What Will I Learn?

We will learn how to create jquery
We will learn to make animation with web programming
We will learn to create interactive animations with Jquery

Requirements

Browser (chrome )
Text editor
Understanding basic Html, Jquery, Javascript and Css

Difficulty

Intermediate

Tutorial Contents

Interactive Animation

Animation is a shaped picture of a set of objects (drawings) arranged regularly following the flow of movement that has been determined at every increase in the count of time that occurred. The images can be images of living things, inanimate objects, or writing.

Interactive is derived from the word interaction, which is mutual action, related, affect, inter-relationship. Interaction occurs because of a causal relationship, the existence of action and reaction
Or in other words interactive animation is an animation that can be run by the user easily on web programming

First prepare the image that inging made into animation

Then prepare the file. html, with name up to you
Then create the basic html structure as follows.

"
< !DOCTYPE html>

< html>

< head>

< title>Interactive Web</ title>
< script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>

< /head>

< body>

< img src="assets/alaligo-default.png" width="200" id="alaligo_img">

Then we make directions where to move with javascript.

"
< script >

$(document).on('keydown', function(eventObject){

            switch (eventObject.keyCode) {

                case 37: move('is-left'); break;

                case 38: move('is-top'); break;
                case 39: move('is-right'); break;
                case 40: move('is-down'); break;
                default:
            }

< /script>
"
- when on the run it will look like the following

Next to detect the direction in which the image will move we use the following code.

"
function move(direction) {

            switch (direction) {

                case 'is-left':

                    alaligo.animate({left: alaligo.position().left - range})

                            .attr('src', 'assets/alaligo-left.png');

                    $('.' + direction).css('borderRightColor', 'red');
                break;
                case 'is-right':
                    alaligo.animate({left: alaligo.position().left + range})
                            .attr('src', 'assets/alaligo-right.png');
                    $('.' + direction).css('borderLeftColor', 'red');
                break;
                case 'is-top':
                    alaligo.animate({top: alaligo.position().top - range})
                            .attr('src', 'assets/alaligo-top.png');
                    $('.' + direction).css('borderBottomColor', 'red');
                break;
                case 'is-down':
                    alaligo.animate({top: alaligo.position().top + range})
                            .attr('src', 'assets/alaligo-down.png');
                    $('.' + direction).css('borderTopColor', 'red');
                break;

Furthermore, it will create the interaction that is caused if collided.

"
< div id="friends">

    < img src="assets/boss.png" width="150" id="friend_img">

    < div class="boss-notes"> < p>Hallo bos mau kemana??< /p>< /div>

< /div>

and if the collided image then will come out interaction as follows

Now we will create a directional button using CSS as follows

< style>
    #alaligo_img{
        position: absolute;
    }

    #keyboard-arrow{
        position: relative;
        float: right;
        margin-right: 200px;
    }
    #keyboard-arrow div{
        position: absolute;
        width: 0px;
        height: 0px;
    }

    .is-top{
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 25px solid black;
    }

    .is-down{
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 25px solid black;
        top: 80px;
    }

    .is-right{
        border-left: 25px solid black;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        top: 30px;
        left: 60px;
    }

    .is-left{
        border-right: 25px solid black;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        top: 30px;
        right: 10px;
    }

    #friends{
        position: relative;
        margin-left: 300px;
    }

    .boss-notes{
        display: none;
        position: absolute;
        background: blue;
        color: white;
        padding: 5px;
        font-size: 20px;
    }
< /style>

and the button will be like this

and if all is done, for the preparation of the code as follows

index.html