标签: parallax

我正在尝试使菜单栏不断浮动在浏览器的顶部,因此当它们向下滚动页面时,菜单栏仍然位于顶部.

我怎么能这样做？

问候,

所以我试图创建一个像这样的视差风格的网站.然而,虽然他们使用具有"固定"附件的背景图像来使图像不移动,但我想使用jquery幻灯片插件.基本上,如果我的图像包含在滑块中,我怎样才能实现图像的"固定"附件和背景位置？目前,幻灯片中的图像只是滚动浏览...

我很乐意提供代码示例,并在此过程中删除所需的任何进一步信息

谢谢!

我正在尝试在Scrollorama的帮助下创建视差滚动网站但是我想使用非典型的动画.此动画应从上到下,然后停在页面中间并返回(从中间到顶部).Scrollorama的作者说,这种类型的动画不支持scrolllorama,也不支持他的新插件SuperScrollorama.也许有人可以建议我另一个具有此功能的插件.

有没有什么办法可以限制javascript的执行(如果声明),以便它只适用于台式计算机,当用户在移动设备/平板电脑设备上时,它需要关闭.下面是代码,但显然它适用于文档准备好时的任何设备.

<script type="text/javascript">
$(document).ready(function(){
    main_parallax();
    main_scrolling();
    sauces_slider();
});    
</script>

main_parallax();在移动设备/平板电脑设备上只应省略该功能.

可能是完全咆哮错误的树,但你可以使用div background-image元素制作视差滚动图像吗？

我想要发生的是我目前有一些带有文本效果翻转的图像的DIV但是我在背景图像中使用视差我想要将3D主题与所有网站图像保持一致.

编辑:例如,是否可以在此页面上制作蓝色框:

www.parkhallmanor.co.uk/new

使用视差效果滚动单独的图像？

我一直在努力了解如何使用jQuery插件curtain.js(https://github.com/victa/curtain.js).

我试图遵循指示,但我必须做错事,因为我无法让它工作.

也许问题出在其他方面,但我写的jquery是:

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400
    });
});

我做了一个小提琴,所以你可以看到我现在的代码.小提琴在这里:http://jsfiddle.net/NvGgW/1/

任何帮助都非常欢迎.谢谢!

我正在使用skrollr.js来动画页面上的一些内容.我想只在窗口视口宽度大于特定大小时初始化skrollr,并在我低于视口宽度时完全删除它或销毁它.

例如,当浏览器窗口宽度大于600px时,我想要初始化skrollr,但是当浏览器的窗口宽度小于600px时,我想关闭或销毁skrollr.

我一直在努力建立一个具有视差效果的网站,如本网站上的网站:http: //www.sparksandhoney.com/the-open-agency-index/ 或 http://www.sparksandhoney.com/按指数/

我一直在尝试使用stellar.js,但我似乎无法使导航栏和网页在此网站上同步滚动图像.到目前为止,我一直在努力使导航栏和文本层成为一个在固定背景上滚动的div,但这根本不起作用？

顺便说一句,我已经浏览了这个网站的源代码,并且他们使用了Squarespace,但是我试图在没有它的情况下做到这一点.

有没有人有任何想法？

在博客设计支持库:折叠工具栏布局博客文章中,有一个具有良好视差效果的标题图像:

在GitHub的一个简单的测试项目中,我试图达到类似的效果 - 但由于某种原因,图像被压扁:

在activity_main.xml中,我尝试了所有可能的值,scaleType但图像保持扭曲:

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/header"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

我在这里想念的是什么？

更新:

我试图改变match_parent为Apurva建议(感谢+1):

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/header2"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

但这没有帮助 - 标题图像被压扁:

嘿伙计们,我想在我的网站上制作动画效果,当我们点击菜单链接(比如说,关于部分)时,它会以视差风格动画到该div.

那么大家,如果你知道任何jquery插件可以帮助我在这种情况下,那么请让我知道,如果你也向我展示一个例子会更好.

请参阅代码以获取帮助:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

因此,根据我想要动画到关于部分的代码,点击链接说明关于