html斜正方形,HTML5 平行交叉斜方格

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

var defile = new Defile();

defile.init();

});

var Defile = function() {

this.$container = $('#container');

this.colors = ['#00698B', '#0099CB', '#00394B', '#00A3D8', '#0086B1'];

this.lastColor = '';

this.nbLines = 10;

this.nbElements = 8;

this.minDuration = 2;

this.maxDuration = 4;

this.maxDelay = 2;

}

Defile.prototype = {

init: function() {

for (i = 0; i < this.nbLines; i += 1) {

this.createLine(i);

}

},

getRandomColor: function() {

color = this.colors[Math.floor(Math.random() * this.colors.length)];

while (color == this.lastColor) {

color = this.colors[Math.floor(Math.random() * this.colors.length)];

}

this.lastColor = color;

return color;

},

createLine: function(index) {

var $line = $('

class: 'line'

}).css({

height: 100 / this.nbLines + '%'

});

var animationDirection = 'normal';

var animationDelay = (Math.round((Math.random() * this.maxDelay) * 100) / 100);

var animationDuration = (Math.round((Math.random() * (this.maxDuration - this.minDuration) + this.minDuration) * 100) / 100) * 2;

var animationDelayBis = animationDelay + (animationDuration / 2);

if (index % 2 == 0) {

$line.addClass('odd');

animationDirection = 'reverse';

}

$halfLineOne = this.createHalfLine(animationDelayBis, animationDuration, animationDirection);

$halfLineTwo = this.createHalfLine(animationDelay, animationDuration, animationDirection);

$line.append($halfLineOne, $halfLineTwo);

this.$container.append($line);

},

fillLine: function($halfLine) {

for (j = 0; j < this.nbElements; j++) {

this.createElement().appendTo($halfLine);

}

},

createHalfLine: function(delay, duration, direction) {

var style = {

'animation-delay': delay + 's',

'animation-duration': duration + 's',

'animation-direction': direction

}

var $halfLine = $('

class: 'half-line'

}).css(style);

this.fillLine($halfLine);

return $halfLine;

},

createElement: function() {

var style = {

'background-color': this.getRandomColor(),

'width': 100 / this.nbElements + '%'

}

$element = $('

class: 'element'

}).css(style);

return $element;

}

}