How to make background gradually change colors? - javascript

I'm trying to make a web page where the background color of an image gradually changes colors. I know how to change the background color of something in Javascript, but I don't know how to "animate" it so to speak (without using Flash).

You can use CSS transitions to get that effect. Just add that css code into the element that is changed from js:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
With that on css each time any style value is being changed that change is animated from current to new value by 1s.
It works only on modern browsers. See an example: click

Here is an example on how to animate the body tag background :
function animateBg(i) {
document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';
setTimeout(function() {
animateBg(++i)
}, i);
}
animateBg(0);​
Keep in mind that hsl isn't crossbrowser, you can also do the trick with hex/rgb colors.
Jsfiddle link : http://jsfiddle.net/euthg/

You might want to use the setTimeout() function:
function animateBg()
{
myElement.style.backgroundColor = someNewValue;
setTimeout(animateBg, 20); // 20 milliseconds
}
and invoke animateBg() in your body's onload handler. E.g., <body onload="animateBg()">.

I would try using a JQuery color plugin. Look at the examples here (click on Demo), they seem to do exactly what you describe.

Related

Animating delay on bootstrap container classes

I am using bootstrap framework on my website, with the content wrapped in class="container"
This has certain break-points when the screen resizes, the cols, margins, etc change.
I wanted to put a delay on that break point but not sure how to go about it. So when the side margins change from one size to another, the content doesn't just jump to the new size, but animates into it.
Here you have an example of the CSS that you can use:
-webkit-transition:width 1000ms ease-in-out;
-moz-transition:width 1000ms ease-in-out;
-o-transition:width 1000ms ease-in-out;
transition:width 1000ms ease-in-out;
Basically what it does, is that when the property "width" changes specifies a transition effect with a slow start and end of 1 second.
JSFiddle with an example. You have to move your mouse hover the red DIV to see the effect.
More information about this CSS property.
Try adding something similar to the following CSS to your container element:
transition: all 0.5s ease-in-out;

How to animate div on changing margin using js

div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.
Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

How to use CSS3 transitions

I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?
The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space
There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.

ToggleClass animate jQuery?

I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?
jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO
.toggleClass() will not animate, you should go for slideToggle() or .animate() method.
You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}
I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.
You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});
Should have checked, Once I included the jQuery UI Library it worked fine and was animating...

Delay and animate background

I want to make a background image disappear. It works.
But it fails when I try to delay it or to animate it.
Any guess what it's wrong and how to do it well?
$(function(){
$("#foto1").click(function() {
$("#foto1").delay(1000).animate.css({"background":"none"},2000);
});
})
http://jsfiddle.net/78W3u/
Tried like this
$(document).ready(function(){
$("#foto1").click(function() {
$(this).delay(1000).fadeOut(20000, function(){
$("#foto1").css('background', 'none') //<=== this remove the background after the animation stops
});
});
})​
http://jsfiddle.net/78W3u/5/
This will fadeout an image : http://jsfiddle.net/2MQeC/
$(function(){
$("#foto1").click(function() {
$("#foto1").fadeOut(2000);
});
})​
-- EDIT --
This will animate the background independently of the image : http://jsfiddle.net/2MQeC/1/
#foto1 {
background: black;
-webkit-transition: background 1.5s ease; /* Saf3.2+, Chrome */
-moz-transition: background 1.5s ease; /* FF4+ */
-ms-transition: background 1.5s ease; /* IE10 */
-o-transition: background 1.5s ease; /* Opera 10.5+ */
transition: background 1.5s ease;
}
​
$(function(){
$("#foto1").click(function(){
$this = $(this);
setTimeout(function(){
$this.css({
background: 'green'
});
}, 1000); // delay
});
})​;
As you can see, this rely on CSS3 transitions for background animation.
A better cross browser solution would be to use jQuery .animate() function.
But you can't modify as many properties as .css() could.
Extract from jQuery .animate() documentation :
Most properties that are non-numeric cannot be animated using basic
jQuery functionality (For example, width, height, or left can be
animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
However, you could change your markup and separate your image and your background in two div who are superimposed. This could simplify what you are trying to do.

Categories

Resources