jQuery | Logos Distort Plugin

Last Updated : 15 May, 2020

The jQuery provides LogosDistort plugin which helps in creating or animating a parallax environment for 3D scenes in the user browser. It uses full-page matrix3D perspective logos distortions for transforming base on mouse movement.

You have to download the required files in the working folder so that the programmer can include in the head section of the HTML structure page as implemented in the following programs.
Download link: https://github.com/hellsan631/LogosDistort

Example 1: The following example shows the basic logosDistort() method of the plugin.

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Logos Distortion Plugin</title> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="perspectiveRules.css" rel="stylesheet" /> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
    </script> 
    <script src="jquery.logosDistort.js"></script> 
    <script src="jquery.particleground.min.js"></script> 
</head> 
<style> 
  body{ 
    text-align:center; 
    font-family:sans-serif; 
    font-size:12px; 
  } 
</style> 
<body> 
  <h1 style="color:green">GeeksForGeeks</h1> 
  <b>jQuery Logos Distortion Plugin </b> 
  <p></p> 
  <div id="imagesDivID"> 
      <img alt="bgImage" src="images/background1.jpg" /> 
      <img alt="" src="images/gfg1.png" /> 
      <img alt="" src="images/gfg3.png" /> 
  </div>  
  <script> 
      $("#imagesDivID").logosDistort(); 
  </script> 
  
</body> 
</html> 

Output:

Example 2: The following example shows few options setting for the logosDistort() method. The programmer can set the options depending on the requirement of the application for the visual effect.

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Logos Perspective Distortion</title> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="perspectiveRules.css" rel="stylesheet" /> 
</head> 
<body> 
    <h1 style="color:green;">GeeksForGeeks</h1> 
    <b>jQuery Logos distortion</b> 
  
<div id="imagesDivID"> 
    <img alt="background" src="images/background1.jpg" /> 
    <img alt="" src="images/gfg1.png" /> 
    <div></div> 
    <img alt="" src="images/background2.jpg" /> 
    <img alt="" src="images/gfg2.jpg" /> 
    <div></div> 
    <div></div>     
    <img alt="" src="images/gfg5.jpg" /> 
</div> 
  
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
</script> 
<script src="jquery.logosDistort.js"></script> 
<script src="jquery.particleground.min.js"></script> 
<script> 
     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); 
</script> 
</body> 
</html> 

Output:

Example 3: The following example shows multiple cards shown in the same page with logosDistort effect.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Logos Perspective Distortion </title> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="perspectiveRules.css" rel="stylesheet" />     
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
    </script> 
    <script src="jquery.logosDistort.js"></script> 
    <script src="jquery.particleground.min.js"></script> 
</head> 
<style> 
  body{ 
   text-align:center; 
  } 
  .containerDiv  
  { 
    width: 100%; 
  } 
  .section { 
    width: 550px; 
    height: 310px; 
    margin: 2px; 
    border: 1px solid black; 
    position: relative; 
    display: inline-block; 
  } 
</style> 
<body> 
  <h1 style="color:green">GeeksForGeeks</h1> 
  <b>Logo Distortion Plugin</b> 
  <p></p> 
  <div class="containerDiv"> 
    <div class="section"> 
        <img alt="background" src="images/background1.jpg" /> 
        <img alt="ui" src="images/gfg1.png" />        
    </div> 
    <div class="section"> 
        <img alt="background" src="images/background2.jpg" /> 
        <img alt="ui" src="images/gfg3.png" />        
    </div> 
    
    <div class="section"> 
        <img alt="background" src="images/geeksimage1.png" /> 
        <img alt="ui" src="images/logo.png" /> 
    </div> 
    <div class="section"> 
         <img alt="background" src="images/geeksimage2.png" /> 
         <img alt="ui" src="images/gfg3.png" /> 
    </div> 
  
    <div class="section"> 
         <img alt="background" src="images/background2.jpg" /> 
        <img alt="ui" src="images/gfg1.png" />  
    </div> 
    <div class="section"> 
         <img alt="background" src="images/background3.jpg" /> 
         <img alt="ui" src="images/gfg6.png" />  
    </div> 
      
  
  </div> 
  
  <script> 
      new logosDistort( 
        document.getElementsByClassName('section'), 
        { 
          container: 'self', 
          //This is new option 
          perspectiveMulti: 1.2, 
          mouseMode: 'container', 
          outerBuffer: 2, 
          effectWeight: 4 
        } 
      ); 
  </script> 
  
</body> 
</html> 

Output:

Example 4: The following example shows distortion background with fixed login screen for user.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Logos Perspective Distortion </title> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="perspectiveRules.css" rel="stylesheet" /> 
      
   <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
   </script> 
   <script src="jquery.logosDistort.js"></script> 
   <script src="jquery.particleground.min.js"></script> 
</head> 
<style> 
  .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; 
  }  
  
  
</style> 
<body> 
   
  <div class="loginClass"> 
    <div class="login-controls"> 
      <div class="login-inputs">       
        <input type="text" placeholder="Email ID" /><br/> 
        <input type="password" placeholder="Password" /><br/><br/> 
    <input type="submit" placeholder="Login" /> 
      </div> 
    </div> 
  </div> 
  
  <div id="logoDistortDivID"> 
       <img alt="bgImage" src="images/background1.jpg" /> 
      <img alt="" src="images/gfg2.jpg" />       
  </div>   
  <script> 
      var distort = new logosDistort( 
        document.getElementById('logoDistortDivID'), 
        { 
          perspectiveMulti: 1.5 
        } 
      ); 
  </script> 
</body> 
</html> 