标签: parallax

这是我第一次使用Stack Overflow,所以如果我的问题有点冗长,我会道歉.我有点窘迫:

我想创建这种视差滚动效果,其中背景图像(其高度大于窗口的高度)始终与页面上的进度直接滚动.

例如,当您向下滚动页面的25%时,背景图像应滚动25%.当你滚动到页面的最底部(100%)时,背景图像也应该滚动到底部(100%).

使用这种视差效果,背景图像仍然会滚动,但它不会平铺或需要拉伸.不过,我目前的代码(如下所示),背景确实比页面上的内容更慢的速度大大滚动; 然而它最终到达背景的底部并开始平铺.

我觉得我在数学上遗漏了一些东西.有任何想法吗？

这是我正在使用的jQuery:

注意:背景图像的高度为1200像素

$(window).scroll(function() {
    var x = $(this).scrollTop(); /* Scroll Position */
    var y = $('html').height(); /* Height of Page */
    var z = x / y; /* Progress of current position on page */
    $('html').css('background-position', '0% ' + (z * 1200) + 'px');
});

编辑:我想出了问题:正如你没有开始滚动页面,直到你在视口的底部,我不应该开始滚动背景图像,直到那一点.所以我现在需要的是一个新功能.如果r是视口高度,则在向下滚动时,该函数不应向下移动背景图像以用于前r个像素,并且当向上滚动时,它不应向上移动背景图像以用于最后的r个像素.男孩,这变成了一个真正的视差滚动项目.有什么建议？

我正在尝试使用纯CSS创建视差效果,该CSS在第一帧上也有视频背景.这种效果在Firefox和IE9 +中运行良好,但Chrome对所有具有"background-attachment:fixed"的帧都有撕裂效果.

我确实设法找到了一个答案,然后使用奇怪的HTML布局和CSS剪辑,但我似乎无法再找到它.该代码的问题在于我无法将帧设置为最小高度并允许内容在较小的视口上轻松重排.

这里有很多类似的问题但是它们似乎都没有真正得到回答,或者它们引用的是现在似乎已修复的旧bug.如果我删除视频,则background-attachment属性的行为与预期一致.也许这些问题有关系吗？

例如:http://codepen.io/cluke009/pen/cdHJu

HTML

<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat …

我想在我的应用程序中使用视差滚动,就像使用'sticky'标题的spotify应用程序一样.这意味着标题将固定在屏幕顶部.我发现很多ScrollView库分别执行这些功能,我找不到任何两个库.

我使用ParallaxScroll库作为parallex scroll和StickyScrollViewItems将项目粘贴到屏幕顶部.

任何帮助深表感谢.

我正在制作一个带有视差标题的网站。此标头需要同时包含图像和视频。我想采用纯 css 方法，但这会产生新的“问题”。

我试过http://keithclark.co.uk/articles/pure-css-parallax-websites/

问题 CSS： - 您必须将整个页面放在具有 100% 视口高度的可滚动 div 中，这意味着本机 ipad 滚动行为不再起作用，诸如 js scrollTop 之类的东西不再起作用，固定导航栏显示在滚动条上等等。在此处查看演示http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

问题 JS： - 性能、动画大部分时间看起来很不稳定 - 需要更多代码 - 需要额外的代码来使视频表现得像固定背景

我真的不想使用任何第三方插件，以防止该网站出现“插件过度杀伤”。

我现在必须选择继续保留 CSS 版本或使用 javascript。我只是好奇，什么是明智的编码，明智的性能，制作视差的最佳方式？希望有人能在这方面启发我。

谢谢！

这是我的测试项目的代码：- 主要活动

 package com.invento.defcomm.collapsingtoolbarlayout;

import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbarLayout;
public static final int COLLAPSE_MODE_PARALLAX=2;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar= (Toolbar) findViewById(R.id.app_bar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayShowHomeEnabled(true);
    collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collpasing_toolbar);
    collapsingToolbarLayout.setTitle("TEST COLLAPSING TOOLBAR");
    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.expandedTitleColor));
}



@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
} …

如何使用基本的UIView实现视差弹性标题效果？我已经搜索了类似的问题,但我发现只是使用TableView实现此效果而不是使用常规UIView.

这是它的样子.

我想这可能是上述应用程序的层次结构.

    ---SuperView---
      -ScrollView-
         -ImageView
         -UIView(text content)

有没有办法（以编程方式或通过 xml）滚动到以下 CoordinatorLayout 的底部（见下文），以便在显示屏幕时可以看到 NestedScrollView 中的最后一个元素？

附件是显示的实际屏幕和想要显示的屏幕。您可以注意到比较两个图像，向下滚动时，图像具有视差效果。

我希望当屏幕加载时，NestedScrollView 底部的按钮（仅在第二张图片中可见）是可见的......只需要一点点自动滚动！

任何建议将不胜感激。

当前显示的初始屏幕：

所需的初始屏幕：

布局的xml：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:background="#000"
                android:paddingEnd="40dp"
                android:paddingStart="40dp"
                android:paddingTop="30dp"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax"
                tools:ignore="ContentDescription"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusableInTouchMode="true"
            android:orientation="vertical"
            android:paddingBottom="30dp"
            android:paddingTop="30dp">

            <TextView
                style="@style/register_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/register_text_1"/>

            <EditText
                android:id="@+id/param1"
                style="@style/register_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/param1"
                android:textColorHint="#fff"/>

            <EditText
                android:id="@+id/param2"
                style="@style/register_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/param2"
                android:textColorHint="#fff"/>

            <EditText
                android:id="@+id/param3"
                style="@style/register_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/param3"
                android:textColorHint="#fff"/>

            <EditText
                android:id="@+id/param4" …

网站上修改后的滚动行为是如何制作的？我想完成加速滚动行为，如您在示例中所见。所以你以一定的速度滚动，当你放手后，页面会自动滚动一点，减慢并停止。

不幸的是，我绝对没有为您提供代码的基础，我希望您仍然可以帮助我。也许你可以推荐我一些js插件？

https://p2mv.studio/case/sony-music-france

我有一个样式组件渲染了 3 次，每次都有视差效果。

const ParallaxContainer = styled.section`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
  bottom: ${props => props.bottomValue}px;
`;

视差是bottom通过非常昂贵的计算更新每个 scrollEvent的值来实现的。意思是，这个组件经常被重新渲染。

不出所料，我收到了警告Over 200 classes were generated for component styled.section. Consider using the attrs method, together with a style object for frequently changed styles.所以我尝试遵循建议，并将组件重构为：

const ParallaxContainer = styled.section.attrs(
  ({ bottomValue }) => ({
    style: {
      bottom: bottomValue + "px"
    }
  })
)`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
`;

但我仍然遇到同样的错误。我究竟做错了什么？ …

我正在尝试react-spring在我的网站上创建视差效果。我希望视差容器成为整个网站的背景，并在底部加上一个 100vh“页脚”。这是我的意思的简单图表：

我的问题是，根据react-spring parallax docs，视差容器需要一个pages属性，该属性“确定每个页面占用100％可见容器的内部内容的总空间”。

根据我对此的理解以及我的测试，这意味着我必须根据 100% 视口高度的划分显式设置视差容器的整个高度。这意味着我不能只让视差容器包含我网站的内容，因为它没有预设高度，更不用说高度除以 100vh。

所以我的问题是，我可以让视差容器react-spring完全包含我的整个网站的内容，并在底部加上 100vh 吗？

这是我的问题的沙箱演示，pages在第 29 行设置了视差属性：https://codesandbox.io/embed/react-spring-pageheight-question-c12er