html5 waterpipe.js煙霧背景圖片生成器下載



81 322 108



特效描述:html5 waterpipe.js 煙霧背景圖片 生成器下載,waterpipe.js是一個創建煙霧彌漫的背景,有多種效果可選擇,自定義參數效果還是挺酷的哦!

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/colpick.css">
<link rel="stylesheet" href="css/jquery.nouislider.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="lib/modernizr-2.7.2.js"></script>
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/colpick.js"></script>
<script src="lib/jquery.nouislider.min.js"></script>
<script src="lib/jquery.nicescroll.min.js"></script>
<script src="lib/builder_scripts.js"></script>
<script src="waterpipe.js"></script>

3. HTML代碼

<div id="wavybg-wrapper" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>
<div class="sidebar-wrapper">
	<div class="intro">
		<h1>waterpipe.js</h1>
		<div class="created-by">by  dragdropsite.com </div>
	</div>
	<div style="clear:both"></div>
	<div class="generator-form-wrap">
		<form class="generator-params">
			<h2>Smoke style</h2>
			<div class="input-group">
				<label for="gradientStart">Gradient start:</label>
				<input type="text" id="gradientStart" name="gradientStart" value="#000000" class="color-picker gradient-start"></input>
			</div>
			<div class="input-group">
				<label for="gradientEnd">Gradient end:</label>
				<input type="text" id="gradientEnd" name="gradientEnd" class="color-picker gradient-end" value="#222222"></input>
			</div>
			<div class="input-group">
				<label for="smokeOpacity">Opacity: <span class="value">10%</span></label>
				<div class="smokeOpacity-slider"></div>
				<input type="hidden" id="smokeOpacity" name="smokeOpacity" value="10" class="slider"></input>
			</div>
			<div class="input-group">
				<label for="radiusSize">Smoke size: <span class="value">100%</span></label>
				<div class="radiusSize-slider"></div>
				<input type="hidden" id="radiusSize" name="radiusSize" value="100" class=""></input>
			</div>
			<div class="input-group">
				<label for="lineWidth">Line width: <span class="value">2px</span></label>
				<div class="lineWidth-slider"></div>
				<input type="hidden" id="lineWidth" name="lineWidth" value="2" class=""></input>
			</div>
			<div class="input-group">
				<label for="numCircles">Smokes #: <span class="value">1</span></label>
				<div class="numCircles-slider"></div>
				<input type="hidden" id="numCircles" name="numCircles" value="1" class=""></input>
			</div>
			<h2>Background style</h2>
			<div class="input-group">
				<label for="bgColorOuter">Outer color:</label>
				<input type="text" id="bgColorOuter" name="bgColorOuter" class="color-picker color-outer" value="#666666"></input>
			</div>
			<div class="input-group">
				<label for="bgColorInner">Inner color:</label>
				<input type="text" id="bgColorInner" name="bgColorInner" class="color-picker color-inner" value="#ffffff"></input>
			</div>
			<h2>Download size</h2>
			<div class="input-group">
				<label for="downloadWidth">Width (px):</label>
				<input type="text" id="downloadWidth" name="downloadWidth"></input>
			</div>
			<div class="input-group">
				<label for="downloadHeight">Height (px):</label>
				<input type="text" id="downloadHeight" name="downloadHeight"></input>
			</div>
			<h2 id="samples-section">Samples (click to generate)</h2>
			<div class="input-group samples">
				<a href="#" class="sample-smoke" data-id="0"><img src="img/samples/small/sample-1.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="1"><img src="img/samples/small/sample-2.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="2"><img src="img/samples/small/sample-3.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="3"><img src="img/samples/small/sample-4.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="4"><img src="img/samples/small/sample-5.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="5"><img src="img/samples/small/sample-6.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="6"><img src="img/samples/small/sample-7.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="7"><img src="img/samples/small/sample-8.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="8"><img src="img/samples/small/sample-9.jpg" alt=""</a>
				<a href="#" class="sample-smoke" data-id="9"><img src="img/samples/small/sample-10.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="10"><img src="img/samples/small/sample-11.jpg" alt=""></a>
				<a href="#" class="sample-smoke" data-id="11"><img src="img/samples/small/sample-12.jpg" alt=""></a>
			</div>
		</form>
	</div>
	<div style="clear:both"></div>
	<div class="buttons-wrap">
		<div class="btn btn-grey btn-samples">Samples</div>
		<div class="btn btn-grey btn-generate">Generate</div>
		<div class="btn btn-grey btn-download">Download</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 顏色選擇 顏色選擇器 編輯器
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子