jQuery - Logosdistort.js
Logosdistort.js là một plugin jQuery để triển khai nhanh chóng và dễ dàng hiệu ứng di chuột qua trên hình ảnh
Một ví dụ đơn giản về logodistort như được hiển thị bên dưới -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel = "stylesheet"
href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href = "assets/css/style.css" rel = "stylesheet" />
<link href = "assets/css/perspectiveRules.css" rel = "stylesheet" />
</head>
<body>
<div id = "min-max-tag"><i class = "fa fa-chevron-circle-left"></i></div>
<div id = "demo1">
<div id = "particle-target" ></div>
<img alt = "logo" src = "assets/images/logo.png" />
</div>
<script
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "assets/js/jquery.logosDistort.min.js"></script>
<script src = "assets/js/jquery.particleground.min.js"></script>
<script>
var particles = true,
particleDensity,
options = {
effectWeight: 1,
outerBuffer: 1.08,
elementDepth: 220
};
$(document).ready(function() {
$("#demo1").logosDistort(options);
if (particles) {
particleDensity = window.outerWidth * 7.5;
if (particleDensity < 13000) {
particleDensity = 13000;
} else if (particleDensity > 20000) {
particleDensity = 20000;
}
return $('#particle-target').particleground({
dotColor: '#1ec5ee',
lineColor: '#0a4e90',
density: particleDensity.toFixed(0),
parallax: false
});
}
});
</script>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bấm vào đây