标签: parallax
jQuery中的垂直视差
我正在建立我的投资组合网站,我有一点困难,基本上我有两个小问题......
当位置在x轴上包含"center"属性时,我无法获得背景位置以在y轴上设置动画
我无法在滚动时发生效果,在停止滚动时暂停,在继续滚动时继续
这是我正在使用的代码:
//Top section parallax
$(function parallaxInnerAnimation(){
//Reset the background position
$('#first-canvas .inner').css({backgroundPosition: 'center 0px'});
//Set the animations
$(window).scroll(function() {
$('#first-canvas .inner').animate({
backgroundPosition:"(center -200px)"
}, 5000, 'linear');
});
});
我正在使用Alexander Farkas的jquery.backgroundPosition插件v1.22和jQuery 1.6.1.
这个网站是css3和html5,主要用于支持IE9,Firefox 4和Chrome 11等...我正在为旧浏览器创建一个不同的网站,因此可以牺牲向后兼容性
对不起,如果它是一个愚蠢的问题,我不是一个真正的开发人员,更多的是能够编写前端内容的设计师,提前感谢.
更新:
把它放在上下文中,我现在把它放在我的实时服务器上http://charlieryan.co.uk/stack-overflow/
推荐指数
解决办法
查看次数
有关请求动画帧的问题
我正在尝试建立一个视差网站,在滚动网站时移动少量元素.但是在阅读Paul Irish的这篇文章之后,并没有使用我正在使用的滚动事件监听器,而且这个视频说滚动监听器有点儿麻烦.我的问题是:requestAnimationFrame
- 它在Chrome中看起来非常流畅,但它在Firefox中闪烁不定.我在这里做错了吗？
- 我的代码实际上是否占用了比使用普通滚动事件监听器更多的资源？每次我玩这个代码时,我都能听到我的笔记本电脑风扇炽热.
我的文件位于http://www.socialbuzz.com.au/index.html,请滚动到页面底部以查看从javascript操作的元素.
推荐指数
解决办法
查看次数
如何将页脚粘贴到页面底部,同时向上移动以视差效果？
我有一个项目,其中要求#footer向上移动页脚(),同时向下滚动页面的视差效果.当您开始向下滚动页面时,页脚应该开始向上移动,直到它在视口的(底部)可见.
当页脚<div>到达视口顶部时,页脚应该覆盖前面的大部分上半部分.
该页面可能具有类似的html结构:
<body>
<div id="sectionA" class="div">First section</div>
<div id="sectionB" class="div">Second section</div>
<div id="sectionC" class="div">Third section
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer" class="div cf">Footer</div>
</body>
通过javascript/jQuery向(相对定位的)页脚的CSS属性添加动态负值来实现类视差效果top.以下是重要的代码:
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
top: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
(显而易见的)问题是,只要top属性开始获得负值 …
推荐指数
解决办法
查看次数
滚动以与skrollr链接
我正在使用https://github.com/Prinzhorn/skrollr当我滚动时,来动画我网站的背景.但是我也希望让我的链接在页面上下滚动,就像普通的单页网站一样.
问题是,如果我手动滚动背景更改,两者都有效,如果我单击链接页面滚动到正确的位置.问题是,当我单击按钮时,背景也不会滚动.
看起来我正在使用两个不同的滚动功能,因此它们不能一起工作,我需要使用相同的功能.
这是代码.
js - 滚动到链接:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js - Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
我会尝试拼凑一个小提琴,使其更清晰,但希望答案非常简单.
推荐指数
解决办法
查看次数
具有视差效果的背景视频
有没有办法将背景视频放在具有视差效果的div容器中？我正在寻找的是与此模板类似的东西:
我已经尝试了一些我在互联网上找到的流行插件,例如:
但他们都没有做我正在寻找的东西,也许他们这样做,但我只是无法弄清楚:(
谢谢你们!!
推荐指数
解决办法
查看次数
纯css视差中的平滑滚动
演示http://jsfiddle.net/11ec63xj/1/
尝试在iPhone上打开上面的演示,滚动根本不顺利.后来我学会了使用
-webkit-overflow-scrolling: touch;
但它打破了我的视差效应.
推荐指数
解决办法
查看次数
如何将动画div限制在网页部分？
嗨,我目前正在建立一个视差网站.我想添加一个在用户滚动时向下移动的图像......但仅限于网站的某个部分.所以4个部分向下......图像在那里......它随着用户向下滚动而移动......然后消失在第5个部分后面,我们不再看到它.
我正试图对这个网站做类似的效果: 网站
当你向下滚动时...你看到"关于"在div之间移动.我想实现这一目标.
当我这样做时......它出现在第一部分的顶部,并一直停留在屏幕上.
这是一个JSfiddle示例.它只显示了网站的一部分:小提琴
我知道这与定位有关.但我希望它保持在DIV内,而不是放在整个页面内.
// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(f){setTimeout(f, 1000/60)}
var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')
var scrollheight = document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window
function parallaxbubbles(){
var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // …推荐指数
解决办法
查看次数
在CollapsingToolbarLayout中设置视差图像的初始高度
我有一个Android活动,它使用CoordinatorLayout内的CollapsingToolbarLayout来实现滚动/折叠工具栏,其中图像作为背景/横幅.
图像是从互联网上加载的,我事先并不知道它的大小.
我希望工具栏最初是一定高度(160dp),但如果图像大于此值,我想让用户进一步向下滚动以显示图像的其余部分.但是,这绝不应该自动发生.初始状态是160dp高度,但用户应该能够向下滚动以进一步增加图像的高度.
我似乎无法找到正确的高度/ minheight组合来实现这一目标.这甚至可能吗？
这是我的布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="@color/toolbar_text">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true">
<!-- The background banner -->
<ImageView
android:id="@+id/imgBanner"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="@style/AppToolbarTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
...
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
横幅图像的高度设置为160dp,它控制工具栏最初的大小,但显然这样我无法将其扩展到160dp之外,因为这是视图的高度.
我尝试将160dp高度设置为CollapsingToolbarLayout或者AppBarLayout没有任何帮助,它总是最大160dp的高度我只能向上滚动(较小的图像)而不是向下,即使图像更大并且ImageView设置为按比例缩放wrap_content.
这是我想要实现的图纸,如果不清楚的话:
推荐指数
解决办法
查看次数
在Sprite Kit中组合几个SKScenes
我目前正在努力解决以下问题:
我在Objective-C中创建了一个Sprite Kit游戏,我必须在所有3个场景中使用视差动画.我使用随机生成的X和Y位置的云.它们出现在问候场景,游戏场景和高分场景中.
问题:每当我从一个场景切换到另一个场景时,我都必须重新启动视差动画,这会导致混乱的中断.
无论您在游戏场景之间切换多少次,在后台始终保持"云场景"一直运行的最佳策略是什么？
提前致谢.
推荐指数
解决办法
查看次数
绘制大型位图时,nSyncAndDrawFrame非常慢
我想用多个大型位图优化视差滚动视图.在我的Nexus 5上,一切都很顺利,Traceview转储如下所示:
doFrame()方法使用~18 ms完成.
但是,在使用我的Nexus 7或Android 6 Emulator(Genymotion)时,Traceview转储如下所示:
运行完全相同的应用程序时,nSyncAndDrawFrame方法现在需要大约300毫秒.
有趣的代码部分位于视差视图的onDraw()中:
for (int i = 0; i < parallaxConfigManager.getNumberOfLayers(); i++) {
Bitmap layer = parallaxConfigManager.getLayer(i);
float dx = (offset * parallaxConfigManager.getScrollSpeedFactorForLayer(i) * imageScaleFactor);
int offset = Math.round(-parallaxConfigManager.getBoardOffset(i) + dx);
srcRect.offsetTo(offset, 0);
int realWidth = getRealWidth(srcRect, layer.getWidth());
float scaleFactor = destRect.width() / (float) srcRect.width();
if (realWidth < srcRect.width()) {
destRect.left = (int) (scaleFactor * Math.max(0, -srcRect.left));
destRect.right = destRect.left + (int) (scaleFactor * realWidth);
}
destRect.bottom = Math.min(screenHeight, (int) (scaleFactor * layer.getHeight())); …推荐指数
解决办法
查看次数
标签 统计
parallax ×10
css ×5
javascript ×4
jquery ×3
android ×2
frontend ×2
html ×2
android-collapsingtoolbarlayout ×1
animation ×1
background ×1
bitmap ×1
css3 ×1
ios ×1
objective-c ×1
scroll ×1
skscene ×1
sprite-kit ×1
video ×1