The Random Quote Challenge - A Few Ideas for Improvement

Hi folks,

I completed my random quote challenge (you can view that here). This one really helped me understand a lot more about HTML/CSS and JSON. The problem I have now is trying to implement fading for the body’s background image. I tried twice with different methods but on my third attempt I had a fairly different idea, which I will outline below. I’m asking for another set of eyes to look this over so that I don’t end up chasing my tail again…so all feedback is welcome!

Aim: Each time the New Quote button is clicked, the old background image should be faded out and a new one faded in.

  1. Implement a div (#masker) which then nests my entire quote box This sits directly under the body element. Set it’s opacity to 0 so that it is in effect invisible. Set the background-color attribute to a neutral tone.

  2. Relatively position #wrapper and set the z-index property so that it pops above #masker and thus isn’t hidden.

  3. Set the background-image property for the body to Unsplash’s URL (which generates a random background at each new call)

  4. Add the following logic to the doPic() function which fires whenever the ‘New Quote’ button is clicked:

    a. Use jQuery’s animate function to change the opacity on #masker to 1
    b. Set a callback function which changes the background-image on the body element
    c. Use jQuery’s animate to once more change the opacity on #masker to 0

This way the fading effect is done by the overlaid div, since I can’t fade the body image directly. Does this make sense to everyone? I would love to hear about any alternate approaches if possible.

Happy coding!

Rgds,
Josh.

So you want a fade-to-white, fade-back-in effect on changing the page? What you describe makes sense–are you thinking of using .fadeIn() and fadeOut()? Of course you could also have no body background-image, but just a background-color of white, and then fade out and back in an Unsplash image on top of it. But your way is probably simpler in terms of layout.

1 Like

Thanks Abdi, I’m going to try and implement it this weekend. I think the biggest problem with the cleanliness of this is that I have no idea how to preload images, so I’m also implementing the masking div to cover the image reload. I looked around and saw a few but in those cases, the images were already stored locally, or the URIs were known in advance. Since unsplash returns a random image in a category I provide, I will never really know the URI until load time. Do you happen to have any additional ideas on that?

Not any good ideas. I mean sure, the preloading is simple enough: http://stackoverflow.com/questions/3646036/javascript-preloading-images. Due credit, I had no idea how to do it, and had to go Google. This page offers an even clearer picture. Though another page points out that this would increase the load time, and suggests delaying the function until after the page has loaded.

The trouble is, I could really imagine the user “getting ahead of” the preloading. As many quotes take less than a second to read, either you’d be preloading a lot of images, maybe more than you need (inefficient), or the user would be clicking through before they were preloaded anyway.

I’m no UX expert, but my instinct says rather than have the user “getting ahead of” the interface, it’s better to slow down their expectations with a nice, zen-like fading transition. I’m not sure whether “modify the user to suit your app rather than the app to your user” is bad UX or not, but it makes sense to me. Of course if it takes more than ca 2 second you might throw some little spinner or other animation in that expresses “loading.”

Maybe a nice medium would be to preload one or two images ahead of the current one. You know, you could just crossfade straight from one image to another. Or just put the images on a timer slideshow and not have it tied to the click at all (delaying the preload until a setTimeout after the first image has loaded