Skip to content

All topics  /  jQuery

Jquery Waterpipe Background Example

jQuery ·

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

See the example in this tutorial.

It will help you...

More on this topic