JQUERY stop falling object when it hits floor jquery - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

How to stop falling an object when it hits the floor using jquery ?


 35

JQUERY


0

Works fine for chrome, opera, safari, edge, firefox


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>

* {
margin: 0px;
padding: 0px;
}

html, body {
width: 100%;
height: 100%;
}

.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-45deg);
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}

.cube div {
width: 100px;
height: 100px;
position: absolute;
background: orange;
border: 2px solid black;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.6);
border-radius: 5px;
}

.background_area {
width: 300px;
height: 300px;
position: absolute;
background: grey;
}

.cube div.top_side {
transform: rotateX(90deg);
margin-top: -50px;
background-size: 100px 100px;
}

.cube div.right_side {
transform: rotateY(90deg);
margin-left: 50px;
background-size: 100px 100px;
}

.cube div.bottom_side {
transform: rotateX(90deg);
margin-top: 50px;
background-size: 100px 100px;
}

.cube div.left_side {
transform: rotateY(-90deg);
margin-left: -50px;
background-size: 100px 100px;
}

.cube div.front_side {
transform: translateZ(50px);
background-size: 100px 100px;
}

.cube div.back_side {
transform: translateZ(-50px);
}

</style>

</head>

<body>

<script>

$(document).ready(function () {

$(document).keydown(function (e) {

var link = $(".cube");
var offset = link.offset();
var top = offset.top;
var bottom = top + link.height();

if (bottom.toFixed(0) > 275) {

var end = Math.abs(285 - bottom.toFixed(0));

$(".cube").animate({ 'marginTop': "+=" + end.toFixed(0) + "px" });

}


else {


if (!$(".cube").is(':animated')) {

switch (e.which) {
case 37:
$(".cube").animate({ 'marginLeft': "-=10px" }); //left arrow key
break;
case 38:
$(".cube").animate({ 'marginTop': "-=10px" }); //up arrow key
break;
case 39:
$(".cube").animate({ 'marginLeft': "+=10px" }); //right arrow key
break;
case 40:
$(".cube").animate({ 'marginTop': "+=10px" }); //bottom arrow key
break;
}

}

else {

}

}

});

});

</script>

<div class="background_area">

<div class="cube">
<div class="top_side"></div>
<div class="right_side"></div>
<div class="bottom_side"></div>
<div class="left_side"></div>
<div class="back_side"></div>
<div class="front_side"></div>
</div>

</div>

</body>
</html> 


By     Created   
The power of the user (%)
68%



The most helpful JQUERY solutions

plugin get client ip address using jqueryplugin get client ip address using jqueryJQUERY

Click to see more ...

  5.9K     1.4K

How to get client machine name or computer name with jquery?How to get client machine name or computer name with jquery?JQUERY

Click to see more ...

  5.1K     724

plugin detect country jqueryplugin detect country jqueryJQUERY

Click to see more ...

  2.3K     563

cookie jquerycookie jqueryJQUERY

Click to see more ...

  2K     391

show position on google map jqueryshow position on google map jqueryJQUERY

Click to see more ...

  1.6K     386

How to detect the version of IE browser using jquery ?How to detect the version of IE browser using jquery ?JQUERY

Click to see more ...

  1.2K     310

plugin convert thousands to K jqueryplugin convert thousands to K jqueryJQUERY

Click to see more ...

  1K     258

how to get ip address using jquery ?how to get ip address using jquery ?JQUERY

Click to see more ...

  770     212

how to create a jquery plugin for converting date to days ago, month ago and year ago ?how to create a jquery plugin for converting date to days ago, month ago and year ago ?JQUERY

Click to see more ...

  763     212

How to get top, right, left, bottom position of element div using jquery ?How to get top, right, left, bottom position of element div using jquery ?JQUERY

Click to see more ...

  652     206