jQuery proporciona el complemento LogosDistort que ayuda a crear o animar un entorno de paralaje para escenas 3D en el navegador del usuario. Utiliza distorsiones de logotipos de perspectiva matrix3D de página completa para transformar la base en el movimiento del mouse.
Debe descargar los archivos necesarios en la carpeta de trabajo para que el programador pueda incluirlos en la sección principal de la página de estructura HTML tal como se implementa en los siguientes programas.
Enlace de descarga: https://github.com/hellsan631/LogosDistort
Ejemplo 1: El siguiente ejemplo muestra el método logosDistort() básico del complemento.
<!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>
Producción:
Ejemplo 2: El siguiente ejemplo muestra algunas configuraciones de opciones para el método logosDistort() . El programador puede configurar las opciones según los requisitos de la aplicación para el efecto visual.
<!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>
Producción:
Ejemplo 3: el siguiente ejemplo muestra varias tarjetas en la misma página con efecto logosDistort .
<!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>
Producción:
Ejemplo 4: El siguiente ejemplo muestra un fondo distorsionado con una pantalla de inicio de sesión fija para el usuario.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA