Aquí vamos a hacer un efecto de onda de agua en nuestra página web usando jQuery. Para esto, usaremos jQuery ripple.js.
Instalación: antes de continuar, primero debemos agregar el archivo CDN de ondas de agua a nuestro archivo de proyecto:
https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js
Acercarse:
- Primero, agregue el CDN anterior a su archivo de trabajo.
- El radio de gota define el tamaño (en píxeles) de la gota que resulta al hacer clic o mover el mouse sobre el lienzo.
- La perdurancia es la cantidad de refracción causada por una ondulación. 0 significa que no hay refracción.
- La resolución, el ancho y la altura de la textura WebGL para renderizar. Cuanto mayor sea este valor, más suave será el renderizado y más lentas se propagarán las ondas.
- Interactivo, los clics del mouse y el movimiento del mouse, ambos eventos, pueden desenstringr el efecto.
A continuación se muestra el código para este efecto.
Código HTML:
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"> </script> </head> <body> <div class="full-landing-image"> <h1>GeeksForGeeks</h1> </div> </body> </html>
Código CSS:
body{
margin: 0;
padding: 0;
}
h1{
text-align: center;
color: blueviolet;
padding-top: 300px;
}
.full-landing-image{
width: 100%;
height: 100vh;
background-color: black;
background-size: cover;
}
Código JavaScript:
Javascript
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js">
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: blueviolet;
padding-top: 300px;
}
.full-landing-image {
width: 100%;
height: 100vh;
background-color: black;
background-size: cover;
}
</style>
</head>
<body>
<div class="full-landing-image">
<h1>GeeksForGeeks</h1>
</div>
<script type="text/javascript">
$(".full-landing-image").ripples({
resolution: 512,
dropRadius: 20,
interactive: true,
perturbance: 0.02,
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vivekpatel7202 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA