11-Apr-2023
.
Admin
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
It will help you...
#Css
#Html
#Jquery
