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

我的网站使用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
$(function(){ $.stellar({ horizontalScrolling: false, verticalOffset: 40 }); });

我发现如果我将背景附件从固定更改为滚动，视差效果将同时适用于桌面和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

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

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

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

乐观的后来者！ 使用我的工作流程，准时！ （针对居住在韩国的人）

如何检查一个关系是否已经build立 – 核心数据

错误：未find插件“EmailComposer”，或者不是CDVPlugin。 在config.xml中检查你的插件映射

iOS的IAP收据validation

在iOS 7中使用错误的状态代码来响应可达性

iOS显示UIImage全屏，缩放（捏和双击）启用

iOS Swift：谷歌login错误

如何在iphone SDK中更改date格式

按另一个button更改button的颜色

IOS核心蓝牙：获取API滥用警告