HTML

 
    <header>
      <h1>Second Cube</h1>
      <p>An experiment on infinite sequences and CSS animations.</p>
      <p>Based on <a href="http://ffffound.com/image/15cca3c0766a634da538fb4bc8b23e2f5a4fe8a7">this image</a> from ffffound.</p>
    </header>
    <div id="viewport">
      <div id="tower">
        <div id="cubes"></div>
      </div>
    </div>
<script type="text/template" id="face">
<svg
  x="0px" y="0px"
  width="<%= size %>px"
  height="<%= size %>px"
  viewBox="0 0 <%= size %> <%= size %>"
  class="face <%= position %>"
  style="bottom: <%= bottom %>px;"
  id="<%= id %>"
  >
<g class="background">
  <rect width="<%= size %>" height="<%= size %>"/>
</g>
<g class="corners">
  <g>
    <polygon points="<%= points.tr %>"/>
    <polygon class="tl" points="<%= points.tl %>"/>
    <polygon points="<%= points.bl %>"/>
    <polygon points="<%= points.br %>"/>
  </g>
</g>
<g class="cross">
  <polygon points="<%= points.cross %>"/>
</g>
</svg>
</script>

JS

xxxxxxxxxx
 
$(function() {
​
  //--------------------------------------------------------------------------
  //
  // Framework
  //
  //--------------------------------------------------------------------------
​
  var points = {
    tr: [[0.83, 0], [0.83,0.01], [0.99,0.01], [0.99,0.17], [1,0.17], [1, 0]],
    tl: [[0.01, 0.01], [0.17,0.01], [0.17,0], [0,0], [0,0.17], [0.01, 0.17]],
    bl: [[0.01, 0.99], [0.01,0.83], [0,0.83], [0,1], [0.17,1], [0.17, 0.99]],
    br: [[0.99, 0.99], [0.83,0.99], [0.83,1], [1,1], [1,0.83], [0.99, 0.83]],
    cross: [
      [0.67, 0.50],
      [0.50, 0.50],
      [0.50, 0.33],
      [0.49, 0.33],
      [0.49, 0.50],
      [0.33, 0.50],
      [0.33, 0.51],
      [0.49, 0.51],
      [0.49, 0.67],
      [0.50, 0.67],
      [0.50, 0.51],
      [0.67, 0.51]
    ]
  };
​
  var scalePoint = function (point, scale) {
    return _.map(point, function (value) {
      return value * scale;
    });
  };
​
  var makeContext = function (size) {
    size = parseFloat(size);
    size = _.isNaN(size) ? 100 : size;
    var context = {};
    context.size = size;
    context.points = _.reduce(points, function (scaledPoints, points, property) {
      scaledPoints[property] = _.map(points, function (point) {
        return scalePoint(point, size);
      });
      return scaledPoints;
    }, {});
    return context;
  };
​
  var faceMaker = function (position, next) {
    return function (template, context, level) {
      context = _.extend({}, context, {position: position});
      var face = {
      };
      face.next = function (level) {
        return next(template, context, level);
      };
      face.render = function () {
        context.bottom = context.size * level;
        context.id = face.id();
        return template(context);
      };
      face.id = function () {
        return context.position + level;
      };
      return face;
    };
  };
​
  var floor = faceMaker('floor', function (t, c, l) { return left(t, c, l) });
  var left = faceMaker('left', function (t, c, l) { return back(t, c, l) });
  var back = faceMaker('back', function (t, c, l) { return right(t, c, l) });
  var right = faceMaker('right', function (t, c, l) { return front(t, c, l) });
  var front = faceMaker('front', function (t, c, l) { return floor(t, c, l) });
​
  //--------------------------------------------------------------------------
  //
  // App
  //
  //--------------------------------------------------------------------------
  
  var tmpl = _.template($('#face').html()),
      $tower = $('#tower'),
      $cubes = $('#cubes'),
      size = 200,
      ctx = makeContext(size),
      limit = 40,
      count = 0,
      level = 0,
      levels = [[]],
      face = floor(tmpl, ctx, 0)
      maxLevels = 4;
  
  var moveTower = function () {
    var distance = size / 5;
    var css = 'translateY(' + (distance * count) + 'px)';
    $tower.css('transform', css);
  };
​
  var cleanupOldLevels = function () {
    if (levels.length > maxLevels) {
      var first = levels.shift().join(',');
      $(first).remove();
    };
  };
​
  var updateLevels = function () {
    var l = Math.floor(count / 5);
    if (l !== level) {
      level = l;
      levels.push([]);
      cleanupOldLevels();
    };
  };
​
  var appendFace = function () {
    $cubes.append(face.render());
    levels[levels.length - 1].push('#' + face.id());
    count ++;
    updateLevels();
    moveTower();
    face = face.next(level);
  };
​
  $cubes.bind('webkitAnimationEnd animationend', function () {
    appendFace();
  });
  
  appendFace();
});

文件管理点击文件查看URL

图片

暂无文件

CSS

暂无文件

JavaScript

暂无文件

其他

暂无文件

加载中 ..................

HTML

CSS

JS

图片

CSS

JavaScript

其他

画布操作

编辑器命令

HTML标签

CSS Specific

其他