Cambiar la imagen de fondo al hacer clic con aceleración

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")')
    });

});

Violín:

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

Gracias por su tiempo.

Edit: I finally used a simple $("#feauture3").css('background-image','url("image")') y establecer un 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.

preguntado el 12 de febrero de 14 a las 08:02

Would you consider using third party plugins? -

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. -

6 Respuestas

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;
}

Prueba esta violín

Respondido 12 Feb 14, 08:02

Nice answer but flashes the image onclick. I would like a perfect transition! Thanks for your time. - Vaskort

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

No it flashes because it requests an image link :) If nothing better shows up I will use this. - Vaskort

I used finally used transitions, but check my edit in original post to what I did. - Vaskort

We can divide this problems into several parts:

  1. 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)');
});

Jugar con css3 easing fading

Question about image loading aquí

contestado el 23 de mayo de 17 a las 13:05

Cant understand how the js hack can apply on my code though I need the transition not to flash. - Vaskort

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

No you dont understand. I dont use an image tag to use the code you pasted. - Vaskort

This img created only to preload image. I don't use this image! - farkhat mikhalko

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.

Respondido 12 Feb 14, 08:02

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. samsung.com/global/microsite/galaxynote3-gear - Vaskort

Just specify your target. Same principle applies. - danwarfel

¿Prueba esto?

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

Añada .fadeOut() before image change, and then .fadeIn() de nuevo con 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);       
});

Respondido el 20 de junio de 20 a las 10:06

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);
          });
      });

});

Respondido 12 Feb 14, 09:02

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

You can handle the background color also along with the bg image from JQuery - Karthik Naidu

Actually for your requirement i suggest you to go with a carousel plugin - Karthik Naidu

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.

Respondido 12 Feb 14, 09:02

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

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 - abismo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.