Question

我在jsfiddle上开发了这个html5动画

我试图让它在纯HTML文档上运行，但它不起作用。

在jsbin上，雪效果没有到来，中间的照片没有出现。

http://jsbin.com/lonefopuzo/1/edit?html,output

＆＃13;

$(function() {

  var COUNT = 180;
  var masthead = document.querySelector('.masthead');
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var width = masthead.clientWidth;
  var height = masthead.clientHeight;
  var i = 0;

  var Snowflake = function() {
    this.x = 0;
    this.y = 0;
    this.vy = 0;
    this.vx = 0;
    this.r = 0;

    this.reset();
  }

  Snowflake.prototype.reset = function() {
    console.log('Reset was called');
    this.x = Math.random() * width;
    this.y = Math.random() * -height;
    this.vy = 1 + Math.random() * 3;
    this.vx = 0.5 - Math.random();
    this.r = 1 + Math.random() * 2;
    this.o = 0.5 + Math.random() * 0.5;
  }

  canvas.width = width;
  canvas.height = height;
  canvas.style.position = 'absolute';
  canvas.style.left = canvas.style.top = '0';
  ctx.fillStyle = '#FFF';

  var snowflakes = [],
    snowflake;
  for (i = 0; i < COUNT; i++) {
    snowflake = new Snowflake();
    snowflakes.push(snowflake);
  }

  function update() {

    ctx.clearRect(0, 0, width, height);

    for (i = 0; i < COUNT; i++) {
      snowflake = snowflakes[i];
      snowflake.y += snowflake.vy;
      snowflake.x += snowflake.vx;

      ctx.globalAlpha = snowflake.o;
      ctx.beginPath();
      ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();

      if (snowflake.y > height) {
        snowflake.reset();
      }
    }

    webkitRequestAnimationFrame(update);
  }

  webkitRequestAnimationFrame(update);

  masthead.appendChild(canvas);
})();





$(function() {
  setTimeout(function() {
    $(".seasons1").addClass("rotate");
  }, 1000);
});


$(function() {
  setTimeout(function() {
    $('.seasons1').animate({
      opacity: 1,
    }, 2000);
  }, 1000);
});

$(function() {
  setTimeout(function() {
    $(".seasons1").removeClass("rotate");
  }, 10000);
});

$(function() {
  setTimeout(function() {
    $(".seasons1").addClass("rotate2");
  }, 11000);
});


$(function() {
  setTimeout(function() {
    $('.seasons1').animate({
      opacity: 0,
    }, 2000);
  }, 14000);
});

$(function() {
  setTimeout(function() {
    $('.seasons2').animate({
      opacity: 1,
    }, 2000);
    $(".seasons2").addClass("rotate");
  }, 14000);
});

＆＃13;

.masthead {
  width: 1000px;
  height: 800px;
  background-size: 1000px 800px;
  background: #ffb76b;
  /* Old browsers */
  background: -moz-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffb76b), color-stop(36%, #ffa73d), color-stop(100%, #ff7c00), color-stop(100%, #ff7f04));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
  /* IE10+ */
  background: linear-gradient(to right, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffb76b', endColorstr='#ff7f04', GradientType=1);
}
.seasons1 {
  width: 299px;
  height: 299px;
  background-image: url("http://i.hizliresim.com/31N162.png");
  position: absolute;
  left: 330px;
  top: 180px;
  opacity: 0;
}
.seasons2 {
  width: 267px;
  height: 267px;
  background-image: url("http://i.hizliresim.com/7VYVJL.png");
  opacity: 0;
  position: absolute;
  left: 340px;
  top: 200px;
}
.rotate {
  -webkit-animation: spin 4s ease-in-out; // No more infinite
  -moz-animation: spin 4s linear;
  animation: spin 4s linear;
}
@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(2460deg);
    transform: rotate(2460deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(2460deg);
    transform: rotate(2460deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(2460deg);
    transform: rotate(2460deg);
  }
}
.rotate2 {
  -webkit-animation: spin 4s ease-in-out; // No more infinite
  -moz-animation: spin 4s linear;
  animation: spin 4s linear;
}
@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(5460deg);
    transform: rotate(5460deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(5460deg);
    transform: rotate(5460deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(5460deg);
    transform: rotate(5460deg);
  }
}
.text1 {
  width: 412px;
  height: 138px;
  background-image: url("http://i.hizliresim.com/W64rEq.png");
  opacity: 1;
  position: absolute;
  left: 40px;
  top: 500px;
}
.text2 {
  width: 523px;
  height: 160px;
  background-image: url("http://i.hizliresim.com/BRE929.png");
  opacity: 1;
  position: absolute;
  left: 440px;
  top: 485px;
}
.replay {
  width: 330px;
  height: 57px;
  background-image: url("http://i.hizliresim.com/BREEzG.png");
  opacity: 1;
  position: absolute;
  z-index: 50;
  left: 50px;
  top: 685px;
}
.replay:hover {
  cursor: pointer;
}
.visit {
  width: 330px;
  height: 57px;
  background-image: url("http://i.hizliresim.com/4ZDD3L.png");
  opacity: 1;
  position: absolute;
  z-index: 50;
  left: 620px;
  top: 685px;
}
.visit:hover {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="masthead">
  <div class="seasons1"></div>
  <div class="seasons2"></div>
  <div class="text1"></div>
  <div class="text2"></div>
  <div class="replay"></div>
  <div class="visit"></div>
</div>

＆＃13;

Answer 1

check the jsfiddle

Check the JSBin

你有几个错误只是为你解决了

首先丢失$并从函数末尾删除()

在CSS中遗漏了一些前缀

并且您使用的是webkitRequestAnimationFrame，其仅适用于Chrome，只会将其更改为requestAnimationFrame

Answer 2

在JSbin上你错过了$添加$(function){...}的第一个()并且你得到了雪花

此外，移除相同$(function){...}末尾的{{1}}，以便动画图片重新投放......

jsfiddle上的代码无法转换

2 个答案: