Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery / Transition

Jquery Css Background Image Slideshow With Transtion Effect

Post a Comment
I need to add some nice transition fade effect to the change of the following simple sideshow: I have tried appending .fadeIn() to the jquery line that changes the image, and tran

Solution 1:

Try this:

.header_summer {
    background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px0px;

    background-size: cover;
    min-height:920px; /* 800px; */transition: background-image 0.2s ease-in-out;
}

Solution 2:

It should work with just the transition property defined on your CSS class as any changes to the element should trigger the transition (i.e. when you update the background, you should see the transition):

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px0px;
  background-size: cover;
  min-height: 920px;
  /* Transitions and their cross-browser friends */
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

The syntax generally uses the form <property> <duration> <timing-function> <delay>, so your current transition would be looking for the opacity property to change, which it doesn't seem to be.

You should consider using background instead :

transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;

Example

enter image description here

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px0px;
  background-size: cover;
  min-height: 920px;

  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>Flowers and stuff...</title></head><body><!-- Your element to switch through --><divclass='header_summer'></div><scriptsrc="https://code.jquery.com/jquery-2.1.4.js"></script><script>// Define your imagesvar images = [
 "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
      "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
      "https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
      "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
      "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
      "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
    ];
     // Define your variablesvar i = 0;
    var div;
    $(function() {
      // Set up your div
      div = $('.header_summer');
      console.log("loaded");
      setTimeout(changeBack, 1000);
    });

    functionchangeBack() {
      i = ++i % images.length;
      if (i > images.length) {
        i = 0;
      }
      console.log('url("' + images[i] + '");');
      div.css('background-image', "url('" + images[i] + "')");
      setTimeout(changeBack, 5000);
    }
  </script></body></html>

Post a Comment for "Jquery Css Background Image Slideshow With Transtion Effect"