Stellar Parallax to run on desktop, static image on mobile device

Question

My website is using Stellar.js to create a parallax effect on a number of images that cover the width of the users screen. Stellar scrolls across the image at half the speed the user scrolls down the page creating a nice effect. I originally used this code:

MY CSS FILE
/* Separator About - Parallax Section */
.sep {
 background-attachment: fixed!important;
 background-position: 50% 0!important;
 background-repeat: no-repeat!important;
 width: 100%!important;
 height: 180px!important;
 position: relative!important;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.about {
background-image: url(../img/about-sep.jpg);

MY HTML FILE
<! -- ABOUT SEPARATOR -->
 
 
    <div class="sep about" data-stellar-background-ratio="0.5"></div>
 </div>
    </div>


 <script src="assets/js/jquery.stellar.min.js"></script>

<script>
   
  $(function(){
   $.stellar({
    horizontalScrolling: false,
    verticalOffset: 40
   });
  });
  </script>
</body>

I discovered if I change background attachment from fixed to scrolled, the parallax effect would work on both desktop and ios. Although a little choppy on ios, and tricky to configure when user is switching between landscape and portrait. For this reason - made stellar responsive, which seems to help. New code is:

//JAVASCRIPT

$(function(){
   $.stellar({
    horizontalScrolling: false,
    // Refreshes parallax content on window load and resize
  responsive: true,
     verticalOffset: 40
   });
  });

//CSS
.sep {
 background-attachment: scroll;
 background-position: 50% 0;
 background-repeat: no-repeat;
 height: 180px;
 position: relative;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 
}
.about {
background-image: url(../img/about-sep.jpg);

//HTML

<div class="sep about" data-stellar-background-ratio="0.5"></div>
 </div>
    </div>

If I decide that it is too choppy/unpredictable on mobile - I could add this code to my javascript:

// Stellar Parallax Script
  var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
  
  
  if( !isMobile.any() )
$(function(){
   $.stellar({
    horizontalScrolling: false,
    // Refreshes parallax content on window load and resize
  responsive: true,
     verticalOffset: 40
   });
  });

This code successfully gives me a static image with same dimensions on mobile - and gives me the parallax scroll effect on desktops.

Answer 1

First of all, thanks a lot for sharing your code! i had really bad times trying to fix this and you helped me. I just wanted to share what i've used in order to avoid lagging by using "scroll" instead of "fixed"...this worked for me, perfect parallax on desktop using stellar.js and fixed img on mobile and device. Hope could be useful!

<script>
var isMobile = {
                Android: function() {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function() {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function() {
                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                },
                Opera: function() {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function() {
                    return navigator.userAgent.match(/IEMobile/i);
                },
                any: function() {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                }
            };

            $(document).ready(function() {
                if (isMobile) {
                    $(".section1Paral").css("background-attachment", "scroll");
                };
            });

            if( !isMobile.any() )
                $(function(){
                        $.stellar({
                            horizontalScrolling: false,
                            // Refreshes parallax content on window load and resize
                            responsive: true,
                            verticalOffset: 40
                        });
            });
</script>