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