我正在为Objective-C开发iOS 7应用程序.我的应用程序中有一个屏幕,带有几个按钮和漂亮的背景图像.(它是一个简单的xib,UIButtons位于a之上UIImageView.)

我认为如果这些按钮具有iOS 7主屏幕具有的视差效果会很酷,所以如果你倾斜手机就可以看到背景.

如何在我自己的应用程序中实现该效果？

我目前正在做一个视差网站主题.对于某些'div'和'section,需要将背景图像附加为固定的,以避免jquery沉迷于所有内容.问题是任何动画项目下方标签的背景图像在转换完成时消失,仅在Google Chrome上.补救？

更新
我想完成谷歌地图与支持库23.x. +并且没有任何第三个库的相同行为

注意:这不是一个重复的问题,因为:

1. 我想使用行为,支持库和没有任何第三方库(我在问题标题和上面的描述中添加了它)
   
2. 我想要你在下一个gif中看到的所有行为,其他问题是要求一两个行为并使用任何方式来实现它.
   
   

我已经有官方的bottomSheet工作(甚至在选项卡和视图寻呼机内).

令我发疯的是如何在使用官方bottomSheet向上滑动时实现BottomSheet的图像行为？.

我尝试使用像FAB这样的锚没有成功.
我读了一些关于使用滚动监听器的内容,但是ppl说它不像谷歌地图那样平滑和快速.

我的XML(我不认为它会有所帮助,但无论如何):

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".ui.MasterActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?android:attr/borderlessButtonStyle"
                android:text="Departure"
                android:layout_gravity="center"
                android:id="@+id/buttonToolBar"
                />


        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@android:color/white"
            app:tabTextColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/colorAccent"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/asdf"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:behavior_peekHeight="100dp"
        android:fitsSystemWindows="true"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <LinearLayout
            android:id="@+id/qwert"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingBottom="16dp"
            android:background="@android:color/white"
            android:padding="15dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content" …

我最近遇到了这个网站http://www.ascensionlatorre.com/home,我喜欢鼠标滚轮滚动的方式 - 缓和非常顺畅.

我一直在搜索谷歌,但我找不到类似的东西.

有没有人对如何使用jQuery复制这种效果有任何建议？

我正在使用Stellar和Skrollr库开发一个视差滚动网站.由于Firefox的平滑滚动功能,该网站在Firefox中表现完美,但在Chrome中,使用鼠标滚轮滚动是生涩的,并且视差效果几乎被破坏.在保持性能的同时,有没有办法在所有浏览器中使用鼠标滚轮进行平滑滚动？

这是我的身体的CSS代码:

body {
  padding: 0;
  margin: 0;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-color: grey; 
  background-size: 100%;
}

我想要做的是使图像滚动比页面上的其他所有内容慢,以产生简单的视差效果.我在网上看过,我见过的所有例子都比我想要的要复杂得多.

我对现有的视差库感到不满,所以我正在努力编写自己的视差库.我目前的课程包括三个主要课程:

• ScrollDetector跟踪元素相对于屏幕的滚动位置; 它具有返回表示其当前位置的float的函数:
  • 0 表示位于视口底部边缘的元素的上边缘
  • 1 表示位于视口顶部边缘的元素的下边缘
  • 所有其他位置都是线性插值/外插的.
• ScrollAnimation使用ScrollDetector实例根据元素在另一个元素上插入任意CSS值ScrollDetector.
• ParallaxativeAnimationScrollAnimation针对背景图像的特殊情况进行扩展,该背景图像应以窗口滚动速度的精确因子滚动.

我目前的情况是这样的:

• ScrollAnimationS使用transform: translateY(x)工作进展顺利.
• ParallaxativeAnimation使用translateY(x)工作,但动画jerkily.
• ParallaxativeAnimation使用的translate3d(0, x, 0)是生涩,但不是那么糟糕.
• 该Rellax库的动画,其使用translate3d(0, x, 0),工作完全顺利.

你可以在这支笔上看到比较.(jerkiness在Firefox中表现得最好.)我的图书馆在Bitbucket上.

我不知道我的图书馆里的问题在哪里,我不知道如何弄明白.这是一个精简的粘贴,在ScrollAnimation顺利滚动的课程中完成繁重的工作:

getCSSValue(set, scrollPosition) {
    return set.valueFormat.replace(set.substitutionString, ((set.endValue - set.startValue) * scrollPosition + set.startValue).toString() + set.unit)
}

updateCSS() {
    var cssValues = [];

    var scrollPosition = this.scrollDetector.clampedRelativeScrollPosition();

    var length = this.valueSets.length;
    for(var i …

我试图尝试视差并从头开始了解这个魔法的核心部分.为了给你一个我喜欢用作灵感的例子,你可以在这个链接的"照片"部分看到它.

最新代码在页面下方,包含相关信息.要全面了解问题,请参阅其余详细信息.

核心部分我已经知道是scrollTop()的$window和offsetTop元素都是重要的应用DOM元素上的视差效果,以及一factor对多么敏感效果应该滚动速度来做出回应.最终结果应该是一些以像素或百分比计算translateY或translate3d坐标的公式.

我读了CSS属性在互联网上translate比速度更快,例如,top从position: absolute和我的偏好也将是用翻译与组合TweenMax GSAP.因此,视差的运动将非常平滑.但是,如果只有css属性translate就够了,那也没关系.我看到了一些使用TweenMax的例子,所以这就是我现在使用它的原因.

JS

我有基本的代码:

var win = $(window);
var el = $('#daily .entry').find('figure');

win.scroll(function() {
  var scrollTop = win.scrollTop();
  var parallaxFactor = 5;

  el.each(function() {
    var image = $(this).find('img');
    var offsetTop = $(this).offset().top;

    // This is the part where I am talking about. 
    // Here should be the magic happen...

  });
}); …

我目前$(window).bind('scroll', foo);用来监视$(窗口).scrollTop()并做一些东西来创建一个视差效果.

在所有桌面浏览器中,为用户滚动的每个像素调用foo(),一切都很好,花花公子.在iOS上的Safari中,滚动事件仅在滚动完成后触发.

我添加$(window).scrollTop()了以确保在iOS中滑动期间调用该函数,它让我更进一步.当用户释放手指时,页面继续滚动,但事件停止触发.

有任何想法吗？

如何使用仅具有水平CSS的视差效果来引导站点？

要求

• CSS只有视差
• 父层必须具有宽度/高度== 100vw/100vh
• 子图层的宽度/高度必须> 100vw/100vh
• 子图层必须在视觉上与父图层宽度对齐100%
  • 到目前为止,子图层在技术上确实有100%的父级宽度,但由于perspective它们在视觉上看起来并没有占据父母宽度的100%
• 子层(第一个除外)必须相对于其父层具有顶部偏移量
• 结果必须基于计算才能具有最大的灵活性
• 必须跨浏览器固体(至少最新版本的专业)

到目前为止我做了什么

实际上这个问题是一个后续问题.
这是我在SASS或CSS中使用当前模型状态的PEN .

工作模拟示例(jQuery)

在JavaScript中,它很容易实现我正在寻找的东西.所以这是一个PEN模拟我想用CSS模仿的效果.

已知问题

我现在最关心的问题是,浏览器似乎以不同的方式呈现这种情况.查看浏览器窗口(chrome vs ff)的屏幕截图,滚动到下方的右下角.但我希望这可以避免.

那里有很多视差教程.为什么会有所不同？

实际上我研究了很多,但没有找到甚至一个描述如何实现水平视差(意味着子层的宽度> 100vw).当然,那里有水平视差滚动.但它们都有一个共同点:子层宽度总是<= 100vw - 这实际上就是差异.

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

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

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