Posts in Category "WEM"

Creating a Flip Book CQ Component

The canvas element is a new tag included in HTML 5. This allows for dynamic renderings of 2D shapes and bitmap images. I recently stumbled across a great example of the powerful effects that can be accomplished with the canvas element and javascript on a web app called 20 Things I learned about Browsers and the Web. The web application tells a nice summary of the basic history of the internet and open web technologies. What really makes it cool is that the information is presented as an interactive book and allows the user to “flip” the pages by dragging the mouse.

I thought it would be interesting to take this functionality and create a re-usable component in CQ. This would allow authors to add the component onto any paragraph system and drag text and images from the content finder to populate the “pages” of the book. The following tutorial focuses on creating a custom CQ component that uses its own CSS, images, and Javascript to make it run.

Continue reading…