Use your left/right keys to browse tutorials
Building an animated 3D poll

Building an animated 3D poll

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on June 10, 2010

Regular readers of Papermashup will have seen the post that I wrote last week on Easy Poll, the personal project that I launched a few weeks back that allows you to create a simple 2 answer poll that you can share and gather feedback on. You can read the post about it and check out easypoll.papermashup here I’d love to hear your feedback.

I thought i’d cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.

The Code

I don’t usually do this but here’s the complete code snippet so you can see the JavaScript CSS and HTML all in one space. most of the configuration is achieved thought the CSS but you’ll notice that on page load the bars animate to the correct height using the jQuery animate function which we’re passing a percentage height into.


<head>
<style>
.rating {
float:left;
width:180px;
background-image:url(images/poll-bottom.png);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:40px;
}

.graph {
float:left;
margin-top:10px;
position:relative;
height:380px;
padding:0;
}

.graph .bar1, .graph .bar2, .graph .bar3{
display:block;
position:absolute;
background-image:url(images/poll-body.png);
background-position:top left;
color:#fff;
width:159px;
min-height:70px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em;
bottom:0;
}

.graph .bar1 span, .graph .bar2 span,  .graph .bar3 span  {
position:absolute;
left:50px;
top:20px;
font-size:33px;
color:#333;
text-shadow:0 1px #fff;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function(){

  $('.bar1').animate({'height':'22%'},500);
  $('.bar2').animate({'height':'58%'},1000);
  $('.bar3').animate({'height':'88%'},1500);

  });

</script>

</head>

<body>

<div class="polls">

        <div class="rating">
            	<div class="graph">
                	<strong class="bar1">
                    <span>22%</span>
                    </strong>
                </div>
			<div class="ans">Answer 1</div>
	    </div>

	     <div class="rating">
            	<div class="graph">
                	<strong class="bar2">
                    <span>58%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 2</div>
	    </div>

            <div class="rating">
            	<div class="graph">
                	<strong class="bar3">
                    <span>88%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 3</div>
	    </div>

        <div class="clear"></div>

</div>

</body>



More tutorials from Papermashup
  • Clint Hansen

    I would like to use this animated 3D chart on a webpage that pulls data from a Google spreadsheet I’ve already set up. My problem is not knowing the code to place into the provided chart code to make it read from and display the spreadsheet. Any help would be greatly appreciated!

  • Joseph

    hi ,Dear Ashley
    i saw your code and watche the Demo ….it was amazing

    would u pleas tell me can use it in ASP.Net Project,for example in the eShop web site
    in one ASP page show the items the Customer buy from eShop?

    thanks a lot,have nice Day

  • http://www.facebook.com/people/Juan-Maia/1519588383 Juan Maia

    I likded.

  • http://twitter.com/__juan Juan

    Very nice like always!

  • Pingback: Tweets that mention Building an animated 3D poll | Papermashup.com -- Topsy.com