https://qandsinc.com/jquery/jquery-sway.js

1loadtree('/images/02/index/img-aboutBg.png');
2
3function loadtree(imglink){
4	var canvas = document.getElementById('treeCanvas')
5	var ctx = canvas.getContext('2d')
6
7	var img_max_width = 600
8	var img_max_height = 600
9	var imgWidth, imgHeight
10
11	var image = new Image()
12	image.src = imglink
13
14	var amplitude = 10  // 震幅
15	var period = .5  // 週期數
16	var frequency = .3  // 頻率
17	var wavelength // 波長
18	var v // 波速
19	var cftX // x係數
20	var cftA // 震幅係數
21
22	image.onload = function (ev){
23		imgWidth = Math.floor(image.width)
24		imgHeight = Math.floor(image.height)
25
26		var canvas = document.getElementById('treeCanvas')
27		var scale = 1
28		if(imgWidth > img_max_width){
29			scale = img_max_width / imgWidth
30		}
31		if(imgHeight > img_max_height){
32			scale = scale * img_max_height / imgHeight
33		}
34
35		canvasWidth = imgWidth
36		canvasHeight = imgHeight + amplitude * 2
37		canvas.width = canvasWidth
38		canvas.height = canvasHeight
39		canvas.style.transform = 'translate3d(-50%,-50%,0) scale(' + scale + ')'
40
41		wavelength = imgWidth / period
42		cftX = 2 * Math.PI / wavelength
43		cftA = amplitude / imgWidth
44		v = wavelength * frequency
45
46		tick()
47	}
48
49	var fps = 60  // 每秒幀數
50	var interval = 1000 / fps  // 連續幀之間間隔 (理論)
51	var stop = false  // 停止動畫
52	var timeNow = Date.now()  // 當前時間
53	var timeLast = timeNow  // 上一幀時間
54	var delta = 0  // 連續幀之間間隔（實際）
55	var y = 0
56	var lastY = 0
57	var distance = 0
58	var tick = function(){
59		if(stop) return false
60		timeNow = Date.now()
61		delta = timeNow - timeLast
62		if(delta > interval){
63			timeLast = timeNow
64			distance += (delta / 1000 * v)
65			ctx.clearRect(0, 0, canvasWidth, canvasHeight)
66			for(var x = 0; x < imgWidth; x++){
67				y = cftA * x * Math.sin(cftX * (x - distance)) + amplitude
68				ctx.drawImage(image, x, 0, 1, imgHeight, x, y, 1, imgHeight)
69				ctx.fillStyle = 'rgba(255,255,255,' + (x === 0 ? 0 : (y - lastY) * 0.5) + ')'
70				ctx.fillRect(x, y, 1, imgHeight)
71				lastY = y
72			}
73		}
74		requestAnimationFrame(tick)
75	}
76}