Question

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

＆＃13;

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

＆＃13;

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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果我认为它在移动设备上太不稳定/不可预测 - 我可以将此代码添加到我的javascript：

＆＃13;

// 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
			});
		});

＆＃13;

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

Answer 1

首先，非常感谢您分享您的代码！我真的很难以解决这个问题而且你帮助了我。我只想分享我用过的东西，以避免使用＆＃34;滚动＆＃34;而不是＆＃34;固定＆＃34; ...这对我有用，在桌面上使用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>

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

1 个答案: