恒星视差运行在桌面，静态图像在移动设备上

Question

我的网站正在使用Stellar.js在覆盖用户屏幕宽度的许多图像上创建视差效果。恒星在图像上滚动的速度是用户向下滚动页面速度的一半，创造了一个很好的效果。我最初使用的代码是:

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在桌面上实现完美视差，在移动和设备上固定图像。希望能有所帮助!

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