PATH:
home
/
lab2454c
/
mact34.com
/
wp-content
/
plugins
/
bdthemes-element-pack
/
assets
/
vendor
/
js
/* * Wavify * JavaScript library to make some nice waves * by peacepostman @ potion */ function wavify(wave_element, options) { if ("undefined" === typeof options) options = {}; // Options // // var settings = Object.assign( {}, { container: options.container ? options.container : "body", // Height of wave height: 200, // Amplitude of wave amplitude: 100, // Animation speed speed: 0.15, // Total number of articulation in wave bones: 3, // Color color: "rgba(255,255,255, 0.20)" }, options ); var wave = wave_element, width = document.querySelector(settings.container).getBoundingClientRect() .width, height = document.querySelector(settings.container).getBoundingClientRect() .height, points = [], lastUpdate, totalTime = 0, animationInstance = false, tweenMaxInstance = false; // Allow new settings, avoid setting new container for logic purpose please :) // function rebuilSettings(params) { settings = Object.assign({}, settings, params); } function drawPoints(factor) { var points = []; for (var i = 0; i <= settings.bones; i++) { var x = (i / settings.bones) * width; var sinSeed = (factor + (i + (i % settings.bones))) * settings.speed * 100; var sinHeight = Math.sin(sinSeed / 100) * settings.amplitude; var yPos = Math.sin(sinSeed / 100) * sinHeight + settings.height; points.push({ x: x, y: yPos }); } return points; } function drawPath(points) { var SVGString = "M " + points[0].x + " " + points[0].y; var cp0 = { x: (points[1].x - points[0].x) / 2, y: points[1].y - points[0].y + points[0].y + (points[1].y - points[0].y) }; SVGString += " C " + cp0.x + " " + cp0.y + " " + cp0.x + " " + cp0.y + " " + points[1].x + " " + points[1].y; var prevCp = cp0; var inverted = -1; for (var i = 1; i < points.length - 1; i++) { var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y); var cp1 = { x: points[i].x - prevCp.x + points[i].x, y: points[i].y - prevCp.y + points[i].y }; SVGString += " C " + cp1.x + " " + cp1.y + " " + cp1.x + " " + cp1.y + " " + points[i + 1].x + " " + points[i + 1].y; prevCp = cp1; inverted = -inverted; } SVGString += " L " + width + " " + height; SVGString += " L 0 " + height + " Z"; return SVGString; } // Draw function // // function draw() { var now = window.Date.now(); if (lastUpdate) { var elapsed = (now - lastUpdate) / 1000; lastUpdate = now; totalTime += elapsed; var factor = totalTime * Math.PI; tweenMaxInstance = TweenMax.to(wave, settings.speed, { attr: { d: drawPath(drawPoints(factor)) }, ease: Power1.easeInOut }); } else { lastUpdate = now; } animationInstance = requestAnimationFrame(draw); } // Pure js debounce function to optimize resize method // // function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; } // Redraw for resize with debounce // var redraw = debounce(function() { pause(); points = []; totalTime = 0; width = document.querySelector(settings.container).getBoundingClientRect() .width; height = document.querySelector(settings.container).getBoundingClientRect() .height; lastUpdate = false; play(); }, 250); function boot() { if (!animationInstance) { tweenMaxInstance = TweenMax.set(wave, { attr: { fill: settings.color } }); play(); window.addEventListener("resize", redraw); } } function reboot(options) { kill(); if (typeof options !== undefined) { rebuilSettings(options); } tweenMaxInstance = TweenMax.set(wave, { attr: { fill: settings.color } }); play(); window.addEventListener("resize", redraw); } function play() { if (!animationInstance) { animationInstance = requestAnimationFrame(draw); } } function pause() { if (animationInstance) { cancelAnimationFrame(animationInstance); animationInstance = false; } } function updateColor(options) { if (typeof options.timing === undefined) { options.timing = 1; } if (typeof options.color === undefined) { options.color = settings.color; } tweenMaxInstance = TweenMax.to(wave, parseInt(options.timing), { attr: { fill: options.color }, onComplete: function() { if ( typeof options.onComplete !== undefined && {}.toString.call(options.onComplete) === "[object Function]" ) { options.onComplete(); } } }); } function kill() { if (animationInstance) { pause(); tweenMaxInstance.kill(); tweenMaxInstance = TweenMax.set(wave, { x: 0, y: 0, rotation: 0, opacity: 0, clearProps: "all", attr: { d: "M0,0", fill: "" } }); window.removeEventListener("resize", redraw); animationInstance = false; } } // Boot Wavify // boot(); return { reboot: reboot, play: play, pause: pause, kill: kill, updateColor: updateColor }; }
[-] SplitText.js
[edit]
[-] awesomeCloud.min.js
[edit]
[-] prism.min.js
[edit]
[-] jquery.progressScroll.js
[edit]
[-] jquery.mThumbnailScroller.min.js
[edit]
[-] parallax.js
[edit]
[-] chart.min.js
[edit]
[-] typed.min.js
[edit]
[-] jquery.appear.min.js
[edit]
[-] lottie.d.ts
[edit]
[-] jquery.imagezoom.js
[edit]
[-] jquery.tagcanvas.min.js
[edit]
[-] prism.js
[edit]
[-] metisMenu.js
[edit]
[-] lottie.js
[edit]
[-] jquery.honeycombs.js
[edit]
[-] sidetabs.js
[edit]
[-] timeline.min.js
[edit]
[-] datatables.min.js
[edit]
[-] datatables.uikit.js
[edit]
[-] jquery.appear.js
[edit]
[+]
..
[-] popper.js
[edit]
[-] jquery.jplayer.js
[edit]
[-] image-compare-viewer.min.js
[edit]
[-] calendly.js
[edit]
[-] tilt.jquery.js
[edit]
[-] particles.min.js
[edit]
[-] jquery.progressHorizontal.min.js
[edit]
[-] timeline.js
[edit]
[-] jQuery.circleMenu.min.js
[edit]
[-] tippy.all.min.js
[edit]
[-] calendly.min.js
[edit]
[-] jquery.jplayer.min.js
[edit]
[-] jquery.newsTicker.min.js
[edit]
[-] darkmode.min.js
[edit]
[-] goodshare.min.js
[edit]
[-] SplitText.min.js
[edit]
[-] jquery.newsTicker.js
[edit]
[-] jquery.flatWeatherPlugin.min.js
[edit]
[-] rvslider.min.js
[edit]
[-] gmap.min.js
[edit]
[-] jquery.jclock.min.js
[edit]
[-] chart.js
[edit]
[-] jquery.mousewheel.js
[edit]
[-] vanilla-tilt.js
[edit]
[-] search.min.js
[edit]
[-] jquery.justifiedGallery.min.js
[edit]
[-] pageable.min.js
[edit]
[-] particles.js
[edit]
[-] jquery.imagezoom.min.js
[edit]
[-] jquery.mousewheel.min.js
[edit]
[-] gmap.js
[edit]
[-] news-ticker.min.js
[edit]
[-] datatables.uikit.min.js
[edit]
[-] tippy.all.js
[edit]
[-] gsap.js
[edit]
[-] table-of-content.min.js
[edit]
[-] gsap.min.js
[edit]
[-] metisMenu.min.js
[edit]
[-] wavify.min.js
[edit]
[-] jquery.progressScroll.min.js
[edit]
[-] morphext.min.js
[edit]
[-] darkmode.js
[edit]
[-] gridtab.min.js
[edit]
[-] morphext.js
[edit]
[-] image-compare-viewer.js
[edit]
[-] parallax.min.js
[edit]
[-] search.js
[edit]
[-] sidetabs.min.js
[edit]
[-] recliner.js
[edit]
[-] countUp.js
[edit]
[-] clipboard.js
[edit]
[-] jquery-asPieProgress.min.js
[edit]
[-] wavify.js
[edit]
[-] recliner.min.js
[edit]
[-] jquery.jclock.js
[edit]
[-] pageable.js
[edit]
[-] jquery.tagcanvas.js
[edit]
[-] gridtab.js
[edit]
[-] jquery-qrcode.js
[edit]
[-] countUp.min.js
[edit]
[-] awesomeCloud.js
[edit]
[-] jquery-asPieProgress.js
[edit]
[-] lottie.min.js
[edit]
[-] moment-timezone-with-data.min.js
[edit]
[-] jquery.justifiedGallery.js
[edit]
[-] datatables.js
[edit]
[-] rvslider.js
[edit]
[-] jquery.flatWeatherPlugin.js
[edit]
[-] moment.min.js
[edit]
[-] jquery.honeycombs.min.js
[edit]
[-] table-of-content.js
[edit]
[-] goodshare.js
[edit]
[-] leaflet.js
[edit]
[-] cookieconsent.min.js
[edit]
[-] moment-timezone-with-data.js
[edit]
[-] jQuery.circleMenu.js
[edit]
[-] leaflet.min.js
[edit]
[-] vanilla-tilt.min.js
[edit]
[-] floating-video.min.js
[edit]
[-] typed.js
[edit]
[-] popper.min.js
[edit]
[-] spritespin.js
[edit]
[-] jquery.progressHorizontal.js
[edit]
[-] floating-video.js
[edit]
[-] jquery.mThumbnailScroller.js
[edit]
[-] moment.js
[edit]
[-] spritespin.min.js
[edit]
[-] tilt.jquery.min.js
[edit]
[-] jquery-qrcode.min.js
[edit]
[-] cookieconsent.js
[edit]