Учебники

jQuery — Logosdistort.js

Ноябрь 20, 2018

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>

Это должно привести к следующему результату —

44
Share: