$(function () {
function bgtx() {
$("body").css({
"transition": "background 2500ms ease-out",
"background": "100% 100% #"
+ String(Array(7)).replace(/,/g, function () {
var g = ("271314020a9b8c7d54da816e5f403221abcde0");
return g.charAt(Math.floor(Math.random() * g.length))
})
}).animate({
top: "0"
}, 2500, function () {
bgtx()
})
};
$.when(bgtx())
})
HTML/jQuery Live Background Color
-
14-07-2023 - |
Pregunta
How can change background (images/color) of HTML page, automatically with fadeout/fadein effect and 3~5 images/colors and repeat over & over using jQuery ?
Solución
Otros consejos
The easiest way I can think of to do this is to construct an array, put come colors into it and have another array that contains sources to images. I don't believe that this set-up will get you the best possible result but maybe it'll help you get there. I'd want you to take this with a grain of salt and apply your context to this solution.
First, in your CSS file:
.color-bg {
background-color: #eee;
}
.img-bg {
background: url(myImage.img);
// add some more properties to make it behave how you want
}
Now your HTML, based on this style would have to be something like:
<!-- Put all your header stuff up here -->
<script src="js/background-changer.js"></script>
<body>
<p> Wow look at all this content!</p>
</body>
In our background-changer.js file:
$(document).ready(function() {
var myColors = ["red","green","blue"]
var myURLs = ["path/1/image.jpg","another/path/to/img.jpg"];
for (color in myColors) {
$('body').attr('class', 'color-bg').delay(6000).css(
'background-color', color);
}
for (img_url in myURLs) {
$('body').attr('class', 'img-bg').delay(1000).css(
'background-image', 'url(img_url)');
}
});
This should get you boiler-plated so it behaves to your specifications.
You can use one JQuery plugin, for example here you can find some of them http://www.jquery4u.com/plugins/responsive-fullscreen-background-image-plugins/
If don't want a plugin, you need to create a div (or other) and put it with absolute position back other elements in the page. Then play with js to fadeIn/fadeOut inside images (maybe add to img tag an attribute data-bgcolor where put the color matched) .
Basically is how to build a slideshow.