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

Question

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

首先 ，我只有一个基本的parallax.js实现：小提琴： 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都可以，但是我想要相同的视差效果：

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

小提琴： 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

如果从概念上将视差简化为基本知识，则视差效果很容易维护。 我已经在您的项目中添加了两行代码（希望）将为您提供所追求的结果。 我添加的代码是

.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

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

小提琴链接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>