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
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @rufans, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Hello @harun12, this contribution can not be verified as it does not follow one of the rules.
You can contact us on Discord.
[utopian-moderator]
Congratulations @harun12! You received a personal award!
Click here to view your Board
Congratulations @harun12! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!