Animated Background Vertical orientation

[jrivera1]

Borrowed this bit of code to make an animated gradient animation. It’s all working fine, but I’m trying to figure out how I can make the animation run vertical as opposed to horizontal (how it’s running now). Unfortunately I don’t know enough about javascript to change it. Any help is greatly appreciated!

http://codepen.io/quasimondo/pen/lDdrF

link to animation (http://codepen.io/quasimondo/pen/lDdrF)

[nkrisc]

Just change the CSS rule it’s adding

"-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"

To this:

"-webkit-gradient(linear, left bottom, left top, from("+color1+"), to("+color2+"))"

This runs it from bottom to top. Just reverse the start/end parameters to go from top to bottom.

Don’t forget to do the same for the Mozilla prefixed rule -moz as well. I’m on Chrome right now so I’ll leave looking that syntax up to you.

[jrivera1]

Ah! Perfect, thank you!

[Author]

Posts