How would you fade in a background image (the body tag, and it is tiled) with jQuery? The background color is white and in a callback function I want to toggle the background image to on and off.
Any ideas?
Using jQuery for Background Image Animations
Unfortunately you can't really fade in a tiled background image. Since the image is part of the CSS rendering system it doesn't have a node in the DOM.
You can do some fancy stuff by using a frame type animation by moving the position of the background image but this wouldn't work with:
A. a whole body background
B. a tiled image.
Related
i am trying to make a slider here in javascript and what am i trying to do is i am trying to have a single div and use the background image as the image placeholder which has the background size and cover property.
And i am trying to use navigation keys for loading previous and next images.
Now the problem is that how can i preload some images and use then as in Bg property so that when i click the next arrow, the images do not have to wait for the next image as background for the div to load. Thanks.
I have found a similar problem in this link:
Preloading CSS Images
Is it possible to have a row of Links and when the mouse hovers over one of the links, the background fades into the background image set to that link.
Lets say theres 5 links [Coke][Burger][Cow][Chicken][Dog]
when you load the webpage there is just the original background, but then when you hover over [Chicken] the background image changes to a chicken, then if you hover over [Coke] Theres the cocacola logo as the background.
I think you get the idea?
well, I would do that by css using ids (#lnkCoke, #lnkBurger, etc.) and the :hover pseude-class
but if you want to do it by javascript I would use data attributes (Coke) and mouse events (onmouseover and onmouseout) to change the background image
I'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.
What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using swipe gestures. These are all gray over a black background.
What I'd like to accomplish is have a sort of spot light gradient in the center of the screen that only effects the divs on the page and not the black background. This spotlight would be fixed so that when swiping through cards, it remains in the center of the screen.
I know I could overlay a div with a spotlight image as its background, but obviously that would mess up clicking/swiping on the page. And it would effect the black background.
Anyone have experience doing something like this?
A simple CSS solution (no events required)
Create a full-page-width bg image with the spotlight gradient.
Give each div this bg image, with a background-attachment value of fixed.
No matter where each div happens to be on the page at the time, it will act as a window through which you can see part of the spotlight gradient. In effect, the bg image stays fixed in place while the div moves over it.
Fiddle demo, and the same demo with heavily-rounded corners.
Alternately, it might be possible to give each div the same radial gradient in CSS (also fixed), rather than creating a static image file.
Try to use an absolute positioned div with a gradient. For passing through that div events use css property pointer-events (not supported by IE) or see that resource: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
I am aware that using CSS sprites is the way to go when you use images for both states, but what about when you have text as the unhovered state & an image on hover?
There a few ways I can think of, but wondering which method is the best in peoples opinions?
I can think of doing it via JavaScript or loading it via a hidden CSS element.
Are you using CSS Sprites for other relevant images on your website?
If not, then you should do it.
Have your "other relevant images" and "menu images" in the same sprite image.
Even if it's just for one other image, it will mean your :hover menu images are automatically preloaded.
You can use the same sprite, just set the sprite to a transparent section, or background-position out of the button, and when in hover, set it to the right place and text-indent the text, if the button image has the text on it.
Most browsers won't preload hidden images.
is there any possibility how to load an image with jQuery in background and than animate the transition? I have a gallery of big fullscreen images as a background for my website. I have paths of all images in some hidden elements, at first I make the background div bit transparent, than I change the background-image property with jQuery and at last I make it again visible..But there is a bit long time before the image is loaded. I dont want to show any loader or something else..I only want to load the image in background and than male the transition..Is it possible? Thanks
did you try jquery image load
http://api.jquery.com/load-event/