After strategizing with our internal project team, we determined the best way to assemble the various tools at our disposal:
- Get campaign dollar amount raised through the Blackbaud Luminate API.
- Convert these dollars to a control number to establish what content to serve to donors.
- Animate those tiled blocks with jQuery on the thank you page, revealing the image underneath.
For the animation, we tested a bunch of different options, but in the end I used jQuery’s .animate() function. It’s a little heavier on memory use compared to other functions in the jQuery library, but the trade off of a clean final product was worth the extra load. The function that fires the animation selects boxes at random, so users get a different feel each time. It can also tell when the box is close to the image border, which keeps the animation from flying off the page.