【jQuery】画像にグリッチエフェクトを実装。glitch effect

jQuery

February 12, 2018

glitch effectは画像にグリッチエフェクトを実装したjQueryプラグイン。

glitch effect

HTML

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{padding:0;margin:0;}
	#container{
		width:500px;
		height:250px;
		position: absolute;
		top:100px;
		left:200px;
		overflow: hidden;
		background: red;
	}
	.glitch{
		width:500px;
		height:250px;
		position: absolute;
	}
	img{
		position: absolute;
	}
	span{
		position: absolute;
		top:0;left:0;right:0;bottom:0;
		margin:auto;
		font-size: 40px;
		color:white;
		z-index: 10;
		line-height: 100px;
		text-align: center;
		width:300px;
		height: 100px;
	}
</style>
<script src='./jquery-3.1.1.min.js'></script>
<script src='./glitch-effect.js'></script>
</head>
<body>
	<div id='container'>
		<div class="glitch">
			<span>glitch effect</span>
			<img src="./img.jpg" alt="">	
		</div>
	</div>
</body>
</html>
<script>
	$('.glitch').glitch({
		zIndexDefault:3,
		effect1TimeMin:100,
		effect1TimeMax:300,
		effect2TimeMin :50,
		effect2TimeMax :600,
	});
</script>

Latest Posts

Related Posts