Comic Book Contest Entry with ScrollMagic and other tricks

A technique i use here is ScrollMagic . Its a great Javascript library that makes it possible to trigger animations on a scroll. Further i wanted to experiment and get started with Lectora 16. At some point i wanted to clip/crop an image. Well Lectora 16 now gives that option inside L16, but i soon discovered it was limited to rectangles. Because of my design i didnot wanted that. I wanted a diagonal crop. And it should animate. Well quite proud of the solution i got working for that. A parent div and a child div. The child div holds the image, the parent div is just a container. Then you can crop, rotate and animate both child and parent individually, creating a diagonal crop like inhere.

Well more nice tricks inside.. just take a look at the code, and allthough it might seem overwhelming… its not that hard. Im no real programmer either. I majored in Art and Design years ago, actually as a teenager i wanted to become a comic-artist 😉

Preview image

Tags: , , , ,

Comments

  1. Profile photo of Math Notermans
    Math Notermans Post author

    Actually this can work in Lectora 11 as well. Only change needed for a setup like this to work in L11, is replace the buttons and shapes used in L16. The shapes and buttons in L16 are quite different. L11 wont like those. If a setup like this needed in L11, or even X10, just ask me, and i convert it to a L11 or X10 version.. for X10 you have the extra issue you cannot give an element a CSS class…but thats also solvable 😉

Your email address will not be published. Required fields are marked *