标签: parallax

我遇到过一些很棒的教程(特别是我现在正在看这篇教程:http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/); 然而,它们似乎都涉及一个<div>固定的背景图像.如果我的图像在<img>标签中,是否可以实现类似的视差效果？

我正在使用react-spring 中的视差来创建视差效果。我知道可以使用其父级的高度来设置其面积。然而，此解决方案在滚动时通过保持 和 在屏幕上可见而导致奇怪的行为。我在这里有几个问题：

1. 我怎样才能以正常的方式设置这个布局？
2. 我是否需要将 和 放置在具有固定高度的 ParallaxComp 内部（我希望有更好的解决方案）？
3. 有没有办法根据里面的内容来假设其高度，而不是使用道具因子？

先感谢您。

代码沙箱

应用程序.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

视差Comp.js

import React from "react";
import { …

我正在尝试制作具有视差效果的水平剖面。背景中应该有一个图像，其滚动速度与页面不同。

问题是：我希望视差元素包含在父元素中，因此父元素的工作方式有点像子元素的掩码：子元素仅在父元素的边界内可见。

我知道这可以通过在两个背景元素之间设置视差元素来实现，这些元素的背景位于视差元素“上方”并遮挡它，但此方法不适用于我的情况。

我想到的一个明显的想法是在父级上使用溢出：隐藏。然而，这会破坏 3D 变换，因此不存在视差。

如何达到所描述的效果？

这是一个代码笔： https: //codepen.io/rradarr/full/mdwgard。我希望红色矩形在带有黑色边框的“视差容器”之外不可见。

* {
      margin: 0;
    }
    
    html, body {
      height: 100%
    }
    
    main {
      position: relative;
      width: 100%;
      
      perspective: 1px;
      transform-style: preserve-3d;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100vh;
      
      background-color: blue;
    }
    
    .static {
      min-height: 800px;
    }
    
    .parallax-container {
      border: solid black 3px;
      height: 600px;
      width: 100%;
      transform-style: preserve-3d;
      position: relative;
    }
    
    .parallax-child {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateZ(-2px) scale(2.01);
      z-index: -1;
    }
    
    #img-or-whatever {
      height: 900px;
      width: …

我正在研究Parallax for webdesign的教程和展示,所有这些都使用jQuery在页面上实现所需的结果.是否可以在Facebook Apps中使用视差效果？特别是页面内的应用程序(页面选项卡).

我注意到Facebook Tabs Apps无法正常使用某些jQuery函数,因此这可能会破坏滚动所需的结果.此外,它将在iframe内部,我已经看到了视差+ iframe的一些不良结果.

参考一个好的视差代码:Smashing Magazine Parallax Tutorial

我想知道是否可以在用户滚动时在网站上动态绘制曲线.我很确定可以使用带有bezierCurveTo()方法的HTML5 Canvas来完成它,但这只是立即绘制出来的东西.

这将用于使用skrollr库的视差网站.

那里有一个图书馆可以让这很容易吗？

有什么建议？

我在过去创建了一些网站,其中scrolldeck.js具有标准的全屏幕背景,其中有一层ontop和文本(标准滚动视差风格),这不是我想要的.

我正在寻找一个脚本或教程(或示例),以便在滚动时在前景中设置单个div标签(图像)动画/移动.我将在一个页面的垂直滚动网站上使用它,所以当您滚动我希望奇怪的图像以不同的速度滚动并具有开始和停止位置.我不想要视差的整个背景.

提前感谢一堆

编辑:这是我正在寻找的更好的解释:

图片向下滚动页面,滚动时你看到一个漂浮的瓶子(透明png),你继续向下滚动阅读内容,并且在某个点上,当你继续滚动它时,瓶子会很好地放在桌子上(背景的一部分)不再动了.

很好的目标是让元素(图像)移动到预定位置(基于滚动),然后在它们到达最终静止位置时保持放置.

编辑2:这里有一些示例网站:
http: //jessandruss.us/ - 这个网站完全符合我想要的关于此时的2/3:查看截图
http://smokeybones.com/ - 汉堡很好,我想要的效果,最小但它滚动时移动到位.

我已经看到很多解决方案用于parallaxing分层div或带有背景图像的部分...我希望有人有一个现有插件的解决方案或知识,用于parallaxing具有多个CSS背景的div /部分,例如:

background: url(foo.png), url(foo2.png), url(foo3.png);
background-position: x x, x x, x x;

我原本是在寻找这个问题的答案,但在我提出这个问题之前,解决方案就出现在了我身上,而且效果很好.

基本上,我的问题方式,在iOS 7下你可以有一个随视差移动的阴影层吗？答案是肯定的,这就是你如何做到的;

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.layer.masksToBounds = NO;
    self.view.layer.cornerRadius = 2; // if you like rounded corners
    self.view.layer.shadowOffset = CGSizeMake(1, 1);
    self.view.layer.shadowRadius = 2;
    self.view.layer.shadowOpacity = 0.5;
    UIInterpolatingMotionEffect *verticalMotionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.shadowOffset.height" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    verticalMotionEffect.minimumRelativeValue = @(20);
    verticalMotionEffect.maximumRelativeValue = @(-20);

    UIInterpolatingMotionEffect *horizontalMotionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.shadowOffset.width" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    horizontalMotionEffect.minimumRelativeValue = @(20);
    horizontalMotionEffect.maximumRelativeValue = @(-20);

    UIMotionEffectGroup *group = [UIMotionEffectGroup new];
    group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];

    [self.view addMotionEffect:group];
}

不是特别困难.

我正在尝试自定义活动,如Whatsapp Group Profile页面,我需要放置,左边是1个图像,图像右边是布局中的两个文本,右边是两个图标.目前可用的折叠布局仅适用于Imageview.我尝试类似于下面的橙色屏幕截图,我将我的布局代替Imagview折叠到工具栏中,当滚动到顶部时,图像textview和图标从下面的布局转移到顶部的工具栏.尝试了所有可能的方式,Imageview在那里,但在布局我无法实现.

我在页面上安排了元素的位置–通过CMS控制的位置，该控件为每个元素提供了宽度，顶部位置，左侧位置，z索引和“速度”。

该速度用于使用JS创建视差效果。它取“速度”，并用window.pageYOffset– 计算。如果速度小于0，则将window.pageYOffset速度除以速度；如果速度大于0 window.pageYOffset，则将速度乘以速度。在滚动时，它会调整Y平移以产生这种“视差”效果。

通常，这一切都很好，但是当您更改滚动元素的Y位置时，您会在底部留下一个“间隙”（如果滚动速度与用户滚动速度匹配，元素将位于此处）。

为了纠正这一点，我想我会获得最底部的元素，并获得其getBoundingClientRect().bottom位置并在滚动时减小容器的高度以匹配该元素的底部，因此当您向下滚动或向上滚动时，容器会收缩/展开以匹配，从而消除差距。

但是，这似乎不起作用。数学/逻辑错误或者我错过了整件事。

下面是我的代码，我建立了一个JSFiddle来帮助可视化。

https://jsfiddle.net/6up3vqjn/2/

// Runs on init and resize
function parallaxInit() {

  var $container = $('.parallax'),
    container = $container[0];

  var testArray = [],
    $testLastElement;

  $('.parallax > .group').each(function() {

    var $group = $(this),
      group = $group[0],
      groupBounds = group.getBoundingClientRect(),
      $lastElement,
      lastElementBoundsBottom = 0;

    $group.find('> div').each(function() {

      var $div = $(this),
        div = $div[0],
        initTop = $div.attr('data-top');

      if (initTop == 0) {
        $div.css('top', '0');
      } else {
        $div.css('top', $(window).width() …