Papermashup

Subscribe


Tweets


"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 3 days ago

"@burgerbeartom @kycutwilson finally got around to using my free burgers for life! And we weren't disappointed. http://t.co/nJ6p2nLtg4"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Building an animated 3D poll

AshleyAshley

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>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 5
  • Clint Hansen
    Posted on

    Clint Hansen Clint Hansen

    Reply Author

    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
    Posted on

    Joseph Joseph

    Reply Author

    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


  • Juan Maia
    Posted on

    Juan Maia Juan Maia

    Reply Author

    I likded.


  • Juan
    Posted on

    Juan Juan

    Reply Author

    Very nice like always!