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;}elseif(particleDensity >20000){ particleDensity =20000;}return$('#particle-target').particleground({ dotColor:'#1ec5ee', lineColor:'#0a4e90', density: particleDensity.toFixed(0), parallax:false});}});</script></body></html></pre>
Leave a Reply