ripple-hover-effect
Version:
Javascript library to animate images on hover.
146 lines (129 loc) • 3.15 kB
HTML
<html>
<head>
<meta charset=utf-8>
<title>Ripple Demo</title>
<link rel="stylesheet" href="./example/css/easy.css">
<style>
body {
background: #080808;
color: white;
padding-bottom: 40px;
}
.demo {
width: 45vw;
height: 75vh;
margin: 10px auto;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.div5 {
width: 80vw;
height: 80vh;
}
.controls{
text-align: center;
}
.control {
margin: 0px 20px;
cursor: pointer;
}
.demo-normal h1{
padding: 35px 25px 0 25px;
}
.demo-btn{
margin: 50px 25px 0 25px;
padding-top: 50px;
border-top: 5px dotted var(--primary);
}
h1{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="demo-normal">
<h1>Basic Usage</h1>
<div class="flex flex_center flex_between">
<div class='div1 demo'></div>
<div class='div2 demo'></div>
</div>
<div class="flex flex_center flex_between">
<div class='div3 demo'></div>
<div class='div4 demo'></div>
</div>
<div class="flex flex_center flex_between">
<div class='div6 demo'></div>
<div class='div7 demo'></div>
</div>
</div>
<div class="demo-btn">
<h1>Using Start/Stop</h1>
<div class="balloon-ctr">
<div class='div5 demo'></div>
<div class="controls">
<button class="start control btn btn_primary">Start</span>
<button class="stop control btn btn_outline_primary">Stop</span>
</div>
</div>
</div>
<script src="example/js/three.min.js"></script>
<script src="example/js/gsap.min.js"></script>
<script src="src/ripple-effect.min.js"></script>
<script>
var button = new RippleEffect({
parent: document.querySelector('.div1'),
texture: './imgs/art-01.jpg',
speedIn: 2,
speedOut: 1.5,
});
var button2 = new RippleEffect({
parent: document.querySelector('.div2'),
texture: './imgs/art-02.jpg',
intensity: 2,
strength: 3,
area: 8,
waveSpeed: 0.008,
});
var button3 = new RippleEffect({
parent: document.querySelector('.div3'),
texture: './imgs/art-03.jpg',
intensity: 2,
strength: 4,
area: 10,
waveSpeed: 0.01,
speedIn: 2,
speedOut: 1,
});
var button3 = new RippleEffect({
parent: document.querySelector('.div7'),
texture: './imgs/art-04.jpg',
intensity: 1,
strength: 1,
area: 2,
waveSpeed: 0.01,
speedIn: 2,
speedOut: 1,
});
var button4 = new RippleEffect({
parent: document.querySelector('.div4'),
texture: './imgs/nature-01.jpg',
});
var button5 = new RippleEffect({
parent: document.querySelector('.div5'),
texture: './imgs/control.jpg',
intensity: 1.2,
strength: .5,
waveSpeed: 0.008,
hover: false
});
document.querySelector('.start').addEventListener('click', button5.start);
document.querySelector('.stop').addEventListener('click', button5.stop);
var button6 = new RippleEffect({
parent: document.querySelector('.div6'),
texture: './imgs/nature-02.jpg',
});
</script>
</body>
</html>