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

VIP文章 mzldustu

已于 2022-10-19 23:50:40 修改

阅读量759

点赞数

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签： css javascript 前端 html

于 2022-10-18 12:56:42 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127386269

版权

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

接下来来看实现
首先是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=