我包括了css3动画在滚动:动画是工作的。问题是动画不适用于滚动显示。我使用的是on电-scrol.js。这是我的身体:
<div class="main">
<section class="home animatedParent">
<h1 class="animated swing">I am Leon Laci</h1>
<h3 class="animated swing slower">Front End Web
我正在使用给一些动画在我的页面上滚动的一些图像和按钮。我不得不说,我的项目是用React.js开发的,Animate.css是作为一个组件导入的。
事情是,我不知道如何显示我的动画一次(当用户正在滚动),然后停止如果用户想向上(因为现在是再次显示.)。
正如我在链接中所提供的,要使用组件,您必须包装任何想要动画的内容:
<ScrollAnimation animateIn="fadeIn">
Some Text
</ScrollAnimation>
此组件具有许多有限的属性,如animateIn,可以从Animate.css中指定要显示的动画。
O
所以我制作了这个动画网站,每次我在我的按钮上应用“回顶”代码时,它总是在整个页面上滚动,直到它到达顶部。
我希望它能立即把它们带到顶端,而不需要任何花哨的向上滚动效果,这就是我要得到的。
我尝试过多个脚本,它们都是出于某种原因获得动画的(即使我搜索的脚本代码应该不是动画的)。
这是我正在使用的当前脚本:(我尝试了多次,但它们都产生了相同的动画滚动效果)
<!-- Back to top -->
<script>
var btn = $('#BackTop');
$(window).scroll(function()
其目标是让anime.js在用户滚动时显示动画,并在滚动停止时停止动画。向上和向下滚动的动画是不同的。下面是当前的代码: var focusDown, focusUp;
var up = false, down = false, scrollPos = 0, scrollPos1;
var isScrolling;
window.addEventListener('scroll', function () {
window.clearTimeout( isScrolling );
scrollPos1 = $(window).scrollTop()