Using Parallax with Image Slideshow

Question

I'm trying to create a parallax effect with a simple slideshow that I made.

First , I have one with just the basic parallax.js implementation: 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> 

This works, however, now I want this effect on image slideshow , with or without parallax.js is fine but I would like the same parallax effect:

I'm not sure how to apply it to the images:

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

Parallax effects are easy to maintain if you conceptually boil them down to their basics. I've added 2 lines of code to your project which (hopefully) will provide you with the result you're after. The code I added was

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

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

Answer 2

My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.

I hope this could help you.

 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

Try this, Hope this Helps..:)

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>