jQuery - Logosdistort.js

Logosdistort.js is a jQuery plugin for quickly and easily implementing of mouse over effect on images

A Simple of logosdistort example as shown below

<!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 = "http://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>