A New Portfolio

In the process of making a new portfolio site for my work, I decided I wanted to try to make a small jQuery plugin that transitions background gradients behind my headline text.

I noticed two different ways a person could approach this animation:

• Using CSS3 Gradients
• Using HTML5 Canvas.

My jQuery Plugin Setup

For a comparison, I set up 2 identical plugins that functioned essentially the same except for the portion that sets the gradient.

I won’t completely go over the details of the plugin (unless requested), but basically I set up both plugins so that it looked like this:

$('.js-gradient-bg').gradientBG({
  bgColors: [ 'rgb(76,89,199)', 'rgb(97,151,219)', 'rgb(35,235,198)', 'rgb(173,123,227)', 'rgb(122,107,209)', 'rgb(105,168,201)', 'rgb(24,184,237)'],
  duration: 4000,
  gradientType: 'leftright',
  steptime: 60
});

Using the array of RGB colors, the...