JavaScript实现页面滚动动画的方法

　　介绍

小编给大家分享一下JavaScript实现页面滚动动画的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

JavaScript可以做什么

1。可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 　　2 .可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 　　3 .可以根据用户的操作,动态的创建页面。 　　4使用JavaScript可以通过设置饼干存储在浏览器上的一些临时信息。

先预览一下实现的效果:

JavaScript实现页面滚动动画的方法

我们使用CSS来实现动画,用JavaScript来处理触发所需的样式。我们先来创建布局。

创建布局

我们先使用HTML创建页面布的局,然后为需要实现动画的元素分配一个通用类名,后面的JavaScript通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名js-scroll, HTML代码如下:

& lt; section 类=皊croll-container"比; 　　& lt;才能div 类=皊croll-element  js-scroll"祝辞& lt;/div> 　　& lt;才能div 类=皊croll-caption"祝辞却;能够animation  fades 得到,拷贝上。你们;/div> 　　& lt;/section>

添加CSS样式

先来一个简单的淡入动画效果:

.js-scroll  { 　　,,不透明度:0; 　　过渡:才能,opacity  500 ms; 　　} 　　 　　.js-scroll.scrolled  { 　　,,不透明度:1; 　　}

页面上的所有js-scroll元素都会被隐藏,不透明度为0。当滚动到该元素区域时,给它加上.scrolled类名让它显现出来。

用JavaScript操作元素

有了布局和样式,现在我们需要编写一个JavaScript函数,当元素滚动到视图中时,为它们分配类名。

我们来简单分解一下逻辑:

<李>

获取页面上所有js-scroll元素

<李>

使这些元素默认淡出不可见

<李>

检测元素是否在视窗内

<李>

如果元素在视窗内则分配滚动类名

获取目标元素

获取页面上所有js-scroll元素,使用document.querySelectorAll()即可:

const  scrollElements =, document.querySelectorAll (& # 39; .js-scroll& # 39;)

默认淡出所有目标元素

遍历这些元素,使其全部淡出不可见:

scrollElements.forEach ((el),=祝辞,{ 　　el.style.opacity 才能=0 　　})

检测元素是否在视窗内

我们可以通过判断元素距离页面顶部的间距是否小于页面可见部分的高度,来检测元素是否在用户视窗中。

在JavaScript中,我们使用<代码> getBoundingClientRect ()。前方法来获取元素与页面顶部的距离,使用<代码>窗口。innerHeight 或<代码> document.documentElement。clientHeight>

JavaScript实现页面滚动动画的方法

我们将使用上述逻辑创建一个<代码> elementInView 函数:

const  elementInView =, (el),=祝辞,{ 　　const 才能;elementTop =, el.getBoundingClientRect直()上 　　 　　return 才能; 　　,,,elementTop  & lt;=, (window.innerHeight  | |, document.documentElement.clientHeight) 　　,,) 　　}

我们可以修改这个函数来检测元素是否向页面滚动了x个像素,或者检测页面滚动的百分比。

const  elementInView =, (el, scrollOffset =, 0),=祝辞,{ 　　const 才能;elementTop =, el.getBoundingClientRect直()上 　　 　　return 才能; 　　,,elementTop  & lt;=,,,(window.innerHeight  | |, document.documentElement.clientHeight),安康;scrollOffset 　　,,) 　　}

在这种情况下,如果元素已经按scrollOffset的数量滚动到页面中,该函数返回真的。我们再稍作修改,把参数scrollOffset变成百分比:

const  elementInView =, (el, percentageScroll =, 100),=祝辞,{ 　　const 才能;elementTop =, el.getBoundingClientRect直()上 　　 　　return 才能; 　　,,elementTop  & lt;=,,,(window.innerHeight  | |, document.documentElement.clientHeight), * 　　,,,,,(时间/percentageScroll  100) 　　,,) 　　}

JavaScript实现页面滚动动画的方法