Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nick Wilson
Nick Wilson
5,060 Points

Need some guidance on figuring out an animated button effect.

I'm building a web site at work and i've gone through a lot of the JavaScript tutorials to refresh myself. I am having an issue though. I need a way to animate using jquery or javascript or even html5 canvas / javascript.

What I want to do is have a user scroll down the page, the page will then load into play the initial animation. Then, i will have 3 radio buttons, each show casing a NEW bar graph. When the radio buttons are clicked, I need the bar graph to animate the bar graph. The bar graph should go from bottom to top, with numbers at the top.

To get an example of what I mean, here is a page that I am looking at. Check out the buttons and animated bar graph.

Any assistance or guidance on what to use for this would be much appreciated.

website: https://iamcybersafe.org/research_millennials/ (that has the bar graph animation i'm looking for)

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

This looks like a good application for jQuery animation.

Though your sample website seems to use a canvas, I think you might be able to implement this more easily (and perhaps with a smoother appearance) using animations. Here's a little demo:

code.html 
<div class="box">
  <div class="bar bar1"><span class="bla">68%</span></div>
  <div class="bar bar2"><span class="bla">63%</span></div>
  <div class="bar bar3"><span class="bla">58%</span></div>
</div>
script.js 
$(() => {
  $(".bar1").animate({height: 200}, 740);
  $(".bar2").animate({height: 180}, 660);
  $(".bar3").animate({height: 160}, 600);
});
styles.css 
.box { 
  height: 300px;
  position: relative;
}
.bar {
  position: absolute;
  bottom: 0;
  border: 4px solid red;
  background-color: firebrick;
  height: 8px;
  width: 30px;
}
.bar2 {
  border: 4px solid green;
  background-color: darkgreen;
  left:45px;
}
.bar3 {
  border: 4px solid blue;
  background-color: navy;
  left: 90px;
}
.bla {
  position: absolute;
  top: -22px;
  font-weight: bold;
}

Of course, you'll still need to add your buttons and event handlers, but this should get you started.