On Scroll do something!

So I knew what I wanted, but wasn’t sure how to do it. Since I started my personal website weeks ago, I had a specific vision. The concept was to have a section dedicated to the developer skills that I had been learning over the past year, and to show my level of proficiency in each by filling in a bar. For example, it would show that I was best at HTML (90% full) and had much less experience in WordPress (a meager 50%). With what I already knew how to do, showing this was no problem, but the true vision was for the bars to populate as you scroll down — adding an interactive element to the website as well as showing the viewer that I had experience in animation/transitions.

So right from the beginning I had THE VISION. But of course, no idea how to make it happen. Naturally, I turned to Google and typed in what I was trying to achieve — “On scroll do something”. This might be a good time to mention, that after three years working as Creative Coordinator at an Internet advertising agency, I had some experience with Google keywords, and should’ve known that this search would come up short.

After a few more searches, I remembered learning about animate.css and ultimately found a cheat sheet with a list of classes, one of which was exactly what I was looking for. From here all I had to do was download the style sheet and add:

to the <head> of my page and then link the appropriate class name (ex. ‘bounce’ ) to the specific element/tag that I want to ‘bounce’. Pretty easy right? But the issue was that the skills bar is half way down the page. This means nobody would see the bars fill in because as soon as someone lands on the page the skill bars would be filling in while they’re still reading the nav bar.

But that wasn’t THE VISION — I wanted the bars to fill as the user scrolled down so they could see it happening live. Really cool idea, I thought. Not so easy to actually do! Animate.css had the documentation to do it, but it would only fill in one bar and not the rest. It also called for the use of Javascript, which I had minimal experience in (read: no skills bar).

So we know that I have a bar and that I have the animate.css to populate the bar, but I have multiple bars to fill and it would only fill one bar in at a time

The Javascript below is how I finally managed to make it happen (with the help of a pretty cool dude to fill in the missing pieces).

It says that when you reach the id “skills” and are 200 pixels below the top of the window to use the class, in this case “html” which is defined in my style sheets and uses the animate.css style sheet class “stretchRight” which uses a bunch of fun webkit transitions/animations to fill in the skill bars.

Once I figured this out, it was just a matter of switching out class names for each additional skill.

So that’s how it’s done! This was only the beginning of playing around with Javascipt and it was a great learning experience. If you want to see THE VISION in action, check out my website www.nigelbagley.com — Javascript skill bar coming soon.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.