i am making an app where i need 3d joystick image so that user can swipe on it and image will bend in swipped direction.
For swipe down or for swipe up events what css or animation effect i should give to make image moving downside or upside ??
I don't know the best way to do it. I am trying this code :-
<div style="width:220px;height:220px;background-color:black;display:table-cell; vertical-align:middle; text-align:center" id="joy_div">
<img id="joystick" src="joystick.png" >
</div>
<script>
$("#joy_div").rotate({
bind:
{
swipeleft : function() {
$("#joystick").rotate({animateTo:-50});
},
swiperight : function() {
$("#joystick").rotate({animateTo:50});
},
swipeup : function(){
alert('up');
},
swipedown : function(){
alert('down');
},
swipeend : function(){
$("#joystick").rotate({animateTo:0});
}
});
</script>
I appreciate any guidance.
I would suggest you to use CSS transform
and perspective
to do this.
In the example below, I've demonstrated this using buttons for swipeLeft, swipeRight, swipeUp and swipeDown events.
$(".tilt").click(function() {
$('#joystick').removeAttr('class');
$('#joystick').addClass($(this).attr('id'));
});
#joy_div {
perspective: 500px;
}
button {
margin: 10px 0 0 0;
}
.left, .right, .down, .up, .reset {
transition: transform 0.5s ease;
transform-origin: 50% 50%;
}
.left {
transform: rotateY(-40deg);
}
.right {
transform: rotateY(40deg);
}
.up {
transform: rotateX(-40deg);
}
.down {
transform: rotateX(40deg);
}
.reset {
transform: rotateX(0) rotateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:250px;height:160px;display:table-cell; vertical-align:middle; text-align:center" id="joy_div">
<img id="joystick" width="250" height="160" src="http://help.robotc.net/WebHelpArduino/scr/TETRIX_MATRIX_New/NXT_Using_Joysticks_files/Joystick_front.gif" />
</div>
<button class="tilt" id="left">swipeleft</button>
<button class="tilt" id="right">swiperight</button>
<button class="tilt" id="up">swipeup</button>
<button class="tilt" id="down">swipedown</button>
<button class="tilt" id="reset">Reset</button>
Here is the select box/drop-down menu: var type_select = '<select id="type_select" style="margin-bottom:0px;">'; var i; var customer_group = <?php echo json_encode($...
Here is the select box/drop-down menu: var type_select = '<select id="type_select" style="margin-bottom:0px;">'; var i; var customer_group = <?php echo json_encode($...
Is it possible to style the hyperlink tag in CSS in such a way that when a link is clicked it opens it in a new tab or window? I know the solution in HTML and JavaScript/jQuery, yet is it possible to ...
Is it possible to style the hyperlink tag in CSS in such a way that when a link is clicked it opens it in a new tab or window? I know the solution in HTML and JavaScript/jQuery, yet is it possible to ...
I am trying to learn JavaScript from a book. The first chapter of the book says to use the following format to support older browsers that don't support JS. What it actually does is simple, it uses ...
I am trying to learn JavaScript from a book. The first chapter of the book says to use the following format to support older browsers that don't support JS. What it actually does is simple, it uses ...
I am trying to understand what's the thing with javascript Objects while using them as an associative array. From ECMA: 4.3.3 An object is a member of the type Object. It is an unordered ...
I am trying to understand what's the thing with javascript Objects while using them as an associative array. From ECMA: 4.3.3 An object is a member of the type Object. It is an unordered ...