jQuery | Logos Distort Plugin

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
</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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
   </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.