Search jQuery

jQuery Forum

Animated gradient background with transition

in Using jQuery • 9 years ago

I want to create a animated gradient background (with possibility of using multiple color inputs and direction) that changes (transition) slightly over time in a cycle (really smooth).

I was hoping to find something that is jQuery/javascript based, but i can't find anything. Only example that i found where i like smooth way it works and looks is this: Almost Calm

But i don't want the hover or circle of course and setup my own coloring etc etc.

Can somebody help me with this?

Help is much appreciated

Thank you.

Replies(3)

jakecigar

Re: Animated gradient background with transition

9 years ago

You could use an animated gif or a series of png backgrounds, or write your own canvas code. Or dynamically change the CSS using a setInterval or jQuery animate. But then you would have to share what gradients you want.

JΛ̊KE

foroloca

Re: Animated gradient background with transition

9 years ago

Thank you for helping.

I know the gif or png background way, but i want it to be generated and easily changeable so i can play first with different color gradients and finally animate it so there is a smooth transition between colors, but also change the direction of the gradient if that is possible. I'm not that good in coding jQuery.

I know that CSS has a gradient code:

/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #ED47FF 0%, #1EFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #ED47FF 0%, #1EFFFF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #ED47FF 0%, #1EFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ED47FF), color-stop(1, #1EFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #ED47FF 0%, #1EFFFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #ED47FF 0%, #1EFFFF 100%);

jakecigar

Re: Animated gradient background with transition

9 years ago

That’s going to turn into a lot of code. Those colors are not easily accessible in javascript.

Color animation jQuery plugging helps animate normal colors, I can imagine making a single color animate in the gradients, but animating both colors will be a pain.

The gif or hardcoding a series of different classes for the page is looking like easier options.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Animated gradient background with transition

Replies(3)

Re: Animated gradient background with transition

Re: Animated gradient background with transition

Re: Animated gradient background with transition

Statistics

Tags

Actions