I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms).
If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript?
Update 9/19/2010:
So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone.
Add a <div id="backgroundfade"></div> to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered.
Style as such -
#backgroundfade {
position: fixed;
background: #FFF /* whatever color your background is */
width: 100%;
height: 100%;
z-index: -2;
}
Then add this to your JavaScript scripting file (jQuery required):
$(document).ready(function() {
$('#backgroundfade').fadeOut(1000);
});
This has the effect of fading the #backgroundfade element (the box "covering" your actual background) out in 1 second upon DOM completion.
Yep:
Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:
document.onload = function () {
window.setTimeout (function () {
document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
}, 500);
};
In jQuery it would be
$(function () {
$('body').css ('backgroundImage', 'url(/path/...)');
});
If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder <div/>, position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:
var x = new Image();
x.onload = function () {
/*
create div here and set it's background image to
the same value as 'src' in the next line.
Then, set div.style.opacity = 0; (best, when the
div is created) and let it fade in (with jQuery
or window.setInterval).
*/ };
x.src = "/path/to/img.jpg";
Cheers,
I haven't done this myself, but it might work.
You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.
i see this link ,
http://fragged.org/dev/changing-and-fading-body-background-image.php
the idea is :
apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....
you can now reference the bottom layer by id and change the opacity.
all it needs is a stack / array of background mages to apply as a property to the layer...
I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.
The HTML:
<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>
The jQuery:
$(window).load(function() {
$("#backgroundImage").fadeIn("slow");
});
Why not use a ready-made script: this one makes a background image fade-in on page load.
It also fits the image to the dimensions of the window, but this can be disabled if not needed.
My solution:
HTML:
<img id='myImg' />
CSS:
#myImg{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
JS:
var img = document.getElementById('myImg'),
steps = 30,
appearTime = 1000;
img.src = "/path/to/img.gif";
img.onload = function(){
for(i=0; i<=1; i+=(1/steps)){
setTimeout((function(x){
return function(){
img.style.opacity = x;
img.style.MozOpacity = x;
img.style.KhtmlOpacity = x;
img.style.filter = "alpha(opacity=" + (x*100) + ")";
};
})(i), i*appearTime);
};
};
Related
First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.
I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here
So i have a working JS background changer.
Basically it changes the background every 5 seconds and between the change there is a fadein and fadeout.
However, the div that contains the background has content within in which i dont want to fadein and fadeout everytime the backgrounds are changed. I only want the background image to fadein and fadeout.
Is this possible?
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['images/mc/bgs/3.jpg','images/mc/bgs/1.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(images/mc/bgs/3.jpg)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
Here is the HTML code
<div class="cartregister" id="slideit">
<div class="container">
<h1>my content is here, i dont want this fading</h1>
</div>
</div>
Thanks,
You just need to place the text and image in different containers, and place text on top of the image with css's position: absolute property:
html:
<div class="container">
<div class="cartregister" id="slideit"></div>
<h1>my content is here, i dont want this fading</h1>
</div>
css:
.container {
position:relative;
}
.cartregister {
position:absolute;
left:0;
top:0;
width:800px;
height:100px;
}
h1 {
z-index:100;
position:absolute;
left:0;
top:0;
}
demo: http://jsfiddle.net/xq2Q4/
One potential solution is to use CSS transitions for your fade. You just need to add transition: background-image Xs; to your image container. Then when the background image is changed it will fade to the new one. Note that I don't think transition: is supported in IE8 or below.
Demo Fiddle
CSS:
//add all appropriate vendor prefixes here
transition: background-image 2s;
There isn't currently a way to specify an opacity/transparency level for a background image via CSS (which is what you'd want to modify to create a fade in or out that doesn't affect the element's children).
I think the most straightforward solution that will reliably work in all browsers is to have a separate HTML element for your background images and your content, like this:
<div class="cartregister" id="slideit"></div>
<div class="container">
<h1>my content is here, i dont want this fading</h1>
</div>
You can position the background image element behind the content with position:absolute and a lower z-index.
I was checking this example of slideshow and found a strange behavior.
I am using this code but the image under does not show until the above one is done fading out. Why? I expected the image #above to fade out to the image #under.
(Note that #above has z-index:10;)
<div id="current_image">
<img width="370" id="above" src="...
<img width="370" id="under" src="...
</div>
jQuery
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
var above = $('#above');
var under = $('#under');
under.prop('src', image);
above.fadeOut(1000, function () {
above.prop('src', under.prop('src')).css('display', 'block');
});
});
});
FIDDLE
The problem is that the 2 images in the #current_image div are not on top of one another, but the one image is vertically above the other image (the images are not stacked).
http://jsfiddle.net/cVNTG/2/
So, you just need to alter some CSS:
#current_image {
width:370px;
height:245px;
float:left;
overflow:hidden;
position: relative;
}
#current_image img {
min-height:100%;
position: absolute;
top: 0;
left: 0;
}
Now your images are absolutely aligned, and they're on top of one another. So as one fades out, the other one is showing behind it. If you had inspected the HTML/CSS with something like Firebug, you would have seen this.
I would consider rewriting the JavaScript portion of this. You don't really need to change src and all that. Just assign your #above and #below id's as needed, and then make sure #above has a higher z-index (or really, you probably only need to add/remove the #above id).
I know how to implement Full-Screen / Expandable background images; I typically use a jQuery method. EG: http://tinyurl.com/9yl4rbw
BUT! I'm trying to make it so the background image is different each time the page is visited. Not a slide show; but like the old javascript (EG: http://www.computerhope.com/j18.htm)
How could I combine the two; jQuery expandable background and on-page-refresh-new image javascript?
Anyone came across a quality plugin for this effect?
*Edit___*
I use the jQuery method as within the reference URL above; essentially below:
<!--Expandable BG code IE 7 +-->
<style>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
<!--Expandable BG code IE 7 +-->
<!--Full BG Call-->
<img src="Sandwichfullbg.jpg" id="bg" >
<div id="page-wrap">
<!--End Full BG Call-->
I'd like to discover a simple solution to having the background change on new page visit or page refresh; ideally holding around 30 images. EG: Refresh page > New rad Image; Refresh page > New rad Image; (x 30)
Add this code at the top of you JS. It will set the src property of the image to a random value from Sandwichfullbg0.jpg to Sandwichfullbg29.jpg (so 30 different images in total)
$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');
Why not just use the new background-size:cover, for the background, and then use jQuery to randomly change this background image as per the normal method?
I've created a jsfiddle for you, basically doing everything you need. (Keep clicking Run in jsfiddle and you'll see the background-image cycle randomly).
Be aware, background-size:cover, mainly works with newer bowers, but by using Modernizr this can be overcome.
Install Modernizr by linking it in your header
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
And in your HTML tag,
<html class="no-js">
Edit: As per the comments, I've made another way that has more browser support:
jsfiddle
This time I've just made it randomly apply a class, of which this class has vendor-prefixs and fixes for ie-7/ie-8 and all the rest really. It won't look perfect in IE8, but images will fully stretch to fit the height/width of the body.
Take a look at this. View the source and check it out. I use an image with a low z-index because it makes resizing easier. Also, I would optimize your background image so its not so big. It's almost a MB and it takes way too long to load. Your version doesn't resize well when the aspect ratio isn't widescreen.
I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?
Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)
Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.
Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.