skroll实现滚动可视化入场动画效果代码-html代码-BFW代码库

skroll实现滚动可视化入场动画效果代码

代码语言：html

代码描述：skroll实现滚动可视化入场动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

 
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			background:#222;
			font-family:'Baloo Bhaijaan',cursive;
		}
		h1,h2,h3{
			text-align:center;
		}
		.container{
			width:80%;
			margin:0 auto;
			overflow:hidden;
		}
		.box{
			width:19%;
			height:200px;
			background:#ff5722;
			float:left;
			margin:.5%;
			border-radius:15px;
		}
		.fw{
			width:100%;
		}
		.green{
			background:#8bc34a;
		}
		.yellow{
			background:#ffc107;
		}
		.blue{
			background:#03a9f4;
		}
		.violet{
			background:#9c27b0;
		}
		.grey{
			background:#607d8b;
		}
		.header{
			height:auto;
			color:#fff;
			background:#ff9800;
		}
		.header h1{
			padding:100px 0;
			font-size:4em;
		}
		.w3{
			width:32.333%;
		}
		.w4{
			width:24%;
		}
		.w2{
			width:49%;
		}
		.w5{
			width:19%;
		}
		.h2{
			height:400px;
		}
		.h5{
			height:50px;
		}
	</style>
</head>
<body>
    <div class="container">
        <div class="box fw header">
            <h1>Skroll.js</h1>
        </div>
        <div class="box w3 anim1"></div>
        <div class="box w3 anim1"></div>
        <div class="box w3 anim1"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w2 anim4 yellow h2"></div>
        <div class="box w2 anim4 yellow h2"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 h5 anim8 grey"></div>
        <div class="box w5 .........完整代码请登录后点击上方下载按钮下载查看