animate CSS3 gradient-positions using jQuery
Be creative.. This is an example of how I do gradient transitions without extra plugins..
I use 2 identical divs with different gradients layered one on top of the other. Then I use jquery to animate the opacity of the one on top..
Here is it step by step
- create a wrapper with a fixed size lets say "width:200px" and "height:100px" (I use a wrapper so that its easier to adjust the position of the divs inside it)
- create 2 divs that are the same size as the wrapper give both different background gradients but use the same content for both so visually the only thing that changes is the background gradient.
- add "position:relative;" and adjust the position of the div that will be on top, in this case box2 with "bottom:100px;" (notice its the same value as the height of the wrapper and the divs. This makes the div that will be on top to move up 100px positioning itself right over the lower div, relative to the wrapper... this is not possible without using "position:relative;" on the top div)
- animate the opacity of the div with your preferred method i use fadeToggle in this example
HTML-----
<a href="#">Click to change gradient</a><br>
<div align="center" style="width:200px; height:100px;">
<div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div>
<div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div>
</div>
GRADIENTS IN CSS-----
.box1 {
background: rgb(237,144,23); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
}
.box2 {
background: rgb(246,230,180); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
jQuery animation----
$(document).ready(function(){
$("a").click(function(){
$("#box2").fadeToggle(100, "linear");
});
});
you can layer a third div so that you dont need to write the same content twice by adding a second wrapper outside the first one and placing the third div after the inside wrapper closes..
to view this go to the following link..
Link to example
Linear-gradient animate In and out
Try this.
$(document).ready(function () {
$('.fadeIn').fadeIn({queue: false, duration: 'slow'})
.css({top:200,position:'absolute'})
.animate({top:0}, 1000, function() {});
setTimeout(function() {
$('.animate-text').addClass('get-in-effect')
}, 500);
setTimeout(function() {
$('.animate-text').removeClass('get-in-effect')
$('.animate-text').addClass('between')
}, 1000);
setTimeout(function() {
$('.animate-text').addClass('get-out-effect')
}, 1500);
});
.animate-text {
background-color: black;
background-size: 200% 100%;
background-position: right bottom;
color: transparent;
}
.get-in-effect {
background: linear-gradient(to right, #f6cf35 50%, black 50%);
background-size: 200% 100%;
background-position: left bottom;
transition: all 0.5s ease-out;
}
.between {
background-color: #f6cf35;
}
.get-out-effect {
background: linear-gradient(to right, black 50%, #f6cf35 50%);
transition: all 0.5s ease-out;
background-size: 200% 100%;
background-position: left bottom;
color: #f6cf35;
}
The transition doesn't seem to want to run again unless you take the first class back off again. And in order to have it have the yellow background (instead of reverting to the black) you can add another class in between that sets the background-color.
how to animate a css grandient change with jquery
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>Can I animate the change of a background gradient?
Make a full page div and add it on the background behind all other elements.
Then you can make it animate.
Check the code below:
function goodMorning(){ $('#background').animate({ opacity: 1 }, 2000);}
goodMorning();body{ background-color: red;}#background{ opacity: 0; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; background: -webkit-gradient(linear,left top,left bottom,from(#b0c4ff),to(#6289ff)) fixed;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="background"></div><p>Hello :)</p>jQuery animate div background color gradient?
UPDATE: These days, all major browsers support CSS animations, which are way more reliable than jQuery. For reference, see Rohit's answer.
OLD ANSWER:
Animating the backgrounds directly is nearly impossible with jQuery, at least I could think of no way. There is a way though with this:
-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;
That ensures that there is a transition. You could for instance do that in CSS:
.background_animation_element{
-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;
background: rgb(71,234,46);
background: -moz-linear-gradient(top, rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
background: -webkit-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: -o-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: -ms-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ea2e', endColorstr='#3f3f3f',GradientType=0 );
}
.background_animation_element.yellow{
background: rgb(247,247,49);
background: -moz-linear-gradient(top, rgba(247,247,49,1) 0%, rgba(63,63,63,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
background: -webkit-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0 );
}
And, using jQuery, either add or remove the yellow class:
$('.background_animation_element').addClass('yellow');
That would ensure a gradual transition due to the transition duration property in the CSS file.
Adding animation to the degree of element linear gradient
You cannot animate gradient but in this case you can consider a simple rotation:
$("#anim-left").on("click", function() { $('.box').toggleClass('box-reverse');
});
$("#anim-right").on("click", function() { $('.box').toggleClass('box-reverse');});.box { height: 120px; width: 120px; position:relative; overflow:hidden;}.box:before { content:""; top:-25px; left:-25px; right:-25px; bottom:-25px; position:absolute; background: linear-gradient(90deg, red 50%, blue 50%); transition: all 3s ease-in-out;
}
.box-reverse:before { transform:rotate(180deg);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box"></div>
<button id="anim-left"> Animate To Left </button><button id="anim-right"> Animate To Right </button>Change background-position horizontal transition for color on scroll jQuery/CSS
Following the link you shared, I'm using Scroll event and that's your ultimate goal from what I understand.
So we can use $(document).ready() or $(window).on('load',.. to initiate with the first animation using the class .intro.
Then depending on scroll direction we toggle between two classes .slideleft and .slideright.
If that's a confusing choice of class names you can call them Up and Down.
$(document).ready(function() { $('.box').addClass('intro');});(function() { var lastScroll = 0; $(window).on('scroll', function() { if ($(".box").is(".intro")) { $('.box').removeClass('intro'); } var activeScroll = $(this).scrollTop(); //We check the scroll direction cond = Boolean(activeScroll > lastScroll); //each background sliding effect follow it's scroll direction $(".box").toggleClass('slideleft', cond); //DownScroll $(".box").toggleClass('slideright', !cond); //UpScroll lastScroll = activeScroll; });}());.box { width: 100%; height: 200px; display: inline-block; background-size: 200% 200%; transition: background-position 1s; background-image: linear-gradient(to right, #ff5851 50%, #F8F8F8 50%); background-position: left;}
.intro { background-position: 50%;}
.slideleft { background-position: left center;}
.slideright { background-position: center center;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box"></div><div class="lorem"> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p></div>implementing jquery fancybox over animated gradient background
Just apply CSS position and z-index to your elements like :
.fancybox {
...
position: relative;
z-index: 100;
}
#titles {
...
position: relative;
z-index: 100;
}
#gradient {
...
position: relative;
z-index: 10; /* lower for the gradient background */
}
Related Topics
JavaScript How to Check User Agent for Mobile/Tablet
How to Get Jquery or JavaScript to Change CSS Based on the Current Url
Bootstrap Dropdown Checkbox Select
Css/Js for Circular Cropping of an Image
How to Get the Exact Rgba Value Set Through CSS via JavaScript
How to Over-Ride CSS with User-CSS on Mobile Safari
How to Set the Margin of an Object in Ie
Css3 Replacement for Jquery.Fadein and Fadeout
How to Disable Caching of Static Assets Like .CSS and .Js in Jsf2
CSS in My JavaScript Widget Colliding with Target Page CSS
How to Pause CSS Transition Mid-Way
How to Apply D3.Js Svg Clipping After Zooming
How to Check That an Element Is Visible with Puppeteer and Pure JavaScript
Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links
Random Fullscreen Background Image on Browser Refresh
Why Are Initial CSS Styles Not Visible on Dom Element.Style Field