js实现蓝天白云飘动下拉滚动穿越效果代码-html代码-BFW代码库

js实现蓝天白云飘动下拉滚动穿越效果代码

代码语言：html

代码描述：js实现蓝天白云飘动下拉滚动穿越效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
canvas {
  display: block;
  margin: 2em;
}
.bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(40%, #d7dde6), color-stop(80%, #97a8c0));
  background-image: linear-gradient(to top, #d7dde6 40%, #97a8c0 80%);
  background-size: cover;
  width: 400vw;
  height: 400vh;
}
</style>



</head>

<body>

<script>/*! Canvallax, v1.2.1 (built 2015-11-13) https://github.com/shshaw/Canvallax.js @preserve */
!function(){function a(a,b){return a.zIndex===b.zIndex?0:a.zIndex<b.zIndex?-1:1}function b(){this.width=this.width?this.width:this.image.width,this.height=this.height?this.height:this.image.height}var c=window,d=document,e=d.documentElement,f=d.body,g=c.requestAnimationFrame||c.mozRequestAnimationFrame||c.webkitRequestAnimationFrame||c.msRequestAnimationFrame||c.oRequestAnimationFrame||function(a){c.setTimeout(a,20)},h=function(){},i={tracking:"scroll",trackingInvert:!1,x:0,y:0,damping:1,canvas:void 0,className:"",parent:document.body,elements:void 0,animating:!0,fullscreen:!0,preRender:h,postRender:h},j=!1,k=0,l=0,m=function(){k=e.scrollLeft||f.scrollLeft,l=e.scrol.........完整代码请登录后点击上方下载按钮下载查看