We Keep Coding

How do I have a background image change within a div using JS?

My issue is I am trying to get a background image to change every second within the first div of a travel blog I have been working on using JS. I am also having text display on top of the image. There are couple tutorials on YouTube but they just arent working for me.
my css is:
#title{
background-image: url("../images/Nature5.jpg");
background-size: cover;
padding-top: 350px;
padding-bottom: 350px;
}
And my Javascript is:
var changingImages = document.querySelector('title');
var images = [
"url('../images/Nature1.jpg')",
"url('../images/Nature2.jpg')",
"url('../images/Nature3.jpg')",
"url('../images/Nature4.jpg')",
"url('../images/Nature5.jpg')",
"url('../images/Nature6.jpg')"
]
setInterval( function () {
var bg = images[Math.floor(Math.random() * images.length)]
title.style.backgroundImage = bg;
},1000)
Perhaps the images are too large or maybe I'm just too new to JS.
Any help is appreciated!
I tried placing the variabule "changingImages" within the function also changing the "title.style.backgroundImage = bg;" to be more spacific.

please try this one
add class selector in query selector argument '.title'
var changingImages = document.querySelector('.title'); // the change
var images = [
"url('../images/Nature1.jpg')",
"url('../images/Nature2.jpg')",
"url('../images/Nature3.jpg')",
"url('../images/Nature4.jpg')",
"url('../images/Nature5.jpg')",
"url('../images/Nature6.jpg')"
]
setInterval( function () {
var bg = images[Math.floor(Math.random() * images.length) + 1] // the change
changingImages.style.backgroundImage = bg; // the change
},1000)
hope this work

How to get a JS function to execute itself

I have a background image (width = 2000px, height = 400px) sitting behind a div with width and height equal to 400px. My image is split into 5 blocks, all with width and height equal to 400px. I want my image to shift by 400px each time the function is called to emulate a GIF image.
var imageWidth = $("#imageScroll").width();
console.log(imageWidth);
var timer = setInterval(function(){ shiftImage() }, 250);
function shiftImage(){
$("#imageScroll").mouseover (function(){
$("#imageScroll").css({"background-position-x": (imageWidth)});
});
};
});
This is my jQuery code, and I have tried and failed on a lot of different code. imageScroll is the ID of the div that I want the image to be pushed through.

you have to define css of the image so that it repeats itself on the x-axis.
<style>
#imageScroll{
height: 400px;
width: 500px;
background-image: url('./background.jpg');
background-repeat: repeat-x;
}
</style>
then, at the bottom of the page, or in body onload, you should execute the following instructions.
intervalFunc = setInterval(shiftImage, 250);
function shiftImage(){
var currentBackgroundX = $('#imageScroll').css('background-position-x');
split = currentBackgroundX.split("%");
currentBackgroundX = split[0];
currentBackgroundX = parseInt(currentBackgroundX);
$('#imageScroll').css({"background-position-x": (currentBackgroundX + 25) + '%'});
}
I didn't give too much though about the positioning part actually, since that is a completely different subject. But what i'm trying to do here is, change the background-position-x by 25% every 250 miliseconds. You can change the inner workings of the shiftImage function.
If you want to stop the animation at any point, just run
clearInterval(intervalFunc);
Hope this helps
Edit: jsFiddle
Edit 2: edited fiddle link
Edit 3: edited fiddle link

Equivalent of #keyframes for jQuery

I'm looking for a way to emulate the CSS #keyframes animations using jQuery.
I need to change the background image each x seconds following a list of images provided when the user moves mouse over an element.
The CSS animations should be:
.readon:hover {
animation: readonin 2s;
}
#keyframes readonin {
0% { background-image: url(1.png); }
50% { background-image: url(2.png); }
100% { background-image: url(3.png); }
}
I've found plugins like Spritely but they works with sprites and I need instead to change the image background of the element.
Use the set-interval function of Javascript seems a bad solution because I can't find a way to stop the animation when the user moves the mouse out of the element.

Use something like...
var images = ["1.png", "2.png", "3.png"];
var $element = $(".readon");
var interval = null;
$element.hover(function () {
var $this = $(this);
var i = 0;
var fn = function () {
$this.css("background-image", "url(" + images[i] + ")");
i = ++i % images.length;
};
interval = setInterval(fn, 666);
fn();
},
function () {
clearInterval(interval);
$(this).css("background-image", "none");
});
jsFiddle of a similar concept (with background colours).
It should be clear enough to see what's going on. Basically we start looping over the images and setting them as the background image on mouse over, and reset it when the mouse leaves.

You can use a library like jQuery-Keyframes
to generate new keyframes at runtime if that is what you are after.

change a sequence of background images as spritesheet

I have conversation screen to be developed i have planned to change the background images for every millisecond so that it looks like a animation. I tried using jquery settimeout and setinterval but both the ways stack of images changing in small interval hangs the browser, any ideas of how to accomplish my task.
function change_background(new_image_source) {
var myimage = $( '#spriteanim' );
myimage.attr('src','style/images/Sprites/Screen1/'+new_image_source+'.png');
console.log(myimage.attr('src'));
timer = setTimeout( function () {
new_image_source = new_image_source+1;
change_background(new_image_source);
}, 50);
if(new_image_source>=10899){
change_background(new_image_source);
clearTimeout(timer);
}
}

Changing the src attribute will never work as you want. That's because the browser needs time to load the image. Even it is cached it is still too slow for animating. I'll suggest to combine your images into sprite and change the background-position. You can even do that with pure css transition.
For example -> http://jsfiddle.net/krasimir/uzZqg/
HTML
<div class="image"></div>
CSS
.image {
background: url('...');
width: 200px;
height: 200px;
transition: all 4000ms;
-webkit-transition: all 4000ms;
}
.image:hover {
background-position: -500px 0;
}
You can even use keyframes.
Here is how you can preload your images http://jsfiddle.net/krasimir/DfWJm/1/
HTML
<div id="preloader"></div>
JS
var images = [
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg'
];
var preloader = document.getElementById("preloader");
var preloadImages = function(callback) {
if(images.length == 0) {
callback();
return;
}
var image = images.shift();
var img = document.createElement("IMG");
img.setAttribute("src", image);
preloader.appendChild(img);
img.addEventListener("load", function() {
console.log("image loaded");
preloadImages(callback);
});
}
preloadImages(function() {
// your animation starts here
alert("Images loaded");
});
Of course you may hide the #preloader div with display: none;

Checkout http://spritely.net/
It'll handle the details of animating a spritesheet. Let's you set FPS and control playback.

I think 'every millisecond' is a bit too fast.
Image load takes some time. I think, you should load all the images once, before starting the animation. It will take some time, since number of images you are using seems to be 10899. And just hide all but one every few milliseconds. 'Few milliseconds', instead of 'every millisecond', should do your job.
UPDATE:
Name your images spriteanim0, spriteanim1... like this. After all the images have been loaded, and all have been assigned display: none, call this js function:
var new_image_source1;
function change_background(prev_image_source, new_image_source) {
document.getElementById('spriteanim' + prev_image_source).style.display = 'none';
document.getElementById('spriteanim' + new_image_source).style.display = 'block';
if (new_image_source >= 10899)
new_image_source1 = 0;
else
new_image_source1 = new_image_source + 1;
window.setTimeout(
function () {
change_background(new_image_source, new_image_source1);
},
50);
}
You can try this and change the setTimeout interval value accordingly, as needed.

Fading Banner Using `background:url()`

I have a banner enclosed in a div tag that contains my banner. I would like to get the banner to fade to the next image but unsure how to achieve the fading effect. I have tried using jQuery fadeIn() but it failed.
The reason why I need to use the background: url() is because I want this banner image to resize pleasantly when the browser gets resized. I am not sure if this is the best way of approaching my problem.
EDIT - My current code does swap the images in the banner, but does not apply the fadeIn() effect. The console does not report any errors.
CSS:
header div#banner {
background: url(../image/banner/00.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}
JavaScript:
var bannerImages = new Array();
var bannerCounter = 0;
function run() {
loadBannerImages();
runBannerTimer();
}
function loadBannerImages() {
var filePath = "image/banner/";
bannerImages[0] = filePath + "00.jpg";
bannerImages[1] = filePath + "01.jpg";
bannerImages[2] = filePath + "02.jpg";
bannerImages[3] = filePath + "03.jpg";
bannerImages[4] = filePath + "04.jpg";
}
function runBannerTimer() {
var t=setTimeout("swapBannerImage()",2000);
}
function swapBannerImage() {
$('#banner').fadeIn(1000, function() {
$('#banner').css('background', 'url(' + bannerImages[bannerCounter] + ') no-repeat center');
});
bannerCounter++;
if (bannerCounter >= bannerImages.length) {
bannerCounter = 0;
}
runBannerTimer();
}

Your setTimeout isn't correct; try the following instead:
function runBannerTimer() {
var t=setTimeout(function(){
swapBannerImage()
},2000);
}
EDIT
Here is the updated Banner Swap function:
function swapBannerImage() {
$('#banner').fadeOut('slow', function(){
$('#banner').css('background', 'url(' + bannerImages[bannerCounter] + ') no-repeat center').fadeIn('slow');
});
bannerCounter++;
if (bannerCounter >= bannerImages.length) {
bannerCounter = 0;
}
runBannerTimer();
}
Updated Demo Here

You could use multiple divs -- one per image -- and fade them in/out. The divs could still use the css background like you want, you'll just need to absolutely position them, so that they appear one on top of another. However, to get absolutely positioned divs to resize with the parent div (ie to get the "pleasant" resizing effect), you have to set up the css like so:
header div#banner {
... /* your background stuff here */
position: absolute;
left: 0;
right: 0;
height: 300px;
}
Note that you'll assign both left and right, which would make it take up the entire width of the parent. And, make sure that the parent has position:relative.