jQuery |徽标扭曲插件

jQuery 提供了LogosDistort插件，它有助于在用户浏览器中为 3D 场景创建或动画视差环境。它使用整页 matrix3D 透视徽标失真来根据鼠标移动进行转换。

您必须在工作文件夹中下载所需的文件，以便程序员可以将其包含在 HTML 结构页面的头部部分，如在以下程序中实现的那样。
下载链接： https://github.com/hellsan631/LogosDistort

示例 1：以下示例显示了插件的基本 logosDistort() 方法。

    jQuery Logos Distortion Plugin
    
    
    
      
    
    
    
    


  body{
    text-align:center;
    font-family:sans-serif;
    font-size:12px;
  }


  GeeksForGeeks
  jQuery Logos Distortion Plugin 
  
  
      
      
      
   
  
      $("#imagesDivID").logosDistort();
  
  

输出：

示例 2：以下示例显示了logosDistort()方法的几个选项设置。程序员可以根据应用程序对视觉效果的要求来设置选项。

    jQuery Logos Perspective Distortion
    
    
    


    GeeksForGeeks
    jQuery Logos distortion
  

    
    
    
    
    
    
        
    

  





     var options = {
        enable: true,
        effectWeight: 2.5,
        outerBuffer: 1.30,
        elementDepth: 140,
        enableSmoothing: true,
        smoothingMultiplier: 1.5,
        perspectiveMulti: 1,
        directions: [ 1, 1, 1, 1, -1, -1, 1, 1 ],
        weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200],
        depthOverride: false,
        mouseMode: 'container'
    };
    $("#imagesDivID").logosDistort(options);

输出：

示例 3：以下示例显示了在同一页面中显示的具有logosDistort效果的多张卡片。

    Logos Perspective Distortion 
    
    
        
      
    
    
    
    


  body{
   text-align:center;
  }
  .containerDiv 
  {
    width: 100%;
  }
  .section {
    width: 550px;
    height: 310px;
    margin: 2px;
    border: 1px solid black;
    position: relative;
    display: inline-block;
  }


  GeeksForGeeks
  Logo Distortion Plugin
  
  
    
        
               
    
    
        
               
    
    
    
        
        
    
    
         
         
    
  
    
         
         
    
    
         
          
    
      
  
  
  
  
      new logosDistort(
        document.getElementsByClassName('section'),
        {
          container: 'self',
          //This is new option
          perspectiveMulti: 1.2,
          mouseMode: 'container',
          outerBuffer: 2,
          effectWeight: 4
        }
      );
  
  

输出：

示例 4：以下示例显示了带有固定用户登录屏幕的失真背景。

    Logos Perspective Distortion 
    
    
    
      
   
   
   
   


  .loginClass 
  {
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    width:100%;
    height:100%;   
  } 
  .login-inputs
  {
    position: absolute;   
    width: 350px;
    height: 220px;
    margin-top: -100px;
    margin-left: -150px;
    background:#e9e9e9;
    color:#333333;   
    border-radius: 3px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    padding: 30px;
    display: inline-block;  
  }
  input
  {
    width: 100%;
    height:30%
  }
  .login-controls
  {
    width:100%;
    position:absolute;
    top:50%;
    text-align:center;
    z-index:inherit;
  } 
  
  


   
  
    
            
        
        
    
      
    
  
  
  
       
            
    
  
      var distort = new logosDistort(
        document.getElementById('logoDistortDivID'),
        {
          perspectiveMulti: 1.5
        }
      );
  

输出：