a Wobbling 3D Carousel(jQuery)

Home Slideshow & Scrollera Wobbling 3D Carousel(jQuery)

a Wobbling 3D Carousel(jQuery)

14 years ago Views

19834

3044

n/a

This is a 3D carousel.we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer. Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Building the Ring

Creating objects for the engine isn’t overly complicated. It’s just an array of 3d points. With the ring, we’re going to use math to plot the points for us. We’re going to be creating a circle and plot it in 3d space.

Here is the JavaScript: (Ring.js)

var Ring = function (radius, numOfItems){

    //Step through each point on ring.
    for (var i = numOfItems - 1; i >= 0; i--)
    {
        //Figure out where each point lies on the circle
        var angle = i * Math.PI * 2 / numOfItems;
       
        //Translate that point on the circle into x,y coordinates.
        var x =  Math.sin(angle) * radius;
        var y = Math.cos(angle) * radius;
        var z = 0;
       
        //Add the point to the array.
        this.pointsArray.push(this.make3DPoint(x,y,z));
    }
   
   
       
};

//You need to inherit the DisplayObject3D.
Ring.prototype = new DisplayObject3D();

The Ring class takes 2 parameters, the first is the radius of the ring, and the second is how many items are going to be on the ring.

We then proceed to step through all the points, and place them at equal distances around the ring.

The HTML

There isn’t much too the html. We’re simply going to create a <ul> with a bunch of words in it.

Here is the HTML:

<div id="item">
    <ul>
        <li>website</li>
        <li>jQuery</li>
        <li>JavaScript</li>
        <li>HTML</li>
        <li>PHP</li>
        <li>3D</li>
        <li>Ajax</li>
        <li>CSS</li>
        <li>Design</li>
        <li>Flash</li>
        <li>Experimental</li>
        <li>Development</li>
        <li>web</li>
        <li>Tutorial</li>
        <li>ASP</li>
    </ul>
</div>

The jQuery

The only difference here is we’re going to give an initial value to the axisRotation x value. This will rotate the ring towards the viewer. Through trial and error I figured out the value that worked for me.

Then we’ll animate the axisRotation y value when the mouse moves left and right.

Here is the jQuery:

$(document).ready(function() {

//setup camera.
var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

//Setup 3d object holder.
var item = new Object3D(container);

//Add ring to 3d object holder.
//The first argument for the ring is the radius.
//The second argument for the ring is how many items
//are on the ring.  So we pass in how many items are in our list.
item.addChild(new Ring(200, $("#item ul li").length));


//Create a scene.
var scene = new Scene3D();

//Add 3d object holder to the scene.
scene.addToScene(item);


var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

//Capturing mouse movements.
$().mousemove(function(e){
    mouseX = e.clientX - offsetX - (container.width() / 2);
    mouseY = e.clientY - offsetY - (container.height() / 2);
});

//Rotate ring so it's almost perpendicular to the viewer.
axisRotation.x = 1.5;

var animateIt = function(){
    if (mouseX != undefined){
       
        //When the user moves the mouse left and right,
        //rotate around the ring on the y axis.
        axisRotation.y += (mouseX) / speed;
    }
   
    scene.renderCamera(camera);
   
};


setInterval(animateIt, 20);


});

Voila!

That’s all there is too it.

Here is all the code together:

<html>
<head>
    <title>3d engine</title>
    <style type="text/css" media="screen">
        #item{
            width:100px;
            height:100px;
            margin:0 auto;
            top:300px;
            position: relative;
           
        }
        ul{
            list-style-type: none;
        }
        body{
            background-color: #111;
            color: #69c;
            font-family: Arial, "MS Trebuchet", sans-serif;
            font-weight: bold;
            font-size:1em;
        }
    </style>
</head>
<body>
    <div id="item">
        <ul>
            <li>website</li>
            <li>jQuery</li>
            <li>JavaScript</li>
            <li>HTML</li>
            <li>PHP</li>
            <li>3D</li>
            <li>Ajax</li>
            <li>CSS</li>
            <li>Design</li>
            <li>Flash</li>
            <li>Experimental</li>
            <li>Development</li>
            <li>web</li>
            <li>Tutorial</li>
            <li>ASP</li>
        </ul>
    </div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Ring.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //<![CDATA[
   
    $(document).ready(function() {

        var camera = new Camera3D();
        camera.init(0,0,0,300);
       
        var container = $("#item");
       
        var item = new Object3D(container);

        item.addChild(new Ring(200, $("#item ul li").length));
       
        var scene = new Scene3D();
        scene.addToScene(item);
       
       
        var mouseX,mouseY = 0;
        var offsetX = $("#item").offset().left;
        var offsetY = $("#item").offset().top;
        var speed = 6000;
       
        $().mousemove(function(e){
            mouseX = e.clientX - offsetX - (container.width() / 2);
            mouseY = e.clientY - offsetY - (container.height() / 2);
        });
       
        axisRotation.x = 1.5;
       
        var animateIt = function(){
            if (mouseX != undefined){
                axisRotation.y += (mouseX) / speed;
            }
           
            scene.renderCamera(camera);
           
        };
       
       
        setInterval(animateIt, 20);
       
       
        });
    //]]>
</script>
</html>

Ring.js:

var Ring = function (radius, numOfItems){

    for (var i = numOfItems - 1; i >= 0; i--)
    {
        var angle = i * Math.PI * 2 / numOfItems;
       
        var x =  Math.sin(angle) * radius;
        var y = Math.cos(angle) * radius;
        var z = 0;
       
        this.pointsArray.push(this.make3DPoint(x,y,z));
    }
   
};

Ring.prototype = new DisplayObject3D();

Tag: text scroller