标签: parallax

DEMO

现在的想法是(而不是运动.png图像)用标准HTML元素填充图层,就像制作一个漂亮的移动2D网页一样.

你可以猜到我的第一个问题.无论我尝试什么,我都无法使点击事件通过100x100%div层找到 一个可点击的(或其他？)元素,而不是.layer本身.

也许制作图层height:0px; position:absolute;而不是附加相对定位的元素？

我正在尝试计算一个百分比数 (0.0 - 2.0/0% - 200%)，以便我可以在 div 进出视图时更改它的不透明度。

• 当窗口位于可视区域上方时，百分比等于或小于 0
• 当窗口位于可视区域的正中央时，百分比为 1.0
• 当窗口低于可视区域时，百分比为 2.0 及以上

在滚动进出视图时，它将是其中的一部分。

不知何故，我需要将窗口的垂直中心与区域的垂直中心进行比较，但我很难正确计算。

到目前为止我有

var p = {
    scrollTop: $(window).scrollTop(),
    documentHeight: $(document).height(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

if (p.windowHeight / 2 + p.scrollTop < p.contentHeight / 2 + p.contentTop) {

    p.percent = (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.contentTop);
}
else if (p.windowHeight / 2 + p.scrollTop > p.contentHeight / 2 + p.contentTop) {

    p.percent =  (p.windowHeight / 2 + …

我正在使用Stellar JS为一个元素设置一个背景图像,并尝试实现一个在视差中移动的居中图像.然而,当我尝试使用标准方法时,我意识到背景位置是由恒星更新的,然后覆盖了居中(我假设它正在覆盖它).我创造了一个小提琴来解释这种情况.

http://jsfiddle.net/captDaylight/wvuQm/1/

有没有办法让图像保持居中滚动？

(堆栈让我跟这个帖子一起使用代码,虽然在这种情况下它是微不足道的,小提琴上的例子非常简单,所以我发布了一些东西来绕过)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

<>我正在阅读关于背景位置的其他堆栈帖子,但是当我尝试进行更新时,它表明它似乎打破了视差.

http://jsfiddle.net/captDaylight/wvuQm/3/

我正在使用Materialise Framework来创建PhoneGap应用程序.

http://materializecss.com

他们有一个视差设置,你可以在这里看到他们的符号:

http://materializecss.com/parallax.html

当我运行它时,我的图像根本不显示.我的HTML看起来像这样:

<div class="row">
  <div class="col s12 m7">
    <div class="card">

      <div class="parallax-container" style = "height:100px;">
        <div class="parallax"><img src="/img.png"></div>
      </div>

      <div class="card-content">
        <h5> test</h5>
        <h6> test</h6>
        <h6> test </h6>
        </br>
        <p> test</p>
      </div>

      <div class="card-action">
        <a href="#">This is a link</a>
      </div>

    </div>
  </div>
</div>

我正在创建一个tvOS应用程序,我想在几个按钮上使用视差图像.来自文档:

要在您的应用中加入视差图像:

1. 创建一个UIImage对象.
2. 根据图像是否包含在应用程序包中或是否已下载图像,您可以加载不同的图像.
   • 使用imageNamed捆绑加载图像:
   • 下载的文件 - 使用imageWithContentsOfFile加载图像:
3. 使用加载的图像创建一个新的UIImageView对象.
4. 如果UIImageView是另一个视图的一部分,请在UIImageView上将adjustsImageWhenAncestorFocused设置为YES.

我知道它UIImageView在那里说,但我希望UIButton在主屏幕应用程序图标上发生相同的效果.

我已经创建了艺术作品,在资产目录中制作了一个堆栈,然后加载了图像imageNamed:,但UIButton它的行为不像是视差图像.它不像主屏幕图标那样摇摆不定.它看起来像一个平面图像.

是否还有其他东西需要启用才能UIButton使其像主屏应用程序图标一样？

UIButton* quitGame = [[UIButton alloc] initWithFrame:rectWithNewX(playAgain.frame, 985)];
[quitGame setImage:[UIImage imageNamed:@"quit.lsr"] forState:UIControlStateNormal];
[quitGame setAdjustsImageWhenHighlighted:YES];
fadeIn(quitGame, self.view, 0.5);

我一直在寻找很长时间（也在寻找第三方库）来制作某种“视差”，但没有Toolbar，我所看到的只是使用Toolbar，但这不符合我的最佳利益，因为我Toolbar在整个应用程序中删除了.

我按照这个例子：https : //www.youtube.com/watch?v=HO82ES_RiSQ但它并没有说服我......

有谁能解决这个问题吗？我想知道如何在不使用的情况下进行视差Toolbar

提前致谢

我有问题background-image.我的网站在Android设备上看起来不错,然后我发现iPhone和iPad不喜欢background-size: cover.

我通过设置修复了这个background-size: 100%.

在网络上的iPhone模拟器上,该网站看起来很不错,但只要在真实的iPhone(iOS 9.3)上测试该网站,就不会显示背景图像.

标题图像加载,此图像用作网站上的背景,它也显示在那里.唯一加载的背景正上方的另一个图像开始加载,但似乎由于某种原因中止.

图像的大小为:1920x1080.

网站:http://www.unterwasserfotografie-thomas-uhl.de/

更新:

我从下面尝试过Aziz的解决方案.使用背景大小:自动100%使智能手机上的图像看起来更好,但它们不会加载到移动苹果设备上.但是,如果设置了background-size:cover,所有背景都会被加载,问题是,只显示图像的一小部分(图像的右上角？!),这部分非常模糊(看起来像放大).由于我没有改变任何设置背景大小:覆盖到背景大小:100%自动,我不敢相信,图像相互堆叠.

目前我已经设置了背景大小:再次100%,这在桌面设备上看起来最好,到目前为止移动设备还可以,只要背景没有正确加载,我就不会开始担心布局了.

据我所知,这样的背景下,大小:100%的汽车是不是为背景的最好的方式,将definetly考虑解决方案1.我不明白的是,为什么只有在所有被加载一个背景,在iPhone上加载网站的时候.background-position:center是否只是将所有背景堆叠在屏幕上的相同位置,这样我才能看到已加载的最新背景？请记住:网站上总共有大约6个背景,但只显示其中一个背景,也就是在标题中使用其图像的背景.

感谢您的支持到目前为止,我将为这个问题设置一个赏金,因为我真的对这个问题感到绝望.

我正在做一个 tvOS 项目。这个项目包含了UICollectionView与UIImageView每一个内部UICollectionViewCell。首先，我adjustsImageWhenAncestorFocused在图像上使用，因为当单元格处于焦点时它看起来不错并且我想要具有“视差”效果。

当一个单元格处于焦点时，应该在图像上弹出一个标签（用于产品的标题），这不是问题。但我希望标题具有良好的可读性，这就是为什么我想在图像顶部放置渐变层。

问题： 当我将渐变层添加到 UIImageView 时，它会在它上面，但它没有“粘”在它上面。当用户进行视差处理时，它应该与图像一致，但它保持在其位置，原始图像确实在渐变层下方移动

问题截图

编码

let gradientLayer = CAGradientLayer()

override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
    
    gradientLayer.colors = [UIColor(red:0.00, green:1.00, blue:1.00, alpha:0.3).cgColor, UIColor(red:1.00, green:0, blue:1.00, alpha:0.3).cgColor]
    gradientLayer.frame = productImageView.focusedFrameGuide.layoutFrame
    gradientLayer.isHidden = true
    self.productImageView.layer.addSublayer(self.gradientLayer)
    
    if (self.isFocused){
        gradientLayer.isHidden = false
    }
    else {
        gradientLayer.isHidden = true
    }
    
}

补充问题

这是一个错误吗？因为我仍然不知道如何解决这个问题。我应该把这个给苹果吗？

效果很好，但图像被放大了。有什么线索可以解释为什么吗？

    #hero{
    background-image:url(../images/metalWorx_hero.jpg);
    width:1020px;
    min-height:398px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
     }

我想让我的divs相互滚动,没有它们向上滚出屏幕.

我用两个div来管理这个,但不能设法用第三个做同样的事情.

我在jsFiddle上做了一个例子:http://jsfiddle.net/gv8GU/ 所以当你这样做时它会起作用:

#one{
    width: 100%;
    height: 800px;
    position: fixed;

    background: gold;
}

#two{
    width: 100%;
    height: 800px;
    top: 800px;
    position: relative;

    background: goldenrod;
}

#three{
    width: 100%;
    height: 200px;
    top: 800px;
    position: relative;

    background: darkgoldenrod;
}

但这仅适用于前两个div.

因此,当第二个div(#two)一直滚动到顶部并进一步滚动时,我希望第二个div保持在顶部,在第二个div上滚动第三个div(#three).