Stellar Parallax 在桌面上运行，在移动设备上运行静态图像

Question

我的网站正在使用 Stellar.js 在覆盖用户屏幕宽度的许多图像上创建视差效果。 Stellar 以用户向下滚动页面的一半速度滚动图像，从而产生良好的效果。我最初使用这个代码：

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>

我发现如果我将背景附件从固定更改为滚动，则视差效果将在桌面和 ios 上都有效。虽然在 ios 上有点不稳定，并且当用户在横向和纵向之间切换时配置起来很棘手。出于这个原因 - 做出了出色的响应，这似乎有所帮助。新代码是：

//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>

如果我认为它在移动设备上太不稳定/不可预测 - 我可以将此代码添加到我的 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
			});
		});

此代码成功地为我提供了在移动设备上具有相同尺寸的静态图像 - 并为我提供了桌面上的视差滚动效果。

Answer 1

首先，非常感谢您分享您的代码！我试图解决这个问题真的很糟糕，你帮助了我。我只是想分享我使用过的东西，以避免使用“滚动”而不是“固定”来避免滞后......这对我有用，使用 stellar.js 在桌面上完美视差并在移动和设备上修复 img。希望有用！

<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>