将视差与图像幻灯片一起使用

Question

我正在尝试使用我制作的简单幻灯片创建视差效果。

第一个，我有一个只有基本的 parallax.js 实现： fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/

.parallax-window {
    min-height: 400px;
position:relative;

}

.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">

  

</div>
<div class="ok">Hey there</div>

这行得通，但是，现在我想在图像幻灯片放映上使用这种效果，有或没有 parallax.js 都可以，但我想要相同的视差效果：

我不确定如何将它应用于图像：

fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/

$(document).ready(function() {


var slides = $('.featured-wrapper img');

var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
 function roll(){
    var slide = slides.eq(currentPos);
    slide.fadeIn(2000);
        setTimeout(up,1500);
    }


 
 roll();
 
 function up(){
 currentPos +=1;
 slides.fadeOut(1500);
 setTimeout(roll, 500);
    if(currentPos > slideAtm -1){
      currentPos = 0;
    }
 }


});

.featured-wrapper img{
  max-width:200%;
  max-height:200%;
  min-width:100vw;
}
.featured-wrapper{
  height:500px;
  width:100%;
  overflow:hidden;
}
.things{
  font-size:50px;
  height:500px;
  width:100%;
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
  <div class="featured-wrapper" data-parallax="scroll">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
      <img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
      <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
       <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
      </div>
      <div class="things">I'm the stuff underneath</div>

Answer 1

如果您从概念上将视差效果归结为基本要素，则它们很容易维护。我已经在您的项目中添加了 2 行代码（希望），它们将为您提供您想要的结果。我添加的代码是

.featured-wrapper img{ z-index: -1; position: fixed; }

https://jsfiddle.net/simonstern/k4fygvhg/6/

Answer 2

我的建议是预加载图像，并使用 fadeIn / fadeOut 的完整事件而不是 setTimeOut。

希望对您有所帮助。

var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
                   "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
                   "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];

function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];

  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};


function roll(imagesArray, currentPos, max){
  if (max < 0) {
    return;
  }
  var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
  slide.fadeIn(2000, function() {
    slide.fadeOut(1500, function() {
      currentPos++;
      if(currentPos >= imagesArray.length){
        currentPos = 0;
        max--;
      }
      roll(imagesArray, currentPos, max);
    });
  });
}

$(function () {
  preloadImg(imagesArray, function (imagesArray) {
    roll(imagesArray, 0, 3);
  });
});

.parallax-window {
  min-height: 400px;
  position:relative;

}
.ok {
  font-size:50px;
  background:gray;
  color:blue;
  height:500px;
  width:100%;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="parallax-window" data-parallax="scroll"
     data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>

<div class="ok">I'm the stuff underneath</div>

Answer 3

试试这个，希望这有帮助..:)

fiddle link https://jsfiddle.net/e05m68wd/1/

$(document).ready(function() {
  var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];

  var counter = 1;
  var duration = 2000;
  var tTime = 300;
  var v = setInterval(function() {
      $('.parallax-mirror').animate({
        'opacity': 0
      }, {
        duration: tTime,
        complete: function() {

          $(this).find('img').attr('src', imgSrc[counter]).end().animate({
            'opacity': 1
          }, tTime);

        }
      });


      if (counter > imgSrc.length - 1) {
        counter = 0
      } else {
        counter++
      };
    },
    duration);


});

.featured-wrapper {
  height: 500px;
  width: 100%;
  overflow: hidden;
}
.things {
  font-size: 50px;
  height: 500px;
  width: 100%;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">

</div>
<div class="things">I'm the stuff underneath</div>

将视差与图像幻灯片一起使用

Using Parallax with Image Slideshow

html

javascript

css

jquery

parallax