0

I have a page where there is a div which is set to 100% width and height and which has a black background. This div covers the main content and after a delay fades, revealing the page content. The problem is that I also have a script which adds stars to the cursor. I wanted this to perform until the black div fades, but it doesn't start until the black div has faded to 80% and then stops when the black div dissapears. Totally out my depth here but wondered if anyone could suggest where I am going wrong. You can view the demo here...
Any pointers would be really appreciated.

3
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by Airshow
0

Helen,

jStars isn't particularly well written. It's not in jQuery's currently preferred plugin pattern and allows nothing more than for the visual effect to be attached to an element. However, its lack of the means to remove it should not be an obstacle in this case because, as I understand it, the effect you want is one-off per page load.

The code will be something like this:

$(function() {
    var $cover = $('#cover');
	var t_fade = 5000;
	var easing = 'linear';
	setTimeout(function(){
		$cover.fadeTo(t_fade*0.2, 0.8, easing, function(){
			$cover().jstars({
				image_path: 'images',
				frequency: 19
			}).fadeTo(t_fade*0.8, 0, easing);
		});
	}, 5000);
});

untested

The big unknown is whether or not the transition from pahese 1 to phase 2 will be seamless. As you see, I have specifiied 'linear' easing to make the transition as smooth as possible; otherwise the fadeout would go through a flat-spot at the transition point.

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.