Are you wondering how was the hair effect on trumpdonald.org created? Was it SVG, WebGL or HTML5 Canvas?

Find out in this short video deconstruction.

Video

Assets breakdown

The whole scene is simply composed from a few transparent pngs, but a lot of work went into creating these assets.

For example the eyes are created from two separate elements sitting on top of each other.

This gives a very realistic effect when the user moves the mouse around the stage.

The body is a simple div with a background image. It contains two assets for the idle and active state.

The animation of the hair when the user clicks anywhere on the screen is also created using transparent image sprite.

The viewport is divided into 16 angles and based on where the user clicks, the relevant image sprite is displayed.

While the trumpet is blowing all 12 frames are revealed in a sequence.

To make the effect even more realistic, GreenSock shakes the canvas element by animating the x and y offsets between two random values.

var x = (Math.random() < 0.5) ? ['0%', xMax] : [xMax, '0%'], y = -Math.floor(Math.random() * 3 + 3) * 100 / 6; tlBlow.to(hairCanvas, 0.5 / 12 * 1, { x: x[0], y: y + '%', ease: SteppedEase.config(1) }) .to(hairCanvas, 0.5 / 12 * stepsNum, { x: x[1], y: y + '%', ease: SteppedEase.config(stepsNum) })

The use of SteppedEase completes the whole random and realistic hair blowing experience.

Conclusion

What do you think about the Trump Donald effect and have you seen any other cool website worth deconstructing?

Let me know in the comments below.

Also I will be adding more deconstruction like this to my YouTube channel over the coming weeks.

If you don’t want to miss the new videos, subscribe to the channel.

Other Website Deconstructions