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 = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.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>
Leave a Reply