Great plugin! Making it work for mobile?

[sandman21]

Hi,

Love this plugin it is exactly what I needed!

The only issue is I can't figure out how to make it responsive. I'm not attached to having the images remain parallax on touch screens so if I can just disable the plugin this is fine too.

Thanks, Matt

[alumbo]

Hi @sandman21, I'm going to think about percentages in addition of pixels parameters and the ability to disable effects easily.

[ddiegommachado]

Hello I tried to use the plugin but could not. use the steps

• Paste the js in html (easing.js and parallax.js)
• Data-parallx on the html element What can be wrong ?? Hugs

[fif7y]

First of all, thanks for this amazing plugin.

i too would love having percentages in the values and ability to turn it off when not required (aka mobile) to work with responsive layouts.

[jamesarmenta]

Disabling the plugin for mobile is relatively simple to do. The following code can be implemented after checking window width on load or resize.

var mobileWidth = 600;

if($(window).width() > mobileWidth ){
    //parallax movement onscroll
    $(".parallax").each(function(){
      var value = 20px;
      $(this).attr("data-parallax","{\"y\" : "+value+"}");
    });
  } else {
    $(".parallax").each(function(){
      //NO MORE PARALLAX MOVEMENT
      $(this).removeAttr("data-parallax");
      $(this).removeAttr("style");
    });
  }

Of course this would also remove any other inline styling you might have, but it will work for general use. Cheers.

[JonnoFTW]

I made a jQuery script that actually works (you'll need to modify it to stop parallaxing at the right width though, you'll also need to give each thing its own id.):

<script>
var mobileWidth = 1052;
var data_parallax ={};
$('.parallax').each(function() {
    data_parallax[$(this).attr('id')] = $(this).data('parallax');
});
$(window).resize(function() {
  if($(window).width() > mobileWidth ){
    //parallax movement onscroll
    $(".parallax").each(function(){
      $(this).attr("data-parallax",JSON.stringify(data_parallax[$(this).attr('id')]));
    });
  } else {
    $(".parallax").each(function(){
      //NO MORE PARALLAX MOVEMENT
      $(this).removeAttr("data-parallax");
      $(this).removeAttr("style");
    });
  }
});
</script>

That said, this plugin would be nice if it you could specify the start and finish of the parallax as a percentage of the element height and then scale to fit accordingly.

[pablougas]

You can stick with full Javascript and block it also, seems a bit extensive to remove the attribute. This also accounts for multiple browsers. Not 100% certain but I think it covers all your bases pretty simply and you can just replace this with the first few lines of your code.

`$(function() { var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
if (width >=1100 && height >=800) {
    //if it meets screen size run.
    ParallaxScroll.init();
}
else {  
    //if screen size too small then do not run 
    return;
}

});`

I specified those sizes because any screen size smaller than that seems to be al janky, things still seem to flow alright on anything that size or bigger depending on how much movement you have. Also accounts for ipads and how they're positioned. Have not tested it on transitioning to portrait on ipad after loading it in landscape.