Friday, August 30, 2013

The WOW Slider Conundrum

Next on the agenda was the "Latest Works" column on the home page. The goal was to get it to animate in a similar fashion as the graphic slider, but not identically. This area of the website will feature the 4 most recent projects.  The challenge was to see if I could animate it using the existing code that I used on the graphic slider. I knew I would have to customize it, but wasn’t sure if I would have to make changes to the Javascript file. As it turned out I definitely would have and that is something I am not quite prepared to do.

I had my goal all but complete when I decided it wasn't good enough. The problem had everything to do with how the WOW Slider affects the HTML content differently from images. Images will fade into one another whereas text elements fade away before the new text fades it. This was inconsistent and jarring, to be frank. So I scrapped it and decided to start over. One thing I can be proud of is that I did not feel compelled to keep any of the HTML or CSS code intact. I did not even comment the code to disable it. I simply deleted it. Knowing full well that I would be able to start fresh and not be intimidated.


After a long break I downloaded the JQuery Cycle2 plugin to handle the animation effect I wanted for the latest works column. I was absolutely blown away by Cycle2. I had only been working with it for about 10 minutes before having the content animating exactly the way I wanted!

No comments:

Post a Comment