我试图在滑过片段时模仿视差效果,我读过有关beginFakeDrag和fakeDragBy但是说实话,我不知道它是否是解决我问题的最佳方法.

任何人都使用ViewPager做了类似的事情,或者暗示我应该如何处理这个问题？

谢谢

我正在尝试使用skrollr创建一个简单的视差动画:我的网站在Chrome/Mac上运行良好,但我在ipad上看到异常行为.

在ipad上(在IOS模拟器上测试),

• 页面的主体根本不滚动(或者可以在动画div下面的背景中滚动？)
• 动画背景位置(折纸图案)在data-start/中定义的边界内向相反方向滚动(向下)data-top-bottom

在桌面上,效果我可以,如果我劈模拟的效果div#hero要position: fixed;在Chrome浏览器开发工具.

• 该skrollr例子如预期在IOS模拟器.
• 我<div id="skrollr-body"></div>刚刚结束</body>标签

有什么建议？

我正面临着创建介绍视图的挑战,比如"Cleanio"应用程序(https://itunes.apple.com/fr/app/cleanio-pressing-la-demande/id885856031?mt=8).
这是它的样子:

因此,背景和叠加层是独立移动的,而不是以相同的速度移动.
有没有人有一个起点如何实现？

因此,我使用Keith Clark的纯CSS视差理念构建了一个网站.它看起来不错,但我很好奇是否有人想出如何在iOS上允许惯性/动量滚动.

到目前为止,这是我的网站.

到目前为止我所知道的:

目前惯性/动量滚动不起作用,因为基本上整个页面都保存在容器中overflow-y:auto.因此,当您在页面上滚动时,您将在容器内滚动.在iOS上,您必须应用-webkit-overflow-scrolling: touch允许滚动不是视口的任何内容进行惯性/动量滚动.

如果添加-webkit-overflow-scrolling: touch到.parallax那么整个视差效果会中断. 这方面的例子

我已经尝试将iscroll.js添加到页面中,但它也会通过使.parallax容器中的子项以不正确的方式滚动来打破页面.它使视差层相对于视口而不是容器上下移动.

这导致的另一个问题不是那么大,但在这里很好解决,因为它与iOS相关的是页面永远不会进入minimal-ui,因为只有在视口滚动时才会发生.

我看到人们在博客文章中询问这个问题,所以我想我可以将相同的问题带到stackoverflow,看看是否有任何好主意.

谢谢!

translateZ使用set perspective(关键字:"parallax")相对于父级宽度/高度的父容器内部计算子元素的宽度/高度的公式是什么？

我想在两个轴上创建一个具有视差效果的站点.除了一件事,我能够弄清楚我的模型需要的一切.当它超过100%时,如何计算儿童的宽度/高度.由于父母的视角和儿童的翻译,儿童的宽度/高度在视觉上不再与父母的宽度/高度对齐.

用于缩放子元素的公式是:1 + (translateZ * -1) / perspective.但我无法找到宽度/高度的公式.顺便说一句:当孩子的宽度/高度<= 100%时,一切正常.
但是当宽度> = 100%时,请查看下图中的结果(容器具有顶部偏移以使事物可见).

为了正确,在我的特定情况下,方法是让所有子元素在视觉上具有相同的宽度/高度.

在SASS(首选):CSS中的PEN或SassMeister
:PEN

来自可能有用的规范的链接:
https://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix
https://www.w3.org/TR/css-变换-1 /#数学-描述

"谷歌搜索"很多,但没有找到任何指向我正确方向的东西.提前致谢...

html, body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#projection {
  perspective: 1px;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 { …

我正在制作一个2D侧面空间射击游戏,我需要一个可以无限滚动的背景(它是平铺或重复包裹).我也想实现视差滚动,所以可能有一个最低的背景星云纹理几乎没有移动,一个较高的背景星云几乎没有移动,最高的背景包含移动很多的近星.

我从谷歌看到我的每一层移动比它上面的层少50%,但我如何在libgdx中实现它？我有一个可以放大和缩小的相机,在物理800x480屏幕上可以显示从128x128像素(一艘船)到大面积空间的任何东西,其特征是纹理在边缘上多次包裹.

我如何连续地包裹较小的纹理(比如说512x512),好像它是无限平铺的(当相机被缩小时),然后我如何将这些多个纹理分层,将它们组合在一个合适的结构中(在那里) libgdx api中的一个？)并随着玩家的坐标改变而移动它们？我查看了javadocs和示例,但找不到类似这个问题的任何内容,如果很明显就道歉!

在单个页面中,我只包含jQuery 3.1.1和stellar.js用于视差滚动效果,但是当我尝试使用它时,$(window).stellar();我在控制台中收到此错误:

Uncaught TypeError: f.getClientRects is not a function (jquery-3.1.1.min.js:4)

我尝试使用migrate插件,如许多答案中所建议的那样,但并没有解决我的问题.

该片段只是为了向您显示错误.

$(function(){
  $('.main').stellar();
 });

<div class="main">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>

当鼠标位于"着陆内容"DIV时,我想让背景图像在X和Y轴上略微移动,它应该随着鼠标的移动而移动.它应该反向移动.例如.鼠标向下移动,"着陆内容"图像向上移动.

HTML

<div id="landing-content">
<section class="slider"> 
<img src="http://i.imgur.com/fVWomWz.png"></img>
</section>
</div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

JSFiddle http://jsfiddle.net/uMk7m/

任何帮助都会得到赞赏.

我正在尝试在UIScrollView内的UIView上创建一个Parallax效果.效果似乎有效,但不太好.

1. 首先,我将两个UIView子视图添加到UIScrollView并设置UIScrollViews contentSize.
2. 视图总结并创建一个{320,1000}的contentSize.

3. 然后我在scrollViewDidScroll中实现了以下内容:

   - (void)scrollViewDidScroll:(UIScrollView *)scrollView
   {
       CGFloat offsetY = scrollView.contentOffset.y;
   
       CGFloat percentage = offsetY / scrollView.contentSize.height;
   
       NSLog(@"percent = %f", percentage);
   
       if (offsetY < 0) {
   
           firstView.center = CGPointMake(firstView.center.x, firstView.center.y - percentage * 10);
   
       } else if (offsetY > 0){
   
           firstView.center = CGPointMake(firstView.center.x, firstView.center.y + percentage * 10);
   
       }
   }
   

   Run Code Online (Sandbox Code Playgroud)

这些代码行确实产生了视差效果,但是当滚动继续时,如果我滚动到原始起始位置,视图不会返回到它的原始位置.

我试过操纵视图图层和框架,都具有相同的结果.

任何帮助都感激不尽.

我想在具有视图寻呼机的活动中制作背景图像的视差滚动效果,图像应根据ViewPager滑动/滑动滚动.

我已经尝试使用 https://github.com/andraskindler/parallaxviewpager 它不工作它显示空白背景而不是显示图像.

这个gif描述了我的要求:

请帮我