CODEWITHSUNDEEP
jquerycssjquery-animategradient
allumette
allumette

Reputation: 185

how to animate a css grandient change with jquery

I want to animate a css gradient with jquery and I can't find any solution. Does anyone have an idea ? The thing is, I can't animate from a class to another because my rgba is random (Ive made a little something using mousemouve event).

Here is my actual code

$(this).css(
     {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))'
});

But what I want to do would be something like this : 

$(this).stop().animate(
            {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))'},
            {
                duration:   1500, 
                easing:     'easeOutBounce'
            }
        );

The best I got was that it doesn't change the gradient but only the background color with the first rgba.

Basically, the css() is too aggressive, I want it to be smooth. I tried to use animate with the backgroundcolor only and it works fine, but not the gradient.

Any idea ? Thanks in advance.

EDIT : Here is the full js background.js

EDIT #2 : Find all my answers here. script on jqueryscript.net

Upvotes: 0

Views: 430

Answers (2)

guest271314
guest271314

Reputation: 1

Note, Not certain if the syntax , order of

-webkit-gradient(linear, left top, right top, from(rgba()), to(rgba()))

is accurate ? See linear-gradient , Using Gradients . At piece below , changed to

-webkit-linear-gradient(left top, rgba(), rgba())

Also, the easing option easeOutBounce not appear to be standard within jquery ; require either jquery ui , or jQuery Easing Plugin . Added jquery ui to scripts loaded.

jquery's .animate() may need a "color" plugin to animate color properties . Though , can utilize the step function , within .animate()'s options , to perform tasks for each "step" of the animation , see

.animate() , at step

A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

The properties , here , is defined with border:"0" - though , with jquery ui color animations appear possible Color Animation - step function utilized at piece below.

Try

$(document).ready(function () {

    $("body").mousemove(function (event) {

        var sw = $(window).width(),
            sh = $(window).height(),
            valueX = event.pageX,
            valueY = event.pageY;

        var fX = (valueX / sw),
            fY = (valueY / sh);

        var alpha = ((fX / 2) + (fY / 2));

        var r = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            g = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            b = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            r2 = Math.round(((Math.floor((Math.random() * 100) + 1)))),
            g2 = Math.round(((Math.floor((Math.random() * 100) + 1)))),
            b2 = Math.round(((Math.floor((Math.random() * 100) + 1))));

        console.log('x:' + fX + ' - y:' + fY + '');
        console.log('rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')');
        console.log('rgba2(' + r2 + ',' + g2 + ',' + b2 + ',' + alpha + ')');

        // animate the background color on mousemove
        $(event.target).stop().animate({
            border:"0"
        }, {
            duration: 1500
            , easing: 'easeOutBounce'
            , step: function() {
              $(this).css('background'
                          ,'-webkit-linear-gradient(left top, rgba('
                          + r +','+ g +','+ b +','
                          + alpha +'), rgba('
                          + r2 +','+ g2 +','+ b2 +','+ alpha +')')
        }
        });

    });
});
body {
    width : 646px;
    height : 615px;
    background-color : transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

jsfiddle http://jsfiddle.net/guest271314/vystqodj/

Upvotes: 0

Jason
Jason

Reputation: 4149

CSS is the best approach here. Add the necessary transition/animation to the element. Have several classes with different background gradients and then use jQuery to add/remove the classes as necessary. To my knowledge, CSS gradient backgrounds do not animate via transition. You will likely need to use keyframe animations. You may need animation callbacks as well to make sure the animations don't jump if they are based on mouse events (hover, click, etc). It would probably be fairly difficult to implement a smooth solution with mouse events.

See http://thecodeplayer.com/walkthrough/animating-css3-gradients for examples of keyframe gradient animations. One trick many people use is changing the background position, not the gradient itself. In that situation, transition can work.

Alternatively, jQuery Transit (http://ricostacruz.com/jquery.transit/) could possibly do it, but untested and not documented.

Upvotes: 1

Related Questions