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

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

"
< !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">

< div id="keyboard-arrow">
    < div class="is-top">< /div>
    < div class="is-down">< /div>
    < div class="is-right">< /div> 
    < div class="is-left">< /div>
< /div>

< 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>

< script>
    $(document).ready(function() {
        var alaligo = $('#alaligo_img');
        var friend = $('#friend_img');
        var range = 50;

        $(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:
            }

            detectCollition();
        });

        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;
            }
        }

        function detectCollition() {
            var x1 = alaligo.offset().left;
            var y1 = alaligo.offset().top;
            var x2 = friend.offset().left;
            var y2 = friend.offset().top;

            if((y1 + alaligo.outerHeight(true)) < y2 || y1 > (y2 + friend.outerHeight(true)) ||
                (x1 + alaligo.outerWidth(true)) < x2 || x1 > (x2 + friend.outerWidth(true)) ) {
                    $('.boss-notes').css('display', 'none');
                } else {
                    $('.boss-notes').css('display', 'block');
                }
        }

        $(document).on('keyup', function(){
            alaligo.attr('src', 'assets/alaligo-default.png');
            //reste keyboard arrow
            $('.is-left').css('borderRightColor', 'black');
            $('.is-right').css('borderLeftColor', 'black');
            $('.is-top').css('borderBottomColor', 'black');
            $('.is-down').css('borderTopColor', 'black');
        });
    });
</script>

<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>

< /body>
"

• if all is done in the run in your browser and will come out like this.

• and if it has come out as above you just need to press the arrow cursor on your keyboard to move the animation

---

Posted on Utopian.io - Rewarding Open Source Contributors

---