一、效果图

可以看出，在悠方滚动条滚动的时候，当高度打到一定高度的时候就会出现一个div盒子，就好像刚加载出来一样

而且可以一直向下滚动。

二、代码部分

1.html结构

    <div class="box">content1</div><div class="box">content2</div><div class="box">content3</div><div class="box">content4</div>

因为主要是后面通过js添加节点，所以结构很简单

2.css样式部分

<style>* {padding: 0;margin: 0;}html,body {width: 100vw;overflow-x: hidden;display: flex;justify-content: center;align-items: center;flex-direction: column;}.box {width: 1200px;height: 500px;background-color: rgb(195, 135, 235);border-radius: 8px;font-size: 30px;text-align: center;line-height: 500px;margin-top: 20px;color: #fff;/* 添加过度效果 */transition: transform .5s ease;}/* 偶数 */.box:nth-child(even) {transform: translateX(-200%);}/* 奇数 */.box:nth-child(odd) {transform: translateX(200%);}.box.show-center {transform: translateX(0);}</style>

注意:因为是将div分别向左右移动了，所以在body的样式中，要加一个width:100vw;overflow-x:hidden,这样就不会出现横向滚动条。

最后写了一个 show-center的类名，当满足条件的时候添加这个类名，就能让当前div居中显示。

3.js部分

 <script>//在页面加载完毕后执行一次滚动加载函数window.onload = function () {scrollLoad()}//监听滚动window.addEventListener('scroll', scrollLoad)//定义数值var count = 5//滚动加载函数function scrollLoad() {// 1.获取所有的boxvar boxList = document.querySelectorAll('.box')//2. 定义一个目标值var targetValue = window.innerHeight * 0.8//3.获取每一个box距离浏览器顶部的值boxList.forEach(function (box) {var boxTop = box.getBoundingClientRect().topif (boxTop <= targetValue) {box.classList.add('show-center')} else {box.classList.remove('show-center')}})createBox()}//创建box函数function createBox() {//网页全文高度var pageHeight = document.documentElement.scrollHeight//滚动条被卷去的高度var stop = document.documentElement.scrollTop;//窗口高度var seeHeight = window.innerHeight//滚动条距离底部的高度var bottom = pageHeight - stop - seeHeight//如果高度小于200 就添加一个节点if (bottom <= 200) {var div = document.createElement('div')div.classList.add('box');div.innerHTML = 'content' + count;count++document.body.appendChild(div)}}</script>

1.在滚动函数：scrollLoad中用到了getBoundingClientRect().top

getBoundingClientRect() //获取元素位置，这个方法没有参数

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

top：元素上边到视窗上边的距离;

right：元素右边到视窗左边的距离;

bottom：元素下边到视窗上边的距离;

left：元素左边到视窗左边的距离;

width：是元素自身的宽

height是元素自身的高

这里我们只关注它的top值，前面定了一个目标值targetValue为页面高度的80%，当当前元素的高度小于这个高度时，给它添加show-center类使它回到居中的位置，如果小于的话，就删除这个类。

2.createBox() 函数用来判断滚动条的高度，如果距离底部小于200px的话就创建一个新节点添加到body中。

这样一个一直滚动一直更新节点的效果就完成了。

三、代码总结

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}html,body {width: 100vw;overflow-x: hidden;display: flex;justify-content: center;align-items: center;flex-direction: column;}.box {width: 1200px;height: 500px;background-color: rgb(195, 135, 235);border-radius: 8px;font-size: 30px;text-align: center;line-height: 500px;margin-top: 20px;color: #fff;/* 添加过度效果 */transition: transform .5s ease;}/* 偶数 */.box:nth-child(even) {transform: translateX(-200%);}/* 奇数 */.box:nth-child(odd) {transform: translateX(200%);}.box.show-center {transform: translateX(0);}</style>
</head><body><div class="box">content1</div><div class="box">content2</div><div class="box">content3</div><div class="box">content4</div><script>//在页面加载完毕后执行一次滚动加载函数window.onload = function () {scrollLoad()}//监听滚动window.addEventListener('scroll', scrollLoad)//定义数值var count = 5//滚动加载函数function scrollLoad() {// 1.获取所有的boxvar boxList = document.querySelectorAll('.box')//2. 定义一个目标值var targetValue = window.innerHeight * 0.8//3.获取每一个box距离浏览器顶部的值boxList.forEach(function (box) {var boxTop = box.getBoundingClientRect().topconsole.log(box.getBoundingClientRect());if (boxTop <= targetValue) {box.classList.add('show-center')} else {box.classList.remove('show-center')}})createBox()}//创建box函数function createBox() {//网页全文高度var pageHeight = document.documentElement.scrollHeight//滚动条被卷去的高度var stop = document.documentElement.scrollTop;//窗口高度var seeHeight = window.innerHeight//滚动条距离底部的高度var bottom = pageHeight - stop - seeHeight//如果高度小于200 就添加一个节点if (bottom <= 200) {var div = document.createElement('div')div.classList.add('box');div.innerHTML = 'content' + count;count++document.body.appendChild(div)}}</script>
</body></html>

感谢大家浏览！！！

用js实现滚动加载动画效果相关推荐

真是好东西！一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
【每日一练】118—一款评论留言加载动画效果
写在前面今天这个练习也是我们在开发中会经常遇到的一个实用场景,比方我们在开发个人主页或者企业营销主页时,对某人或者某物的推荐留言评论,都会应用到,这种效果也是我们在很多页面中经常见到的一种效果,好了 ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章. 在本篇文章之前,Jerry 印象最深的幽灵,应该要算<星际争霸I>里人族能够隐形的空中单位 Wr ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
echarts加载动画效果_入门ae教程：科技类的加载动画，非常酷炫的效果，附带教程...
效果图今天这个教程属于初学者的教程,很简单,但是科技类的加载动画,我个人觉得都是非常酷的(每天5分钟,充实一整天) 教程 1. 首先打开我们的AE 2. 新建一个合成,1080*660px,持续时间 ...

用js实现滚动加载动画效果