Jquery Waterpipe Background Example

Admin   HTML5 - CSS   111  2021-03-12 22:20:08

Hi Guys,

Today,I will learn you how add jquery waterpipe background.we will show example of jquery waterpipe background example.you can easyliy create Waterpipe Background using Waterpipe.js.

Here, I will give you full example for simply display on Waterpipe Background using waterpipe.js as bellow.

Example

 

<!DOCTYPE html>

<html>

<head>

<title>Jquery Waterpipe Background Example</title>

<style>

#bg-wrapper{

width: 100%;

height: 600px;

}

</style>

</head>

<body>

<div id="bg-wrapper">

<canvas></canvas>

</div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>

<script src="https://dragdropsite.github.io/waterpipe.js/waterpipe.js"></script>

<script>

var smokyBG = $('#bg-wrapper').waterpipe({

gradientStart: '#000000',

gradientEnd: '#222222',

smokeOpacity: 0.1,

numCircles: 1,

maxMaxRad: 'auto',

minMaxRad: 'auto',

minRadFactor: 0,

iterations: 10,

drawsPerFrame: 7,

lineWidth: 2,

speed: 0,

bgColorInner: "#ffb606",

bgColorOuter: "#666666"

});

</script>

</html>

Demo

Show

It will help you...