对应于页面滚动位置的CSS动画

文章/答案/技术大牛

发布

1回答

javascript、css、scroll、css-animations

如何使动画与页面滚动位置相对应，以便当用户滚动经过它时，动画转到位置A，当用户的页面滚动位置经过它时，动画转到位置B？这是我想做的一个模型： ? (3页的轴心点由下方的蓝点表示。)我已经找到了由页面滚动(such as AOS或ScrollTrigger)触发一次<

浏览 21提问于2019-01-22得票数 3

回答已采纳

2回答

垂直滚动上的引导UI行为

html、twitter-bootstrap

我试图找到示例或关键字，我可以使用谷歌如何创建带滚动选项的启动站点，如下面的站点所示：或者在视图中向下滚动图像时如何保持静态： http:

浏览 3提问于2015-05-10得票数 0

回答已采纳

1回答

页面加载延迟+ css动画时的JS ScrollIntoView问题

javascript、html、css、css-animations、lazy-loading

当我的页面很长的时候，我遇到了一个问题，很多<img loading="lazy"> +一些css动画(比如AOS )都在滚动显示。因此，如果我想使用element.scrollIntoView()，那么页面滚动到高于所需元素的位置。我想这是因为loading=“懒惰”，也许是因为滚动的css动画。我试着获得元素<

浏览 4提问于2022-08-24得票数 0

回答已采纳

3回答

用于在滚动时让元素在屏幕上/屏幕外“飞”的插件

javascript、jquery、html、animation、plugins

有没有人知道一个javascript/jQuery插件，当我向下滚动页面时，它会将元素“飞”到屏幕上或飞出屏幕？为了更好地描述:我想象了一个很长的垂直滚动页面，其中所有内容都在小的“内容框”中，然后由于不同的操作(在本例中是滚动的结果)，我希望这些框能够飞到屏幕上或飞出屏幕。也许这可以被描述为jQuery动画和视差滚动之间的某种交叉？我觉得我以前在什么地方见过这种效果，

浏览 1提问于2011-12-03得票数 0

回答已采纳

1回答

如何减少javascript滚动/ CSS转换中的FPS下降

javascript、jquery、frame-rate、gsap

我已经在性能分析和优化的兔子洞，我无法减少下降的帧率应该是相当轻的转换，虽然我怀疑它是在卷轴上，虽然节流是可能的责任？非节流jQuery版本.('body'); c.css(

浏览 3提问于2020-07-13得票数 1

回答已采纳

1回答

只使用CSS3创建一个类似Javascript的ScrollTo效果？

css、scroll

是否可以仅使用CSS3来创建类似Javascript的scrollTo效果？例如：并以某种方式告诉窗口平滑地滚动到该位置？使用Javascript很容易，但CSS会更好。

浏览 0提问于2011-11-03得票数 1

1回答

滚动进度指示符不使用fullpage.js

javascript、scroll、fullpage.js

我与Javascript非常新，我正在为自己创建一个新的投资组合网站。目前，我正面临一个与滚动的进度指标的问题。这不管用。在我添加fullpage.js之前，它一直在工作。我已经将我的代码附在下面，我很想知道如何解决这个问题。 <meta charset="utf-8"> <li

浏览 7提问于2021-07-27得票数 0

回答已采纳

1回答

滚动时沿路径移动背景图像位置

jquery、animation、background、parallax

这是我的第一篇帖子，如果不完美的话，我会道歉。$('.bg').scroll(function(){ $(this).css('background-position','0% '+parseInt(-x&#x

浏览 2提问于2012-02-23得票数 2

回答已采纳

4回答

停止手动滚动--强制滚动到特定点

javascript、jquery、html

有没有一种简单的方法来捕获用户的滚动事件(鼠标滚轮、触摸事件或光标键)，以便网站滚动到特定的点。我不知道它叫什么，但这个网站做到了：您尝试向下滚动，视图将滚动到新的部分，而不是允许用户在部分中途停止。

浏览 1提问于2015-05-15得票数 2

1回答

使用jQuery获取动态背景位置

jquery、css

我正在尝试实现一个网站上的视差滚动效果(使用来自Smashing的 )。视差效果工作得很好，但我需要让其中一个精灵在达到某个点时停止滚动。默认情况下，它会继续滚动，直到看不到为止。视差效果通过对元素的背景位置进行动画处理来实现。>= 210 ) { }相反，只返回<e

浏览 2提问于2013-04-05得票数 0

回答已采纳

3回答

如何顺利滚动页面？

javascript、jquery、html、css、animation

我需要滚动页面加载到一个特定的位置，在页面上的动画方式。它运行得很好(使用jQuery的动画)： $('html, body').animate({ scrollTop:我看过一些CSS动画(使用transition和transform)，它们非常流畅，但不知道如何将其应用于页面</e

浏览 15提问于2017-11-16得票数 3

回答已采纳

2回答

有什么方法可以让div用纯CSS飞进/出？

html、css、animation、css-animations

我试图使用CSS动画使div在页面上按一下按钮就飞进/飞出。我知道如何使用CSS动画，但我的问题是:如果我试图使一个div的位置像-1000%，就会有一个水平滚动条。我不想让它出现，但我也不想禁用滚动条。

浏览 2提问于2021-03-04得票数 0

回答已采纳

2回答

jQuery平滑卷轴不适用于Bootstrap 4 Navbar

javascript、jquery、html、bootstrap-4

我在一个我正在制作的网站上有我的导航条的代码： <!</li> </div> </nav> </div&

浏览 4提问于2017-08-02得票数 0

1回答

jQuery accordion自动面板-如何防止页面滚动？

jquery、accordion

我不确定我是否真的在使用accordion小部件，但我已经自动显示了面板，这样站点浏览者就可以在不单击的情况下看到每个面板。<script type="text/javascript"> $("#accordion").accordion({ hea

浏览 0提问于2010-09-02得票数 0

回答已采纳

3回答

使用jQuery在滚动上设置动画

jquery、scroll、jquery-animate

好吧，当我试图使用scroll事件上的一个条件来激活DOM的几个元素时，我遇到了一个问题。首先，我使用的是Drupal7，所以我使用的jQuery库的版本是1.4.4。现在，我想要在页面滚动时通过更改其中元素的css属性来缩小页眉的大小。因此，首先，在scroll事件中，我检查窗口的scrollTop位置。如果位置不同于0(意味着页面向下<em

浏览 0提问于2013-07-10得票数 2

回答已采纳

2回答

在狩猎中闪动卷轴拇指？

javascript、macos、safari

在可可中，有一个API在滚动视图中随时“闪光”mac滚动拇指。如何在safari中使用javascript对overflow:scroll;元素执行此操作？我想让覆盖滚动拇指可见一两秒钟，然后淡出。

浏览 4提问于2013-09-28得票数 0

回答已采纳

1回答

CSS 3动画固定位置侧边栏

css、animation、transition、fixed、sidebar

我想知道是否有一种方法可以达到类似Coyier的效果：使用CSS3动画？我有一个侧边栏，它将页面向下滚动为用户滚动(简单地使用固定位置div)，但我希望将该侧边栏动画化，以便在用户向下滚动时向下弹出和/或播放追赶页面。提前感

浏览 2提问于2012-10-30得票数 1

回答已采纳

1回答

如何在不将页面滚动条重置为顶部的情况下使用jQuery为固定的div设置动画

jquery、scroll、jquery-animate、css-position

这里的第一个帖子，所以要友善;-) } else { $j("#menu").animat

浏览 2提问于2013-02-07得票数 2

回答已采纳

6回答

当用户滚动通过某个div时如何更改CSS

javascript、jquery、html、css

我正在尝试实现一个滚动函数，它根据用户滚动的位置移动元素，这段代码目前为止是工作的，它确实会移动元素。问题是，我希望有一个不同函数的列表，每当您根据某个div的id或类滚动某个div时，它就会移动特定的元素。谢谢更新后的代码可以工作，但是每当我向上滚动动画停止移动时，它真的会出现故障--谁知道更有效的方法来让它工作呢？

浏览 16提问于2014-11-18得票数 4

回答已采纳

1回答

我正在制作一个网页包含几个JavaScript幻灯片，CSS，动画菜单和CSS过渡动画负载，而且我的页面高度在iPad上很长。我有一个导航菜单，当用户单击它时，它将滚动到页面上的特定位置，使用： var $viewport = $('html:not(:animated),body:not(:animated)');$viewport.animate({scrollTop: dest}, 2000

浏览 0提问于2012-11-24得票数 1

点击加载更多