恒星视差可在桌面上运行，在移动设备上为静态图像 [英] Stellar Parallax to run on desktop, static image on mobile device

问题描述

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

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>

我发现，如果我将背景附件从固定更改为滚动，则视差效果将在台式机和ios上均起作用.虽然在ios上有些混乱，但是当用户在横向和纵向之间切换时很难进行配置.由于这个原因-使恒星反应灵敏，这似乎有所帮助.新代码是:

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>

如果我认为它在移动设备上过于混乱/无法预测-我可以将此代码添加到我的javascript中:

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.

推荐答案

首先，非常感谢您分享您的代码！我真的很难解决这个问题，而你帮助了我.我只想分享我使用的内容，以避免使用滚动"而不是固定"来拖延时间……这对我有用，使用stellar.js在台式机上完美的视差，并在移动设备和设备上固定了img.希望可能有用！

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>

这篇关于恒星视差可在桌面上运行，在移动设备上为静态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！