Jquery Waterpipe Background Example

Dec 01, 2020

.

Admin

Jquery Waterpipe Background Example

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...

#Css

#Html

#Jquery