Smooth background images transition - Javascript

Question

4.00/5 (1 vote)

See more:

http://www.chooseyourtelescope.com/ (>> The site is not entirely responsive yet, so please watch it on a minimum 15'' screen, otherwise you wont see what I'm talking about)

When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image1>blank>image2). It s working on IE11 but sometimes with a lag. I didn t try with the other browsers.

How to make a smooth transition with a quick fade?
Image1>image2, not image1>transition color>image2

Here is the code for the MOON button. Thats the same with the others.
(I don't know anything about Javascript. I found the script below on Stackoverflow.)

**HTML**

HTML

<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>

**CSS**

CSS

.image-home {
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: url(Frontpage.jpg);
         background-size: cover;
         display:inline;
         top:0;
    }

**JAVASCRIPT**

JavaScript

jQuery(function(){
        var $body = $('.image-home');
        $('#top-logos-moon-front').hover(function(){
            $body.css('background-image', 'url("Frontpage-moon.jpg")')
        }, function() {
            $body.css('background-image', '')
        })
    })

Posted 15-Aug-15 2:36am

edou777

Updated 15-Aug-15 4:43am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 15-Aug-15 11:39am

I observe not what you described, even on Chrome. I tried Mozilla and Chrome. My observations suggest that you do have the solution but make some logical mistake. The smoothness of transition depends on what button you hover on, in what order. Look at the ring (second from right) and plus: they work smoothly if shown not the first time. Buttons on left are darker and go through your transition through a black screen. Mozilla show no less problem then Chrome. It could be just the play of download times and times of getting image from a browser cache. Maybe your problem is showing no background.
—SA

edou777 15-Aug-15 12:16pm

Thanks for your reply. I tried again and its still doing defaultBG>blank>moonBG when hover in and moonBG>defaultBG (which is ok) when hover out. And the same with the other buttons whatever the order. I suppose I wont be the only one to have this problem. As you said it has probably something to do with the cache.

But anyway do you know how I can make a fade transition? How can I increase the transition time between the different backgrounds (hover in and out) from this Javascript code?
Maybe this will fix the bug.

Sergey Alexandrovich Kryukov 15-Aug-15 12:20pm

I never tried, see jQuery effects. I would rather work at images, they don't look convincing. There is a sharp vertical line in the center, this is unacceptable. Perhaps you could use semi-transparent images superimposing, to never remove the shared background...
—SA

edou777 15-Aug-15 12:38pm

Hehe I see in your profile you are architect like me!
Thanks for your advice but I actually like the background I did, even the "unacceptable" vertical line in the middle ;) which I think matches perfectly with the big logo.

Sergey Alexandrovich Kryukov 15-Aug-15 22:26pm

No, I don't. If I had an exact suggestion, I would post a formal answer. It's obvious that a combination of semi-transparent images could be used, but I'm not sure it can solve the problem. The line is pretty bad, it hurts the eyes, believe me.
—SA

edou777 15-Aug-15 23:23pm

Anyway using semi-transparent or opaque images would do exactly the same bug. The problem is the transition between the images, not their transparence.
About the "line", please stop thinking you know whats beautiful and I dont. I know it kind of hurts the eyes, but thats excactly what I like. As you can see the celestial bodies are totally out of scale, so its more like an abstract compostion than something realistic. Its like saying its hurts the eyes when watching a cubist painting for example. IMHO this unique line gives strength to the image and as I said matches with the vertical line of the main logo.

Sergey Alexandrovich Kryukov 16-Aug-15 9:42am

I understand. I mean different thing. It's like double buffering used to fight flicker. The image can be changed slowly, but it is not very visible, because new image is similar to the previous, there is no intermediate image in between which appears in the process of rendering. The problem I can see is all-black background which appears between changes.
—SA

edou777 16-Aug-15 13:28pm

Look at now the transition is slower and there is no black background between images anymore. But the transition doesn t work on IE11 (at least).

Sergey Alexandrovich Kryukov 16-Aug-15 22:40pm

I looks much better now (I tried only with Mozilla), but now the Saturn (second from right) button permanently shows blank background, until selected. The mere fact that something depends on button suggests that you have some pure logical bug. I would analyze the state machine more thoroughly.
—SA

edou777 17-Aug-15 15:18pm

Now it seems its working on all browsers. Is there still the Saturn button bug with your Mozilla version ?

Sergey Alexandrovich Kryukov 17-Aug-15 16:20pm

It worked out from the first attempt, cannot tell you all the detail.
—SA

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

edou777 · Accepted Answer · 2015-08-17T10:13:00

I found a solution by using the opacity property. Now its working perfectly.

**HTML**

<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />

**CSS**

.hover-backgrounds {
    opacity:0;
    transition: opacity 0.6s linear;
    top:0;
    position:absolute;
    background-size: 100%;
}

**JAVASCRIPT**

$(document).ready(function (e) {
    $("#top-logos-lune-front").hover(function (e) {
    $("#background-moon-front").css("opacity", "1");
    }, function() {
        $("#background-moon-front").css("opacity", "0")
    })
 });

Smooth background images transition - Javascript

1 solution

Solution 2

Add your solution here

Preview 0

Smooth background images transition - Javascript

1 solution

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us