jQuery 3D Animation Plugin With HTML5 and CSS3 Transforms - jworld

File Size: 21.4KB
Views Total: 4029
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery 3D Animation Plugin With HTML5 and CSS3 Transforms - jworld

jworld is a lightweight and fast jQuery plugin which allows you to create camera animations in the browser with HTML5 and CSS3 3D Transforms. The idea is to position, rotate, and scale html elements in 3D.

Basic Usage:

1. Include the latest jQuery library and jQuery jworld on the web page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="jworld-0.9.8.js"></script>

2. Create a view container with some sprites, using html5 data-* attributes

<div id="view" class="view" data-fov="60" data-y="150" data-z="-500" data-rotate-x="15">
<div id="sprite1" class="sprite" data-x="-150" data-rotate-y="-45">#1</div>
<div id="sprite1-back" class="sprite sprite-back" data-x="-150" data-rotate-y="-45" data-scale-z="-1">#1</div>
<div id="sprite2" class="sprite blue-sprite">#2</div>
<div id="sprite2-back" class="sprite sprite-back" data-scale-z="-1">#1</div>
<div id="sprite3" class="sprite" data-x="150" data-rotate-y="45">#3</div>
<div id="sprite3-back" class="sprite sprite-back" data-x="150" data-rotate-y="45" data-scale-z="-1">#1</div>
</div>

3. The javascript

<script type="text/javascript">

function resizeWin (e) 
{
// Update the camera size
$("#view").world("set", {width:window.innerWidth-16, height:window.innerHeight-16});
}

$(document).ready(function(e) 
{
// create a view with the size of the window
$("#view").world({width:window.innerWidth-16, height:window.innerHeight-16});

$(window).on("resize", function() {
setTimeout(resizeWin,350);
});

$(".sprite").on("click", function(e) {

if($(this).hasClass("sprite-back")) 
{
$(this).world({offsetRotateY: 180});
$("#"+this.id.substring(0,7)).world({offsetRotateY: 180});
}
else
{
$(this).world( {offsetRotateY: 180});
$("#"+this.id+"-back").world({offsetRotateY: 180});
}
});

// Animate sprites with css transform
$(".sprite").world("matrixTransition", "1s ease-in-out");
$(".sprite").css("backface-visibility", "hidden");

});

</script>

Change log:

  • updated to v0.9.13 (2013-06-25)

This awesome jQuery plugin is developed by 3key. For more Advanced Usages, please check the demo page or visit the official website.