标签: parallax

我正在玩并试图建立一个视差网站 - 是的,我知道他们是一个讨厌的时尚,但我仍然想要去.所以,为了获得灵感,我一直在研究好的视差网站的各种例子,并且遇到了这个:https://victoriabeckham.landrover.com/INT.

它使用鼠标滚轮,滚动条和锚链接进行平滑滚动.我一直在寻找能够实现这种效果的jQuery插件,但似乎只能找到那些使用内部页面链接的插件 - 锚点或ID(详见下文) - 但不是鼠标滚轮和滚动条.我很有可能使用错误的关键字进行搜索.有没有人知道找到这些插件的正确术语或知道任何可以实现这种效果的插件？

在旁注中,我目前正在学习jQuery和Javascript,但我还处于早期阶段 - 仍在通过codeacademy进行拖网,而不是在任何现实世界的代码上.所以目前我正在使用插件作为一种学习方式,但希望在几个月内我可以构建自己的东西!

平滑滚动以锚定标签或ID:

• http://archive.plugins.jquery.com/project/ScrollTo
• http://jsfiddle.net/9Amdx/7/
• http://arthurclemens.github.com/jquery-page-scroll-plugin/
• http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
• http://www.designova.net/scrollerbird/
• http://chris-spittles.co.uk/?p=462
• http://joelb.me/scrollpath/(* @DrunkRocketeer提供)

并且,使用类似技术进行滚动的视差网站的另一个示例:

• http://www.ascensionlatorre.com

我试图并行执行几个FFT.我正在使用FFTW和OpenMP.每个FFT都不同,所以我不依赖于FFTW的内置多线程(我知道使用OpenMP).

int m;

// assume:
// int numberOfColumns = 100;
// int numberOfRows = 100;

#pragma omp parallel for default(none) private(m) shared(numberOfColumns, numberOfRows)//  num_threads(4)
    for(m = 0; m < 36; m++){

        // create pointers
        double          *inputTest;
        fftw_complex    *outputTest;
        fftw_plan       testPlan;

        // preallocate vectors for FFTW
         outputTest = (fftw_complex*)fftw_malloc(sizeof(fftw_complex)*numberOfRows*numberOfColumns);
         inputTest  = (double *)fftw_malloc(sizeof(double)*numberOfRows*numberOfColumns);

         // confirm that preallocation worked
         if (inputTest == NULL || outputTest == NULL){
             logger_.log_error("\t\t FFTW memory not allocated on m = %i", m);
         }

         // EDIT: insert data …

我正在玩Facebook纸质应用程序,并意识到全尺寸图像的视差效果非常酷.所以我去自己的应用程序尝试.但视差并没有像facebook纸质应用那样流畅.

这是我用过的代码

UIInterpolatingMotionEffect *parallaxHorizontal = [[UIInterpolatingMotionEffect alloc]initWithKeyPath:@"center.x" 
                                                                                                type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
parallaxHorizontal.minimumRelativeValue = @-100.0;
parallaxHorizontal.maximumRelativeValue = @100.0;

[_myImageView addMotionEffect:interpolationHorizontal];

无论如何,让视差移动稍微更快,更顺畅,或实现像facebook纸质应用程序.

谢谢!

这是我第一次使用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个像素.男孩,这变成了一个真正的视差滚动项目.有什么建议？

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

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

任何帮助深表感谢.

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

这是它的样子.

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

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

我试图修复Section 2一旦它到达视口,在每个滚动上,左边的下一个段落突出显示到另一个,右边的电话屏幕滑到下一个.

因此,在每个卷轴上,我想突出显示下一个文本并更改手机内部的方式,就像您在许多应用程序登录页面上看到的那样.

这是一个演示

我正在尝试使用 Skrollr（javascript 库）制作我的网站：http ://prinzhorn.github.io/skrollr/

滚动条工作正常，但我无法弄清楚一件事。如何阻止 div 远离屏幕顶部滚动。一旦 div 的顶部碰到我的页面的顶部，我希望它停止滚动，这样当第二个 div 开始出现在它的顶部时，它就会给人一种堆叠卡片的感觉。

当向后滚动时，div 将在顶部离开页面底部后开始滚动。

我希望我的解释清楚一点，如果不是，我将尝试使用图形来解释。

现在是代码部分。阅读文档后，我尝试了以下两种方法：

data-top 和 data-end 他们没有实际工作。

我也试过： data-top="background-position:0px 0px;"

我什至不确定我想要实现的目标是否可能。

如果没有，我可以通过在 div 顶部穿过浏览器窗口顶部后降低滚动速度来进行重叠垂直滚动。

请问我是否有任何解释令人困惑，我知道口头解释问题并不容易。

我正在尝试构建一个视图,允许用户在水平和垂直方向上滚动类似Excel的结构.我最初的想法是将RecyclerView(带有LinearManager)放入Horizo​​ntalScrollView.但它似乎没有用.

这是我的代码:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/gameplay_Toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/accent"
        app:title="@string/gameplay_score_toolbar"
        app:titleMarginStart="48dp"
        app:titleTextAppearance="@style/toolbar_title" />

    <HorizontalScrollView
        android:id="@+id/gameplay_hotizontalScroll_ScrollView"
        android:layout_below="@+id/gameplay_Toolbar"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:fillViewport="true"
        >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/gameplay_gameContents_RecyclerView"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"/>

    </HorizontalScrollView>

</RelativeLayout>

现在它只允许Recycler滚动,Horizo​​ntalScrollView似乎就像一个普通的FrameLayout(因为Recycler里面的视图正在剪切到边缘).

我认为我在Recycler中提出的观点具有固定的大小可能是相关的.

有关如何使这个概念起作用的任何提示？

因此，有一个名为RadPad的应用程序，他们能够在其中执行粘性视差表视图标题，但同时能够水平滑动以在图像之间切换。我想知道实现这两个功能的最佳方法是什么：能够使用 UICollectionView 执行视差粘性标题并显示多个图像。

我尝试过各种开源框架，但是当它们被进一步拉下时，它们在执行弹性标题视图方面没有成功。

谢谢！

以下是我所指的屏幕的链接：

1）视差：https ://www.dropbox.com/s/ybwog86zlvnd0p0/Screen%20Shot%202015-08-26%20at%2012.55.24%20PM.png ? dl =0

2）横向滑动图片：https ://www.dropbox.com/s/0i0sh23rhpcnf1m/Screen%20Shot%202015-08-26%20at%2012.56.03%20PM.png?dl =0