当前位置:首页 > 技术博客 > JavaScript > javascript 滚动插入元素动画特效

javascript 滚动插入元素动画特效

admin2年前 (2021-08-17)JavaScript669

监听窗体滚动条,新的元素会以 左移、右移、淡出、淡入 等各种方式插入到文档流中


<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>javascript 滚动插入元素动画特效</title>    
<style>    
* {    
box-sizing: border-box;    
}    
body {    
background-color: #efedd6;    
display: flex;    
flex-direction: column;    
align-items: center;    
justify-content: center;    
margin: 0;    
overflow-x: hidden;    
}    
h1 {    
margin: 10px;    
}    
.box {    
background-color: steelblue;    
color: #fff;    
display: flex;    
align-items: center;    
justify-content: center;    
width: 400px;    
height: 200px;    
margin: 10px;    
border-radius: 10px;    
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);    
transform: translateX(400%);    
transition: transform 0.4s ease;    
}    
.box:nth-of-type(even) {    
transform: translateX(-400%);    
}    
.box.show {    
transform: translateX(0);    
}    
.box h2 {    
font-size: 45px;    
}    
.box img{    
width: 400px;    
height: 200px;    
}    
</style>    
</head>    
<body>    
<div>    
<h1>javascript 滚动插入元素动画特效</h1>    
<div class="box">    
<h2>Content1</h2>    
</div>    
<div class="box">    
<h2>Content</h2>    
</div>    
<div class="box">    
<h2>Content2</h2>    
</div>    
<div class="box">    
<h2>Content3</h2>    
</div>    
<div class="box">    
<h2>Content4</h2>    
</div>    
<div class="box">    
<h2>Content5</h2>    
</div>    
<div class="box">    
<img src="https://www.uxqr.com/background.php?t1.png">    
</div>    
<div class="box">    
<img src="https://www.uxqr.com/background.php?t2.png">    
</div>    
<div class="box">    
<img src="https://www.uxqr.com/background.php?t3.png">    
</div>    
<div class="box">    
<img src="https://www.uxqr.com/background.php?t4.png">    
</div>    
</div>    
<script>    
const boxes = document.querySelectorAll('.box')    
window.addEventListener('scroll', checkBoxes)    
checkBoxes()    
function checkBoxes() {    
const triggerBottom = window.innerHeight / 5 * 4    
boxes.forEach(box => {    
const boxTop = box.getBoundingClientRect().top    
if (boxTop < triggerBottom) {    
box.classList.add('show')    
} else {    
box.classList.remove('show')    
}    
})    
}    
</script>    
</body>

电脑端的朋友可以直接点击上面的【运行代码】查看效果。注:在线预览可能遇到bug,代码保存到本地后可解决!


写在最后:

zblog纯净主题食用方法

css代码:

.block .post {    
transform: translateX(400%);    
transition: transform 0.4s ease;    
}    
.block .show {    
transform: translateX(0);    
}

js代码:

const boxes = document.querySelectorAll('.block .post')    
window.addEventListener('scroll', checkBoxes)    
checkBoxes()    
function checkBoxes() {    
const triggerBottom = window.innerHeight / 5 * 4    
boxes.forEach(box => {    
const boxTop = box.getBoundingClientRect().top    
if (boxTop < triggerBottom) {    
box.classList.add('show')    
} else {    
box.classList.remove('show')    
}    
})    
}


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/145.html

相关文章

百度地图JavaScript简单标点连线

百度地图JavaScript简单标点连线

背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还...

JavaScript监听页面复制

JavaScript监听页面复制

<script>     /** 监听copy事件 */   &...

【硬核原创】网站标题根据用户变化而变化

【硬核原创】网站标题根据用户变化而变化

最近有朋友问我 www.timicm.com 这个网站的标题效果什么实现的,本着无私奉献的精神和你们分享一下title是不断变化的,怎么变化呢?当你访...

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

HTML代码<span onclick="zh_tran('t');">繁体中文</span&g...

响应式人物介绍列表ui切换特效

响应式人物介绍列表ui切换特效

一款js css3制作响应式的人物介绍图文列表,带左右按钮控制列表滑动切换效果。可用于企业团队人物介绍ui布局。下载链接: https://pan.baidu....

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

在网上搜到很多,99%不能用,自己动手将整理记录一下吧,以便后续再使用!<head>     <ti...

评论列表

南通伍林堂文化传播有限公司

测试评论

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌