Shulou(Shulou.com)06/01 Report--

This article "html5 how to make animation dynamic background picture" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "html5 how to make animation dynamic background picture" article.

Effect:

Body {

Margin: 0px

Height:100%

Width:100%

Background-image: url ("bg.png")

Background-position-x: 0px

Background-position-y: 0px

Background-repeat: repeat

}

Polling changes the body background map animation so that the world map is translated forward as the background.

Var body = $('body')

Var x = 0

Function polling () {

X + = 5

Body.animate ({

'background-position-x': xanthates%'

}, 400, 'linear')

SetTimeout (polling,300)

}

Polling ()

Effect two:

! [picture description] [2]

After the mouse is moved, the background map calculates the moving distance according to the coordinate difference.

Var last = null

Var body = $('body')

$(document) .mousemove (function (event) {

If (last = = null) {

Last = {

X: event.pageX

Y: event.pageY

}

Return

} else {

Offset = {

X: event.pageX-last.x

Y: event.pageY-last.y

}

Var top = parseInt (body.css ('background-position-y'))-offset.y

Var max = screen.availHeight-1024

If (max > = 0) max = 0

If (top > 0) top = 0

If (top < max) top = max

Body.css ({

"background-position-x": (parseInt (body.css ('background-position-x'))-offset.x) +' px'

"background-position-y": top+'px'

})

Last.x = event.pageX

Last.y = event.pageY

}

})

The above is about "html5 how to make animation dynamic background pictures" the content of this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.