I came across the 100 Dots challenge, and decided to take it on with this pen. I attempted to only use CSS transitions for the effects, but I needed JavaScript to detect the movement of the mouse for one feature. Additionally, this is my first experimentation with the SCSS preprocessor.
I am a big fan of the game series Legend of Zelda, and long-time fans will know that the Triforce represents the balance of Power, Courage, and Wisdom. Another facet of this game series are Fairies, usually depicted as glowing orbs of light with wings.
As you move the mouse over the field of blue, the 'fairy' will wake up and become your cursor, fluttering around the field as you move your mouse. As the fairy draws near to any piece of the Triforce, that piece, as well as the letter representing which piece of the balance it symbolizes, will begin to glow, and slowly go dormant after the fairy moves away.
By the way, while this Pen does work on mobile devices, the fairy movement only works when viewed from a computer with a mouse.
UPDATE: I have now added the embedded Pen from Code Pen! However, I have noticed that the embedded Pen may not function correctly when hovering the mouse over the Triforce pieces. If this happens, please click the project title to navigate directly to the Pen on the Code Pen site.
See the Pen
CodePen 100 Dots Challenge - Triforce by WillTWebDev (@WillTWebDev) on CodePen.