html5轮滑效果,HTML5反重力动画特效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

class Polygon{

constructor(svg, coordinates, friction){

this.svg = svg

this.steps = ($(window).height())/2

this.item = null

this.friction = friction

this.coordinates = coordinates

this.position = this.coordinates.y

this.dimensions = this.render()

this.move()

this.rotation = Math.random() > 0.5 ? "-" : "+"

this.scale = 0.5 + Math.random()

this.siner = 200 * Math.random()

}

destroy(){

this.item.remove()

}

move(){

this.position = this.position - this.friction

let top = this.position;

let left = this.coordinates.x + Math.sin(this.position*Math.PI/this.steps) * this.siner;

this.item.css({

transform: "translateX("+left+"px) translateY("+top+"px) scale(" + this.scale + ") rotate("+(this.rotation)+(this.position + this.dimensions.height)+"deg)"

})

if(this.position < -(this.dimensions.height)){

this.destroy()

}else{

requestAnimationFrame(this.move.bind(this))

}

}

render(){

this.item = $(this.svg, {

css: {

transform: "translateX("+this.coordinates.x+"px) translateY("+this.coordinates.y+"px)"

}

})

$("body").append(this.item)

return {

width: this.item.width(),

height: this.item.height()

}

}

}

const rhombus = ''

const pentahedron = ''

const x = ''

const circle = ''

const point = ''

function randomInt(min,max){

return Math.floor(Math.random()*(max-min+1)+min);

}

const data = [point, rhombus, pentahedron, circle, x]

setInterval(function(){

new Polygon(data[randomInt(0,data.length-1)], {

"x": (Math.random() * $(window).width()),

"y": $(window).height()

}, (1 + Math.random() * 3) )

}, 200)