基于WebGL图片变形悬停切换效果



94 372 125



特效描述:基于WebGL 图片变形悬停切换,html5基于WebGL液态图片变形悬停效果使用位移图像切换特效。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/hover.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/hover.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于WebGL的鼠标hover图像变形特效</title>
	<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
		<svg class="hidden">
			<symbol id="icon-arrow" viewBox="0 0 24 24">
				<title>arrow</title>
				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
			</symbol>
			<symbol id="icon-drop" viewBox="0 0 24 24">
				<title>drop</title>
				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
			</symbol>
			<svg id="icon-github" viewBox="0 0 33 33">
				<title>github</title>
				<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
			</svg>
		</svg>
		<main>
			<div class="message">Some message for mobile if needed.</div>
			<div class="grid">
				<div class="grid__item theme-1">
					<div class="grid__item-content">
						<h2 class="grid__item-title grid__item-title--small">Distortion Hover Effect</h2>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-2">
					<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2">
						<img src="img/Img22.jpg" alt="Image"/>
						<img src="img/Img21.jpg" alt="Image"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">California</span>
						<h2 class="grid__item-title">Jumping Around</h2>
						<h3 class="grid__item-subtitle">
							<span>California's last empty jump spots</span>
							<a class="grid__item-link" href="#">Discover more</a>
						</h3>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-3">
					<div class="grid__item-img" data-displacement="img/displacement/4.png" data-intensity="0.2" data-speedIn="1.6" data-speedOut="1.6">
						<img src="img/Img23.jpg" alt="Image"/>
						<img src="img/Img24.jpg" alt="Image"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Italy</span>
						<h2 class="grid__item-title">Calm Serenity</h2>
						<h3 class="grid__item-subtitle">
							<span>Italy's secret meadows and fields</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item theme-4">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">About</a>
							<a href="#" class="grid__item-link">Blog</a>
							<a href="#" class="grid__item-link">Membership</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Qualm Inspiration for Everybody</h2>
						<p class="grid__item-text">Muse about, something incredible is waiting to be known, courage of our questions tesseract hearts of the stars great turbulent clouds the only home.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item theme-5">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Getting there</a>
							<a href="#" class="grid__item-link">Accomodation</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Bangkok's Hidden Foodstalls</h2>
						<p class="grid__item-text">Tingling of the spine, network of wormholes preserve and cherish that pale blue dot cosmic ocean encyclopaedia galactica.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-6">
					<div class="grid__item-img" data-displacement="img/displacement/1.jpg" data-intensity="-0.4" data-speedIn="0.7" data-speedOut="0.3" data-easing="Sine.easeOut">
						<img src="img/Img1.jpg" alt="Image"/>
						<img src="img/Img13.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Sweden</span>
						<h2 class="grid__item-title">Build it forever</h2>
						<h3 class="grid__item-subtitle">
							<span>Sweden's famous furniture</span>
							<a class="grid__item-link" href="#">Discover more</a>
						</h3>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-7">
					<div class="grid__item-img" data-displacement="img/displacement/7.jpg" data-intensity="0.9" data-speedIn="0.8" data-speedOut="0.4" data-easing="Circ.easeOut">
						<img src="img/Img19.jpg" alt="Image"/>
						<img src="img/Img20.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Spain</span>
						<h2 class="grid__item-title">Water Wonders</h2>
						<h3 class="grid__item-subtitle">
							<span>Spain's amazingly colorful lakes</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item theme-8">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Morocco FAQ</a>
							<a href="#" class="grid__item-link">Insider Tips</a>
							<a href="#" class="grid__item-link">Hotels</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">The Rise of Moroccan Reggae</h2>
						<p class="grid__item-text">Concept of the number one two ghostly white figures in coveralls and helmets are soflty dancing.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item theme-9">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Uzbekistan Today</a>
							<a href="#" class="grid__item-link">History</a>
							<a href="#" class="grid__item-link">Culture</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Stories from Landlocked Lands</h2>
						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered by gravity.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-10">
					<div class="grid__item-img" data-displacement="img/displacement/10.jpg" data-intensity="0.7" data-speedIn="1" data-speedOut="0.5" data-easing="Power2.easeOut">
						<img src="img/Img2.jpg" alt="Image"/>
						<img src="img/Img3.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Germany</span>
						<h2 class="grid__item-title">Holy House</h2>
						<h3 class="grid__item-subtitle">
							<span>Germany's amazing architecture</span>
							<a class="grid__item-link" href="#">Check it out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-11">
					<div class="grid__item-img" data-displacement="img/displacement/6.jpg" data-intensity="0.6" data-speedIn="1.2" data-speedOut="0.5">
						<img src="img/Img5.jpg" alt="Image"/>
						<img src="img/Img4.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Denmark</span>
						<h2 class="grid__item-title">Future Proof</h2>
						<h3 class="grid__item-subtitle">
							<span>Building for the future</span>
							<a class="grid__item-link" href="#">Learn more</a>
						</h3>
					</div>
				</div>
				<div class="grid__item theme-12">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Wiki</a>
							<a href="#" class="grid__item-link">History</a>
							<a href="#" class="grid__item-link">Culture</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">China's Last Wild Bears</h2>
						<p class="grid__item-text">Descended from astronomers emerged into consciousness? Encyclopaedia galactica. Extraordinary claims require extraordinary.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item theme-13">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">FAQ</a>
							<a href="#" class="grid__item-link">Quiz</a>
							<a href="#" class="grid__item-link">Getting There</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Travel Tips for South Africa</h2>
						<p class="grid__item-text">Venture something incredible is waiting to be known Orion's sword white dwarf rogue tendrils of gossamer.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-14">
					<div class="grid__item-img" data-displacement="img/displacement/11.jpg" data-intensity="0.4" data-speedIn="1" data-speedOut="1">
						<img src="img/Img10.jpg" alt="Image"/>
						<img src="img/Img6.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Florida</span>
						<h2 class="grid__item-title">Cool and Fresh</h2>
						<h3 class="grid__item-subtitle">
							<span>Discover Florida's best beaches</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-15">
					<div class="grid__item-img" data-displacement="img/displacement/2.jpg" data-intensity="0.6" data-speedIn="1" data-speedOut="1">
						<img src="img/Img11.jpg" alt="Image"/>
						<img src="img/Img18.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Europe</span>
						<h2 class="grid__item-title">My Cup of Coffee</h2>
						<h3 class="grid__item-subtitle">
							<span>The best coffe houses in Europe</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item theme-16">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">About</a>
							<a href="#" class="grid__item-link">History</a>
							<a href="#" class="grid__item-link">Culture</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Cold Winters and Warm Hearts</h2>
						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item theme-17">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Getting There</a>
							<a href="#" class="grid__item-link">Festivals</a>
							<a href="#" class="grid__item-link">Trips</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">Polka Dots Everywhere</h2>
						<p class="grid__item-text">Quasar billions upon billions rich in heavy atoms the only home we've ever known Cambrian explosion cosmic fugue? Galaxies, at the edge of forever.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-18">
					<div class="grid__item-img" data-displacement="img/displacement/15.jpg" data-intensity="-0.1" data-speedIn="0.4" data-speedOut="0.4" data-easing="power2.easeInOut">
						<img src="img/Img7.jpg" alt="Image"/>
						<img src="img/Img14.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Bulgaria</span>
						<h2 class="grid__item-title">Doors and Rooftops</h2>
						<h3 class="grid__item-subtitle">
							<span>Experience fantastic buildings</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-19">
					<div class="grid__item-img" data-displacement="img/displacement/13.jpg" data-intensity="0.2">
						<img src="img/Img8.jpg" alt="Image"/>
						<img src="img/Img15.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">France</span>
						<h2 class="grid__item-title">French Geometry</h2>
						<h3 class="grid__item-subtitle">
							<span>France's geometric wonders</span>
							<a class="grid__item-link" href="#">Check them out</a>
						</h3>
					</div>
				</div>
				<div class="grid__item theme-20">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Wiki</a>
							<a href="#" class="grid__item-link">History</a>
							<a href="#" class="grid__item-link">Culture</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">What Rudolf Steiner Envisioned</h2>
						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item theme-21">
					<div class="grid__item-content">
						<nav class="grid__item-nav">
							<a href="#" class="grid__item-link">Travel Guide</a>
							<a href="#" class="grid__item-link">Tips</a>
							<a href="#" class="grid__item-link">Flights</a>
						</nav>
						<h2 class="grid__item-title grid__item-title--small">More on Dracula's Heritage</h2>
						<p class="grid__item-text">Emerged into consciousness extraplanetary, a still more glorious dawn awaits, Orion's sword network of wormholes vanquish the impossible the sky.</p>
						<a href="#" class="grid__item-link">Read more</a>
					</div>
				</div>
				<div class="grid__item grid__item--bg theme-22">
					<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.8">
						<img src="img/Img26.jpg" alt="Image"/>
						<img src="img/Img25.jpg" alt="Image Alt"/>
					</div>
					<div class="grid__item-content">
						<span class="grid__item-meta">Dublin</span>
						<h2 class="grid__item-title">Facades and Bikes</h2>
						<h3 class="grid__item-subtitle">
							<span>The parking habits of the Irish</span>
							<a class="grid__item-link" href="#">Read more</a>
						</h3>
					</div>
				</div>
			</div>
		</main>
		<script>
			imagesLoaded( document.querySelectorAll('img'), () => {
				document.body.classList.remove('loading');
			});
			Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
				const imgs = Array.from(el.querySelectorAll('img'));
				new hoverEffect({
					parent: el,
					intensity: el.dataset.intensity || undefined,
					speedIn: el.dataset.speedin || undefined,
					speedOut: el.dataset.speedout || undefined,
					easing: el.dataset.easing || undefined,
					hover: el.dataset.hover || undefined,
					image1: imgs[0].getAttribute('src'),
					image2: imgs[1].getAttribute('src'),
					displacementImage: el.dataset.displacement
				});
			});
		</script>
</body>		
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 全屏焦点图 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 其他 图片全屏 图片切换 图片选项卡 图标选项卡 震动 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到