Liquid Distortion Image Hover Effect using Three.js gsap.js

This tutorial blog to learn how to create Liquid Distortion effect on image hover using three.js, gsap.js with hoverEffect.js plugin. given below the hover effect plugin link.

Video tutorial of Liquid Distortion Image Hover Effect using Three.js and gsap.js

This tutorial video to learn how to create Liquid Distortion effect on image hover using three.js, gsap.js with hoverEffect.js plugin. given below the hover effect plugin link.

Video tutorial of Liquid Distortion Image Hover Effect using Three.js and gsap.js [Source Codes]

This source code can help you to create Video tutorial of Liquid Distortion Image Hover Effect using Three.js and gsap.js

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="img_box" displacementImage="images/7.jpg">
		<img src="images/pic1.jpg">
		<img src="images/pic2.jpg">
	</div>
	<div class="img_box" displacementImage="images/10.jpg">
		<img src="images/pic3.jpg">
		<img src="images/pic4.jpg">
	</div>
</div>

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.js"></script>
<script type="text/javascript" src="js/hover-effect.umd.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	min-height: 100vh;
	background:#00012f;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: space-around;
}


.container{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.img_box{
	flex:0 0 45%;
	height: 400px;
	position: relative;
}
.img_box img{
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
}
.img_box img:nth-child(2) {
	opacity: 0;
	transition: all 0.3s ease-in-out;
}
.img_box:hover img:nth-child(2) {
	opacity: 1;
}

JavaScript Code

Copy

$('.img_box').each(function() {
	var imgBox = $(this)
	var images = $(this).children('img');
	
	var myAnimation = new hoverEffect({
        parent: imgBox[0],
        intensity: 1,
    	angle:Math.PI / 8,
        image1: images[0].getAttribute('src'),
		image2: images[1].getAttribute('src'),
        displacementImage: imgBox[0].getAttribute('displacementImage')
    });
    
});

Liquid Distortion Image Hover Effect using Three.js gsap.js

Video tutorial of Liquid Distortion Image Hover Effect using Three.js and gsap.js

Video tutorial of Liquid Distortion Image Hover Effect using Three.js and gsap.js [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery