Jquery Waterpipe Background Example

Css , Html , Jquery

Nicesnippets

413

01-12-2020


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


Recommended Posts