jQuery - Logosdistort.js
Logosdistort.js เป็นปลั๊กอิน jQuery สำหรับการนำเมาส์ไปใช้เอฟเฟกต์บนรูปภาพอย่างรวดเร็วและง่ายดาย
ตัวอย่างง่ายๆของ logosdistort ดังแสดงด้านล่าง -
<!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>สิ่งนี้ควรให้ผลลัพธ์ดังต่อไปนี้ -
คลิกที่นี่