https://dangelo.al/vendors/jquery.wavify.js

1/*
2*   Wavify
3*   Jquery Plugin to make some nice waves
4*   by peacepostman @ crezeo
5 */
6(function ( $ ) {
7
8    $.fn.wavify = function( options ) {
9
10        //  Options
11        //
12        //
13        var settings = $.extend({
14            container: options.container ? options.container : 'body',
15            // Height of wave
16            height: 200,
17            // Amplitude of wave
18            amplitude: 100,
19            // Animation speed
20            speed: .15,
21            // Total number of articulation in wave
22            bones: 3,
23            // Color
24            color: 'rgba(255,255,255, 0.20)'
25        }, options );
26
27        var wave = this,
28            width = $(settings.container).width(),
29            height = $(settings.container).height(),
30            points = [],
31            lastUpdate,
32            totalTime = 0;
33
34        //  Set color
35        //
36        TweenLite.set(wave, {attr:{fill: settings.color}});
37
38
39        function drawPoints(factor) {
40            var points = [];
41
42            for (var i = 0; i <= settings.bones; i++) {
43                var x = i/settings.bones * width;
44                var sinSeed = (factor + (i + i % settings.bones)) * settings.speed * 100;
45                var sinHeight = Math.sin(sinSeed / 100) * settings.amplitude;
46                var yPos = Math.sin(sinSeed / 100) * sinHeight  + settings.height;
47                points.push({x: x, y: yPos});
48            }
49
50            return points;
51        }
52
53        function drawPath(points) {
54            var SVGString = 'M ' + points[0].x + ' ' + points[0].y;
55
56            var cp0 = {
57                x: (points[1].x - points[0].x) / 2,
58                y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
59            };
60
61            SVGString += ' C ' + cp0.x + ' ' + cp0.y + ' ' + cp0.x + ' ' + cp0.y + ' ' + points[1].x + ' ' + points[1].y;
62
63            var prevCp = cp0;
64            var inverted = -1;
65
66            for (var i = 1; i < points.length-1; i++) {
67                var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
68                var cp1 = {
69                    x: (points[i].x - prevCp.x) + points[i].x,
70                    y: (points[i].y - prevCp.y) + points[i].y
71                };
72
73                SVGString += ' C ' + cp1.x + ' ' + cp1.y + ' ' + cp1.x + ' ' + cp1.y + ' ' + points[i+1].x + ' ' + points[i+1].y;
74                prevCp = cp1;
75                inverted = -inverted;
76            }
77
78            SVGString += ' L ' + width + ' ' + height;
79            SVGString += ' L 0 ' + height + ' Z';
80            return SVGString;
81        }
82
83        //  Draw function
84        //
85        //
86        function draw() {
87            var now = window.Date.now();
88
89            if (lastUpdate) {
90                var elapsed = (now-lastUpdate) / 1000;
91                lastUpdate = now;
92
93                totalTime += elapsed;
94
95                var factor = totalTime*Math.PI;
96                TweenMax.to(wave, settings.speed, {
97                    attr:{
98                        d: drawPath(drawPoints(factor))
99                    },
100                    ease: Power1.easeInOut
101                });
102
103            } else {
104                lastUpdate = now;
105            }
106
107            requestAnimationFrame(draw);
108        }
109
110        //  Pure js debounce function to optimize resize method
111        //
112        //
113        function debounce(func, wait, immediate) {
114            var timeout;
115            return function() {
116                var context = this, args = arguments;
117                clearTimeout(timeout);
118                timeout = setTimeout(function() {
119                    timeout = null;
120                    if (!immediate) func.apply(context, args);
121                }, wait);
122                if (immediate && !timeout) func.apply(context, args);
123            };
124        }
125
126        //  Redraw for resize with debounce
127        //
128        var redraw = debounce(function() {
129            wave.attr('d', '');
130            points = [];
131            totalTime = 0;
132            width = $(settings.container).width();
133            height = $(settings.container).height();
134            lastUpdate = false;

135            setTimeout(function(){
136                draw();
137            }, 50);
138        }, 250);
139        $(window).on('resize', redraw);
140
141
142        //  Execute
143        //
144        return draw();
145
146    };
147
148}(jQuery));