草庐IT

parallax

全部标签

javascript如何在滚动路线上 move 元素

我有一条像垂直蛇一样的路线。(像这样http://www.my-favorite-coloring.net/Images/Large/Animals-Reptiles-Snake-31371.png)我如何通过滚动的X和Y位置move路径上的元素(圆10x10)?水平没问题:varcoin=$('#coin');$(window).scroll(function(){varcoinTop=coin.css('top'),cointLeft=coin.css('left');if($(window).scrollTop()>100&&$(window).scrollTop()但是我如何沿

javascript - jQuery 视差/滚动事件性能

这个问题与其说是视差,不如说是滚动事件。我对我的项目最关心的是视差滚动效果是平滑的而不是抖动的。那么我的问题是,某些属性的动画/滚动效果是否比其他属性更好?例如,background-position是否比在滚动时调整margin-top效果更好。 最佳答案 我不确定某些属性在设置动画时是否会比其他属性产生更少的开销,但如果有人发布有关该主题的一些有用信息,我将非常感兴趣。话虽这么说,我确实知道一些可以帮助提高性能的事情。设置position:absolute将元素从页面的常规流中移除,因此不需要在动画时重绘整个页面。positio

javascript - 带有 GSAP 的 Janky 视差文本

我尝试制作带有视差的文本但失败了。代码似乎无伤大雅,似乎没有做错任何事,但滚动的外观和感觉却大错特错。标记是这样的:SomeHeadergettingalsolong像这样的样式:.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:1400px;}.text-center{text-align:center;}.section-parallax{background:black;overflow:hidden;&,&.

javascript - 使用鼠标滚轮和滚动条平滑垂直页面滚动

我正在玩弄并尝试建立一个视差网站-是的,我知道它们是一种令人讨厌的时尚,但我仍然想尝试一下。因此,为了获得灵感,我一直在查看各种优秀视差网站的示例并发现了这个网站:https://victoriabeckham.landrover.com/INT.它可以使用鼠标滚轮、滚动条和anchor链接进行平滑滚动。我一直在寻找可以实现这种效果的jQuery插件,但似乎只能找到使用内部页面链接的插件-anchor或ID(详见下文)-但不是鼠标滚轮和滚动条。我很有可能使用了错误的关键字进行搜索。有谁知道找到这些插件的正确术语或知道任何可以实现这种效果的插件吗?附带说明一下,我目前正在学习jQuery

javascript - 滚动链接到 skrollr

我正在使用https://github.com/Prinzhorn/skrollr在我滚动时为我的网站背景制作动画。但是,我也想让我的链接像普通的单页网站一样在页面上上下滚动。问题是,如果我手动滚动背景变化,两者都可以正常工作,如果我单击链接,页面将滚动到正确的位置。问题是,当我单击按钮时,背景也不会滚动。我好像在使用两个不同的滚动函数,结果它们不能一起工作,我需要使用同一个。这是代码。js-滚动到链接:var$root=$('html,body');$('a').click(function(){varhref=$.attr(this,'href');$root.animate({s

javascript - 如何实现视差滚动?

这是链接供引用http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube在此站点中,如果我们滚动中心部分,则中心和右侧部分都会同时滚动...我用这段代码做了同样的事情:-这是html代码:-脚本:-$(function(){$('.linked').scroll(function(){$('.linked').scrollTop($(this).scrollTop());})})CSS:-#left{width:300px;height:400px;overflow:scroll;

javascript - Chrome 和 IE : parallax (jQuery animate) is not smooth when using mouse wheel to scroll

我改编了this为我的网站使用视差效果的jQuery插件。问题是(即使在上面链接中的演示中)Chrome和IE的滚动真的不流畅。只有当您按下鼠标中键并且滚动是连续的(不是“逐步的”"当您滚动鼠标滚轮时)。所以当你使用鼠标滚轮滚动时,视差效果就完全被破坏了。在Firefox中,即使使用鼠标滚轮滚动,滚动也是连续的。有没有一种方法可以在IE和Chrome中连续滚动(javascript?)。Here是我的网站(如您所见,如果您使用Firefox访问它,效果完全不同)。 最佳答案 我用这个jQuery脚本解决了这个问题(它为键盘和鼠标滚动

javascript - 多层视差,数学题

我有一个多层视差脚本,目前处于半工作状态。如果假设具有视差效果的元素被放置在网站的顶部,那么效果就在现场工作,因为它滚出View,您看不到图层移出框架。但是我希望能够在整个页面的不同位置的多个元素上使用此脚本。请参见下面的示例,您可以看到效果正常,但是如果您向data-parallax="panel-1"部分添加一些边距,您会发现现在出现了问题。/***@authorMartynLeeBall*@descCreatesmulti-layerParallaxeffect*@version1.0*@return{Array}ReturnsinstancesofclassesasArray*

javascript - 此页面上的不同元素似乎以不同的速度滚动。这是怎么做到的?

我指的效果可见于http://whyinteractive.com/showreel.这些元素似乎以不同的速度前后滚动,产生了一些很酷的效果。这是怎么做到的? 最佳答案 您正在寻找的是所谓的视差效果。您可以在以下网站了解更多信息:http://locomotivation.squeejee.com/post/109269802/jquery-parallax-scrolling-build-your-own-1980s-video-gamhttp://stephenmcintyre.net/blog/jquery-parallax-

javascript - 视差 - 偏移元素,绑定(bind)到滚动

我绞尽脑汁想找出添加简单视差行为的正确逻辑。我想在页面上放置一些元素,它们的顶部偏移一定距离(例如300像素)。然后当你向下滚动页面时,一旦元素的顶部显示出来,它就会慢慢向上移动(绑定(bind)滚动)直到元素的顶部到达视口(viewport)的中间,此时它的顶部偏移量为0并且它保持在原位。我尝试使用第三方脚本(ScrollMagic、Stellar等),但是当我现在无法获得它时,我正在尝试自定义代码:https://jsfiddle.net/louiswalch/5bxz8fku/1/var$Window=$(window);varoffset_amount=400;varwindo