The Magic Dance
















Description

This project is a continuation of a previous assignment, both which I completed by myself. I tried emulating the concept of deception that is central to the story in the interface of the website. I focused on presentation, styling, and animations while cleaning up the files, specifically, my JavaScript code.

Design Considerations

In styling and animating the interface, I focused on having a natural flow. This I achieved by integrating transitions and events based on mouseovers and scrolls. Spacing and timing were important and required basic HTML formatting as well as JavaScript functions, arrays, DOM manipulations, libraries, conditionals, and CSS keyframes.

Challenges

Learning how to use libraries required time. Debugging became more common as I added interdependent features. For example, if animations overlapped, they often interrupted the program and as elements disappeared and others appeared, controlling their position became necessary. Accurate timing was vital.

Technology & Acknowledgements

I used 3 libraries: Animate.CSS, DynCSS, and Slick, including corresponding CSS files for the latter. As mentioned, I used many JavaScript features, notably, by making use of Ajax. I referenced GitHub, StackOverflow, W3Schools, YouTube tutorials, class lectures, library websites and other webpages.