50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）

今天我们来实现的是页面滚动动画，比如说页面使用鼠标滚轮向下滚动的时候，内容区域会分别从左从右滑动到居中的内容区域，大概效果如下：

接下来来看实现
首先是html: 没什么特别的地方，主要就是设置一些内容盒

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Scroll Animation</title></head><body><h1>Scroll to see the animation</h1><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><script src="script.js"></script></body>
</html>

然后再来看css:

* {box-sizing: border-box;
}body {background-color: #efedd6;display: flex;flex-direction: column;align-items: center;justify-content: center;/* 这个项目需要滚动条，就不用设置下面的两行代码了 *//* height: 100vh; *//* 取消横向滚动条 */overflow-x: hidden;margin: 0;
}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 2s ease;
}
/* 所有偶数的box换个方向进入 */
.box:nth-of-type(even){transform: translateX(-400%);
}.box.show{transform: translateX(0);
}.box h2 {font-size: 45px;
}

主要其实就是设置动画以及水平方向百分之多少平移过来，这里设置的是400%和-400%，然后到达一个没有任何平移效果，也就是最终的内容区域。

然后再看JavaScript：

const boxes = document.querySelectorAll('.box')
// 滚动时触发事件
window.addEventListener('scroll',checkBoxes)function checkBoxes(){// 文档显示区的高度为窗口的4/5，这里是设置底部触发器const triggerBottom = window.innerHeight / 5 * 4boxes.forEach(box => {// 设置盒子的顶部触发器，这个getBoundingClientRect()方法就是获取box盒子的顶部位置参数const boxTop = box.getBoundingClientRect().top// 当盒子的顶部触发器小于文档显示区底部触发器，那么盒子就会被添加上show，然后就实现了box的移入，如果不是，那么就是移除盒子// 举个例子，屏幕是1000px，然后文档显示区是800px，也就是底部触发器是800px，那么当一个盒子的顶部触发器为799px高度的时候，它就可以出现在文档显示区了if(boxTop < triggerBottom){box.classList.add('show')}else{box.classList.remove('show')}})
}

设置滚动触发事件，然后设置文档内容区域为屏幕的4/5，然后将剩下的1/5的顶部设置为文档区域的底部触发器，然后通过getBoundingClientRect().top方法获取盒子顶部在浏览器的高度，作为盒子的顶部触发器，当盒子的顶部触发器碰到文档区域的底部触发器，那么就说明该div盒子可以出现在内容区域了，然后它就会被赋上show值从左或者从右平移过来。

这就是今天要实现的页面滚动动画效果，明天继续，一起加油！
戳我到项目gitee地址

50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）相关推荐

618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
纯HTML+CSS仿作京东页面
纯HTML+CSS仿作京东页面大一学了一个月的网页制作课程,就在今天,我对京东页面下手了. 我用的是旧版京东的素材... 先上效果图接下来让我们看看HTML代码 <!DOCTYPE html ...
前端资源文件（图片 css js）同步到阿里云OSS
前端资源文件(图片 css js)同步到阿里云OSS 需求: 为了实现自动化更新前端资源,前端资源已放到了阿里云OSS,实现自动上传. 思路: 1.因为使用的是php语言开发项目,自然会想到用php实 ...
眼睛跟随鼠标转动的小黄人 html+css+js
先上效果(完整代码在最后): 实现过程(可跟着一步一步书写): 1. 先设置基本的css样式,让body高度为100vh后,用flex布局让其子元素居中对齐,(这几行代码直接复制过去就行): *{pa ...
傻瓜一键制作html,营销号生成器源码(纯HTML+CSS+JS)
营销号生成器源码(纯HTML+CSS+JS),最近很火的营销号生成器相信很多人都不陌生,它能帮您生成一段非常标准的小编文案,并且内容废话极多,一般用来调侃使用.本次带来营销号生成器源码资源下载,包含了 ...
前端小项目——模拟微信界面对话框
最近看网课做了个小项目,用到了前端很多知识点用到的知识点: HTML知识点: div大盒子,id为contentALL:包含所有的内容 div头部小盒子,id为header:包含整个对话框的头部信息 ...

50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）

50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）相关推荐

最新文章

热门文章