如何在滚动时启动动画，然后在5秒后延迟，然后在回滚时重新开始？
在滚动时启动动画，然后在5秒后延迟，然后在回滚时重新开始，可以通过以下步骤实现：
- 首先，使用前端开发技术来监听滚动事件。可以使用JavaScript中的
scroll事件来实现。当滚动事件触发时，执行相应的代码。 - 在滚动事件的处理函数中，可以使用CSS动画来创建动画效果。可以使用CSS的
@keyframes规则定义动画的关键帧，并使用animation属性将动画应用到元素上。 - 在动画的CSS样式中，设置适当的延迟时间，可以使用
animation-delay属性来实现。将延迟时间设置为5秒，即5000毫秒。 - 当滚动回滚时，需要重新开始动画。可以使用JavaScript来监听滚动事件的反向滚动，然后重新启动动画。可以通过比较当前滚动位置和上一次滚动位置的差值来判断滚动方向。
以下是一个示例代码，演示如何在滚动时启动动画，然后在5秒后延迟，然后在回滚时重新开始：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 1s infinite;
}
@keyframes myAnimation {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var lastScrollPos = window.pageYOffset || document.documentElement.scrollTop;
var isScrollingUp = false;
window.addEventListener('scroll', function() {
var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPos > lastScrollPos) {
// 向下滚动
isScrollingUp = false;
} else {
// 向上滚动
isScrollingUp = true;
}
lastScrollPos = currentScrollPos;
});
setInterval(function() {
var box = document.querySelector('.box');
if (isScrollingUp) {
// 向上滚动时重新开始动画
box.style.animation = 'none';
void box.offsetWidth; // 强制重绘
box.style.animation = 'myAnimation 1s infinite';
}
}, 100);
</script>
</body>
</html>在这个示例中，我们创建了一个红色的方块作为动画元素。使用CSS动画将方块从初始位置向右平移200像素，动画时长为1秒，并设置为无限循环播放。通过JavaScript监听滚动事件，判断滚动方向，并在向上滚动时重新开始动画。
相关·内容
我写了这个时间线，当用户滚动到屏幕中间，然后显示动画，但它重复每次条件为真，那么我如何设置它显示动画第一次，然后延迟5秒，然后如果条件为真，它再次显示动画？
浏览 15提问于2019-12-20得票数 1
回答已采纳
在就绪函数scrollDown动画开始时，在scrollDown的完全回调监听器中，我调用scrollUp函数开始滚动动画。经过一个周期，完成滚动下来的动画需要一些时间来重新开始。更重要的是，在每个循环完成后，延迟时间都会增加。
浏览 0提问于2020-02-01得票数 0
回答已采纳
单击按钮时，页面应向下滚动，以id="myTarget“作为div。body').animate({ });我的问题是，当您在按钮上单击几次时，页面向下滚动。在那之后你就不能向上滚动了。有什么方法可以在页面移动时停止单击事件吗？
浏览 0提问于2015-07-04得票数 1
回答已采纳
1回答
在我使用wow.js在滚动上动画元素。它在本地运行得很好，但当我上传到服务器上时，动画类在滚动之前被调用(带有页面加载)。
浏览 2提问于2016-05-14得票数 2
1回答
我在C#中构建了一个Windows桌面应用程序，当更新可用时，它会自动更新自己。为此，它使用MSI安装程序包。有时，在更新应用程序时，会出现由于停电而导致的PC关机，当系统重新启动我的应用程序时，应用程序就会损坏。剩下的唯一选择就是手动修复它。有什么可以自动恢复的吗？更新过程由包中包含的另一个exe启动，它具有所需的管理权限，使用如下代码：process.StartInfo.FileName = "
浏览 0提问于2018-03-23得票数 2
1回答
，假设的目标：，一个球在人行道上滚动的动画。当球滚过路旁的每一根灯柱时，一棵藤蔓开始长出灯柱。文件1：(父)一个场景文件，包含一个主动刚体球在被动刚体人行道上滚动。这个球上的动画可以通过改变障碍物的位置等来改变。
文件2：(子)单个多边形藤蔓动画成长为一个多边形灯柱。的问题：是否可以在父场景文件中放置一些对灯柱文件的引用，然后在球滚下人行道时触发嵌入的vine
浏览 0提问于2012-11-13得票数 0
1回答
它通常发生在X轴指数超过1000之后.我相信，添加到图表中的数据在新的数据到达后不会被删除。我是否需要自己移除这些价值观，还是图书馆提供了一些回收？另外，当滚动回滚时，滚动只允许最多达到某个X索引，然后一旦达到特定的X索引，它就会自动跳转到LineData中的最大索引。如何控制我们可以回滚的金额？
浏览 2提问于2015-07-22得票数 0
回答已采纳
这很好用，但是在iOS 5.1中，当用户释放下拉按钮时，EGORefreshTableHeaderView不会滚动回预期的高度。正常情况下，它应该会回滚到60px的contentInset。然后，加载视图应该在加载过程所用的时间内可见，然后滚动回0px inset。第一次回滚应该发生在egoRefreshScrollViewDidEndDragging:scrollView方法中。(如下面的屏幕截图
浏览 2提问于2012-05-12得票数 0
回答已采纳
在一些情况下，我需要对元素进行动画处理，比如将其向左移动或淡入，但仅在初始动画100%完成之后。
比如说，我有一个搜索抽屉，当你点击一个搜索图标时，它会从页面的顶部滑出。我尝试过使用延迟，但这似乎不起作用，而且当点击顶部的链接而不是底部的链接时，可能会导致明显的延迟。也就是说，我也在尝试运行一个动画，当你点击一个元素时，我希望它向左移动大约330px，然后，在它到达那个位置
浏览 0提问于2013-08-09得票数 3
因此，我尝试使用具有以下行为的简单终端应用程序：每次按下"enter“，屏幕就会被清除，新的内容就会出现在它的位置上。换句话说，当我滚动回滚时，我看到我的程序打印的每一个“页面”，包括空格和打印出来的内容。例如，如果我打印了两次内容，那么我希望我的回滚看起来如下所示：$ run my-app
[result of
浏览 0提问于2019-11-07得票数 0
回答已采纳
人民例如，我可以有一个带有按钮的窗口和一个绘制了球的DrawingArea。当我点击按钮时，球就会上下起伏，然后停下来。在另一种情况下，球可能在屏幕的左侧。当我切换CheckBox时，球向右移动(不是立即移动，而是在过渡中移动)。如果我取消勾选，
浏览 1提问于2011-08-11得票数 1
回答已采纳
3回答
我正在运行laravel 5.4，并注意到事务回滚不起作用。我在InnoDB文件中将数据库引擎设置为settings.php，并尝试了DB::rollback();和DB::rollBack(); (即大写和小写b)，但它没有回滚我的数据库。它创建一个记录，提交它，然后回滚。然而，最后一个断言失败了。回滚后，仍会在数据库中找到记录。我遗漏了什么吗？或者是有一只虫子和拉拉在一起？
浏览 16提问于2017-10-07得票数 0
回答已采纳
在我的终端中，当我键入一个像"git克隆“这样的部分命令，然后按下"up"，它将滚动到前面的每个命令中，其中包含"git克隆”的开头。当我在iTerm2中尝试这个命令时，它只回滚前一个命令。如何在iTerm2中模仿这种行为？
浏览 4提问于2022-01-04得票数 3
2回答
首先，当它加载时，你可以看到幻灯片( div )滚入和滚出，然后图像SRC被改变，div使用新的bg第二次滚动(可能有一个很小的img加载延迟)。一切都很好！您现在可以看到幻灯片(div)滚动和滚动，然后图像SRC被更改，但它滚动到bg中的前一个图像，并在动画完成后立即更改它。-webkit-背面-可见性:隐藏；在IMG上解决了问题，但在更严重的示例中引入了其他问题:(。
有什么想
浏览 0提问于2016-04-04得票数 0
我已经运行了JQuery，并且我想使用scrollTop动画将窗口移回接近顶部的位置(大约240px，尽管有些可变)，作为AJAX调用的回调，它将替换页面上的大量HTML内容。我使用的是：我遇到的问题是，当这段代码在没有延迟或超时的情况下运行时，窗口会向一个不符合预期的位置做一个非常小的滚动动画当我添加一些任意延迟<
浏览 2提问于2011-10-19得票数 0
我正在尝试创建一个固定的导航，它在用户滚动一段短距离后滑行，然后在滚动回滚后返回到固定视图。下面的代码在一定程度上起作用，但是跳过，没有在导航上上下滚动时看到的平滑幻灯片：
var previousScroll = 0,$('.nav').removeClass('scrolling');
浏览 3提问于2014-08-02得票数 0
回答已采纳
1回答
当涉及到使用jQuery的时候，我不是很聪明，我正在做一个项目，其中包括在手机中动画一个部分，所以它向下滚动，演示手机中的内容。我有两部手机，并排的，有生命的。它的工作方式是左边滚动，暂停，然后右边的滚动，然后暂停。他们会这样做，直到他们到达终点。他们也有一个球图标，与它动画。我让它工作了，但是项目的范围是，当用户滚动到页面上的那个部分时，手机中的滚动动画就会动画化。当我试图让它起作用时，动
浏览 4提问于2014-02-25得票数 0
回答已采纳
我想要动画页面滚动到页面的不同部分，当用户滚动增量。pagePos = $(window).scrollTop(); }); });
问题是，在我的初始动画关闭之后，我得到了一个链式动画，它将页面动画恢复到顶部。我不知道为什么，因为它不应该动画，除非'animating‘设置为false。只有当动画完成时，它
浏览 1提问于2012-06-21得票数 0
回答已采纳
1回答
我有一些东西在一页上。当它们滚动到视图中时，我会向它们添加动画类，如下所示： $(this).addClass('animate');
这将触发每个页面加载一次动画:当图像从视图端口的顶部变为400 to时<
浏览 3提问于2014-03-30得票数 1
回答已采纳
当我滚动到UITableView的新区域时，加载延迟图像，然后继续滚动回原来的区域，无论我现在做什么，新的区域都不会显示新的图像。
我的代码是基于苹果懒表视图的。如果我滚动到新区域，移动到旧区域*quickly*，移回新区域，图像将不会加载，无论我现在在哪里(只有在我快速回滚的新区域中的图像才不会加载)，在其他情况下，图像都是正确显示的。
浏览 1提问于2011-08-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
