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.
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
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.