Change background image onclick with easing

Question

I am implementing a site and I would like to change background images on click but with ease, like fade in fade out or whatever.

The onclick part is implemented with Jquery but I am struggling with the easing part.

I have searched the Web for this but every solution is using a div only in a small part of the page.

The problem for me is that I use these divs as a whole page, 100% width and height and I have content in front of the divs.

I thought about using sprites and animate the background position but that doesn't help because I want my page to be responsive and I have percentage on background url and sprites need you to declare fixed width (correct me if I'm wrong).

Also I must add that behind the divs there is an other div, so changing opacity solution can't help. I am implementing a site like this: http://www.samsung.com/global/microsite/galaxynote3-gear/

HTML:

<div class="Page" id="feauture3">
    <div id="feauture3_content">
        <div id="feauture3_1"><strong>Menu1</strong></div>
        <div id="feauture3_2"><strong>Menu2</strong></div>
        <div id="feauture3_3"><strong>Menu3</strong></div>
        <div id="feauture3_4"><strong>Menu4</strong></div>
    </div>
</div>

CSS:

#feauture3_1:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_2:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_3:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_4:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3 {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
        left:0; 
        background-size: cover;
        background-color:#e18764;
        color:red;
}

Jquery:

jQuery(document).ready(function($){
       $("#feauture3_1").click(function(){
       $("#feauture3").css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")');
    });

    $("#feauture3_2").click(function(){
        $("#feauture3").css('background-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")')
    });

    $("#feauture3_3").click(function(){
        $("#feauture3").css('background-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")')
    });

    $("#feauture3_4").click(function(){
        $("#feauture3").css('background-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")')
    });

});

Fiddle:

http://jsfiddle.net/9pWhN/1/

Thanks for your time.

Edit: I finally used a simple $("#feauture3").css('background-image','url("image")') and set a background-color to the whole div that matches the images(the real project dont have motorcycles as images). This was quite acceptable and I used this solution.

It would be too complicated right now cause the real project is very big and now its online and I cant deploy this from the start. I finally used a simple $("#feauture3").css('background-image','url("image")') and set a background-color to the whole div that matches the images(the real project dont have motorcycles as images). This was quite acceptable and I used it. — vaskort, Mar 04 '14 at 10:09

Lokesh Suthar · Answer 1 · 2014-02-12T08:48:53.993

2

How about css transitions ?

#feauture3 {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
    left:0;
    background-size: cover;
    background-color:#e18764;
    color:red;
    -webkit-transition:all 1.4s ease-in-out;
    -o-transition:all 1.4s ease-in-out;
    -moz-transition:all 1.4s ease-in-out;
}

Try this fiddle

edited Feb 12 '14 at 08:48

answered Feb 12 '14 at 08:29

Lokesh Suthar

3,201
1
16
28

Nice answer but flashes the image onclick. I would like a perfect transition! Thanks for your time. – vaskort Feb 12 '14 at 08:41
Well, it flashes because your CSS and jquery are not optimized. I just gave you and idea of how it can work. It's up to you how you use it. – Lokesh Suthar Feb 12 '14 at 08:50
No it flashes because it requests an image link :) If nothing better shows up I will use this. – vaskort Feb 12 '14 at 08:51
I used finally used transitions, but check my edit in original post to what I did. – vaskort Mar 04 '14 at 10:11

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

We can divide this problems into several parts:

How to add easing or fading effects to images answer is using CSS 3

#feauture3 {
position: fixed;
height: 100%;
width: 100%;
background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
left:0; 
background-size: cover;
background-color:#e18764;
color:red;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

2. How detect that image loaded and add src answer is using js hack

$("<img>").attr('src', 'http://picture.de/image.png').load(function() {
     $(this).remove();
     $('body').css('background-image', 'url(http://picture.de/image.png)');
});

Play with css3 easing fading

Question about image loading link

edited May 23 '17 at 12:26

Community

1
1

answered Feb 12 '14 at 08:30

Farkhat Mikhalko

3,565
3
23
37

Cant understand how the js hack can apply on my code though I need the transition not to flash. – vaskort Feb 12 '14 at 08:50
because before loading background image user can't see transition effect, so you must apply src attribute after browser complete loading image. Simple if user haven't image in cache he can't see transition first time – Farkhat Mikhalko Feb 12 '14 at 08:52
No you dont understand. I dont use an image tag to use the code you pasted. – vaskort Feb 12 '14 at 10:08
This img created only to preload image. I don't use this image! – Farkhat Mikhalko Feb 12 '14 at 12:59

score 0 · Answer 3 · answered Feb 12 '14 at 08:32

0

Try doing this to your features:

    $("#feauture3_2").click(function(){
    $("#feauture3").css({
        'background-image' :  'url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")',
        'opacity': 0
    })
    .animate({
        'opacity': 1
    }, 800);
});

Just apply that to each click event.

answered Feb 12 '14 at 08:32

danwarfel

890
1
6
13

Nice answer but I forgot to tell that i have other divs down from the div I want to change its background. So this shows the previous div. I am implementing a site like this. http://www.samsung.com/global/microsite/galaxynote3-gear/ – vaskort Feb 12 '14 at 08:38
Just specify your target. Same principle applies. – danwarfel Feb 12 '14 at 08:41

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Try this?

DEMO http://jsfiddle.net/9pWhN/6/

Add .fadeOut() before image change, and then .fadeIn() again with setTimeout().

JQUERY

$("#feauture3_1").click(function(){
   $("#feauture3").fadeOut(1000);
   setTimeout(function() {
       $("#feauture3")
           .css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")')
           .fadeIn(1000);     
   }, 1000);       
});

score 0 · Answer 5 · answered Feb 12 '14 at 09:13

0

Here is the fix - test for proper loading once both the external images loaded -

  jQuery(document).ready(function($){
  var img1 = 'http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg',
      img2 = 'http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg',
      target = $('#feauture3');

      $("#feauture3_1").click(function(){
          target.fadeOut(1000, function(){
              target.css('background-image', 'url('+img1+')');  
              target.fadeIn(500);
          });
      });

      $("#feauture3_2").click(function(){
          target.fadeOut(1000, function(){
              target.css('background-image', 'url('+img2+')');  
              target.fadeIn(500);
          });
      });

});

answered Feb 12 '14 at 09:13

Karthik Naidu

141
3

thanks, but it shows the div behind the div that i want to change its background. Check the link on my question. Thanks for your time. – vaskort Feb 12 '14 at 09:19
You can handle the background color also along with the bg image from JQuery – Karthik Naidu Feb 12 '14 at 11:18
Actually for your requirement i suggest you to go with a carousel plugin – Karthik Naidu Feb 12 '14 at 11:20

score 0 · Answer 6 · answered Feb 12 '14 at 09:51

0

I believe this may be what you are looking for -

http://css3.bradshawenterprises.com/cfimg/#cfimg7

Loading all the images on top of each other before transitioning them will not create the 'flash' you are talking about.

answered Feb 12 '14 at 09:51

d.abyss

204
1
4
26

I have stumbled upon this link yesterday, will give it a try. though its supposed to have content in front of the image thats why I use background-image url. – vaskort Feb 12 '14 at 09:53
If the div is going to be the parent div, it shouldn't matter if you have the images displaying regularly rather than as a background image – d.abyss Feb 12 '14 at 09:59

Change background image onclick with easing

6 Answers6

JQUERY