尝试向页面添加雪但它完全消除了我的HTML并且没有显示任何内容

时间：2018-02-03 04:39:53

标签： javascript html css

我正在尝试添加我从css技巧网站获得的降雪背景。雪看起来很酷，但由于某种原因背景隐藏了我的HTML内容。请参阅下面的代码。 我怎样才能保持这个很酷的背景，一个背景，这样它就不会占据整个页面 ？我只需要代码在场景后面运行，而html可以完成它的工作。 我感谢任何帮助，我知道我的代码并不完美。此外，我只是在学习，而且我能得到的任何帮助都很棒。

HTML：

var c = document.getElementById('canv'),
$ = c.getContext("2d");
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight;

Snowy();

function Snowy() {
  var snow, arr = [];
  var num = 600, tsc = 1, sp = 1;
  var sc = 1.3, t = 0, mv = 20, min = 1;
  for (var i = 0; i < num; ++i) {
    snow = new Flake();
    snow.y = Math.random() * (h + 50);
    snow.x = Math.random() * w;
    snow.t = Math.random() * (Math.PI * 2);
    snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
    snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
    snow.sp = snow.sp < min ? min : snow.sp;
    arr.push(snow);
  }


  go();
  function go(){
    window.requestAnimationFrame(go);
    $.clearRect(0, 0, w, h);
    $.fillStyle = 'hsla(242, 95%, 3%, 1)';
    $.fillRect(0, 0, w, h);
    $.fill();
    for (var i = 0; i < arr.length; ++i) {
      f = arr[i];
      f.t += .05;
      f.t = f.t >= Math.PI * 2 ? 0 : f.t;
      f.y += f.sp;
      f.x += Math.sin(f.t * tsc) * (f.sz * .3);
      if (f.y > h + 50) f.y = -10 - Math.random() * mv;
      if (f.x > w + mv) f.x = - mv;
      if (f.x < - mv) f.x = w + mv;
      f.draw();}


  }



  function Flake() {
    this.draw = function() {
      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
      $.moveTo(this.x, this.y);
      $.fillStyle = this.g;
      $.beginPath();
      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
      $.fill();}
  }

}

window.addEventListener('resize', function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);
    @import url(https://fonts.googleapis.com/css?
    family=Molle:400italic&subset=latin,latin-ext);
    body{
    background-color: hsla(0,0%,0%,1);
    margin: 0px;
    overflow: hidden;
    font-family: 'Molle', cursive;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">

    <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Site</title>
    </head>
    <canvas id='canv'></canvas>
    <body>
    <div id="home">    

                       

    <div id="wrapper">
    <header>	
   

     <h1>My Site</h1>
    <div class="snow"></div>
    <nav class="nav">
    <ul>
	<li><a href="#home">Home</a></li> 
	<li><a href="#menu">Menu</a></li>
	<li><a href="#aboutus">About Us</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#social">Social</a></li>
    </ul>
    </nav>
    </header>
      </div>
       </div>
      </body>
    </html>

1 个答案:

答案 0 :(得分：1)

var c = document.getElementById('canv'), 
$ = c.getContext("2d");
var w = c.width = window.innerWidth, 
h = c.height = window.innerHeight;

Snowy();

function Snowy() {
  var snow, arr = [];
  var num = 600, tsc = 1, sp = 1;
  var sc = 1.3, t = 0, mv = 20, min = 1;
    for (var i = 0; i < num; ++i) {
      snow = new Flake();
      snow.y = Math.random() * (h + 50);
      snow.x = Math.random() * w;
      snow.t = Math.random() * (Math.PI * 2);
  snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
  snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
  snow.sp = snow.sp < min ? min : snow.sp;
  arr.push(snow);
}


 go();
  function go(){
    window.requestAnimationFrame(go);
      $.clearRect(0, 0, w, h);
      $.fillStyle = 'hsla(242, 95%, 3%, 1)';
      $.fillRect(0, 0, w, h);
      $.fill();
        for (var i = 0; i < arr.length; ++i) {
      f = arr[i];
      f.t += .05;
      f.t = f.t >= Math.PI * 2 ? 0 : f.t;
      f.y += f.sp;
      f.x += Math.sin(f.t * tsc) * (f.sz * .3);
      if (f.y > h + 50) f.y = -10 - Math.random() * mv;
      if (f.x > w + mv) f.x = - mv;
      if (f.x < - mv) f.x = w + mv;
      f.draw();}


}



function Flake() {
   this.draw = function() {
      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
      $.moveTo(this.x, this.y);
      $.fillStyle = this.g;
      $.beginPath();
      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
      $.fill();}
  }

}

window.addEventListener('resize', function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);
@import url(https://fonts.googleapis.com/css?
family=Molle:400italic&subset=latin,latin-ext);
body{
background-color: hsla(0,0%,0%,1);
margin: 0px;
overflow: hidden;
font-family: 'Molle', cursive;
z-index:10;
}
#canv{
position:absolute;
top:0;
z-index:-1;
}
h1{
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>

<body>
<canvas id='canv'></canvas>
<div id="home">    



<div id="wrapper">
<header>    


 <h1>My Site</h1>
<div class="snow"></div>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li> 
<li><a href="#menu">Menu</a></li>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
</header>

相关问题
最新问题