我正在使用Javascript和jQuery构建一个视差滚动脚本,该脚本使用transform:translate3d操作figure元素中的图像,并基于阅读我'已经完成(PaulIrish的博客等),我被告知此任务的最佳解决方案是出于性能原因使用requestAnimationFrame。虽然我了解如何编写Javascript,但我总是发现自己不确定如何编写好的Javascript。特别是,虽然下面的代码似乎可以正常、流畅地运行,但我想解决一些我在Chrome开发工具中看到的问题。$(document).ready(function(){functionparallaxWrapper
是否可以在不使用cssbackground和background-attachment属性的情况下添加视差效果?我在div中有一个img标签,我想给图片添加视差滚动效果,下面是代码functionresize_div(){varimage_height=$('.project-imageimg').height();vardiv_height=$('.project-image').height();varwindow_height=$(window).height();varwindow_width=$(window).width();$('.project-image').css(
我的网站有视差效果,但在滚动时它看起来相当跳跃,如下所示:代码如下:jQuery(document).ready(function(){jQuery(window).scroll(function(){jQuery('*[class^="prlx"]').each(function(r){varpos=$(this).offset().top;varscrolled=$(window).scrollTop();jQuery('*[class^="prlx"]').css('top',+(scrolled*0.6)+'px');});});});*[class^="prlx"]{posi
我试图在不使用background-image和background-attachment:fixed的情况下创建视差效果,因为background-attachment:fixed在iOS上效果不佳。这是我想出的:HTML"style="width:100%;"/>CSS.twentyseventeen-panel{overflow:hidden;position:relative;}.panel-image{position:relative;height:100vh;max-height:200px;}现在我坚持让图像滚动以产生视差效果。我已经尝试将图像设置为fixed位置,但是
我一直在做一个元素,我已经完成了内容。然而,对于设计,我正在考虑使用视差滚动技术。然而,我所能找到的关于它的所有信息都是使用JavaScript或Jquery,而我只精通CSS3。是否可以仅使用CSS3(如果需要,使用HTML5)而不是使用jquery插件来实现视差滚动?如果能为我指出一些相同的教程,那就太好了。注意:这接近我想要产生的效果(http://jessandruss.us/) 最佳答案 正在搜索parallaxpurecss然后点击firstresultfromCodePen(第二个结果是当前页面:),一个很好的例子显示
我需要为客户构建一个多方向的JQuery视差页面-他们基本上希望它以与此类似的方式工作-https://victoriabeckham.landrover.com/INT我已经准备好图稿并找到了许多jquery库,这些库允许我滚动水平/垂直滚动-但我不确定如何在特定坐标处将两者组合在一起。谁能给我指出正确的方向?编辑:我最初在查看Superscrolarama并认为所有问题都已解决-但在实现它时遇到了困难-我不认为它是我认为的救世主,我还需要水平和垂直视差滚动以实现上述目标,但它似乎不支持-所以如果有任何其他提示,我将不胜感激! 最佳答案
我刚刚看到Facebook的新纸质应用程序,它可以根据视差效果使图像移动。因此它将图像缩放到全屏,当您倾斜屏幕时,它会将图像滚动到您倾斜的一侧。我已经能够像apple那样添加视差效果,但不像facebook那样。有没有人知道他们是怎么做到的。这是我用于视差的基本代码:UIInterpolatingMotionEffect*interpolationHorizontal=[[UIInterpolatingMotionEffectalloc]initWithKeyPath:@"center.x"type:UIInterpolatingMotionEffectTypeTiltAlongHor
我正在尝试在UIScrollView内的UIView上创建视差效果。效果似乎有效,但效果不佳。首先我将两个UIViewsubview添加到UIScrollView并设置UIScrollViewscontentSize。View汇总并创建{320,1000}的contentSize。然后我在scrollViewDidScroll中实现了以下内容:-(void)scrollViewDidScroll:(UIScrollView*)scrollView{CGFloatoffsetY=scrollView.contentOffset.y;CGFloatpercentage=offsetY/sc
我想知道如何实现类似于YahooNewsDigest应用程序的视差滚动。其中,当用户水平滚动时,背景图像以不同的速度滚动,同时启用分页。可能是他们使用带有背景View的ScrollView来做到这一点。不太确定。提示实现这种滚动会很棒。我检查过类似的问题,但找不到我要找的答案。 最佳答案 我以前用2个ScrollView做过这个。你有主要的细节ScrollView,然后是它后面的视差ScrollView(或者你想要的任何地方)。然后你就成为了detailscrollview的delegate。在scrollView:didScrol
在您说这不可能之前,我知道这是不可能的。这是一个例子:http://victoriabeckham.landrover.com/INT主要问题是iOS在滚动时卡住了DOM操作,因此您必须使用某种技术来克服该问题。我希望使用的视差插件是stellar.js,但我遇到的问题是该插件的“iOS演示”在桌面上并不可用。今天早上我摆弄了3个小时,无法获得在iOS和桌面上都能正常工作的设置。我需要一些想法,要么是一种技术来配置stellar.js以相同的方式在两者上工作(我不确定这是否可能),要么是另一个库同时适用于这两者,或者可能是一些关于我如何能的见解自己编写解决方法。感谢任何帮助。