Apply water effect on div

0

I have a div that is the breadcrumb of the page.

.banner-blog {
  background: url(http://www.hostmove.com.br/geral.jpg) no-repeat scroll;
  background-attachment: fixed;
  background-size: 100%;
  /* background-position: 50%, 25%; */
  padding: 150px 0px 90px;
  z-index: 1;
  position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

.banner-blog:before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-image: -moz-linear-gradient(-15deg, #3a7bd5 0%, #2fa9e7 100%);
  background-image: -webkit-linear-gradient(-15deg, #3a7bd5 0%, #2fa9e7 100%);
  background-image: -ms-linear-gradient(-15deg, #3a7bd5 0%, #2fa9e7 100%);
  z-index: -1;
  opacity: 0.75;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.banner-content {
  text-align: center;
  color: #fff;
}

.banner-content h2 {
  font: 200 55px/65px;
  text-transform: uppercase;
  letter-spacing: 0.50px;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.banner-content p {
  padding-top: 12px;
}

.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}
<link href="http://www.hostmove.com.br/inove/css/bootstrap.css" rel="stylesheet" type="text/css">

<section class="banner-blog parallax-bg" data-stellar-background-ratio="0.001" style="background-position: 0% 0%;">
  <div class="container">
    <div class="banner-content">
      <h2>Blog</h2>
      <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo.</p>
    </div>
  </div>
</section>

Espaço<br /> Espaço
<br /> Espaço
<br /> Espaço
<br /> Espaço
<br /> Espaço
<br />

And I would love to apply this water effect to the div:

$(document).ready(function() {
  try {
    $('.a,.b,.c').ripples({
      resolution: 256,
      perturbance: 0.04
    });
  } catch (e) {
    $('.error').show().text(e);
  }
});
body {
  margin: 0;
}

div {
  position: fixed;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.a {
  left: 0;
  top: 0;
  right: 51%;
  bottom: 51%;
  background-size: cover;
}

.b {
  left: 51%;
  top: 25.5%;
  right: 0;
  bottom: 25.5%;
  background-attachment: fixed;
}

.c {
  left: 0;
  top: 51%;
  right: 51%;
  bottom: 0;
  background-size: cover;
}

.error {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #eee;
  padding: 20px;
  display: none;
}
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><scriptsrc="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js"></script>

<div class="a" style="background-image:url(https://placekitten.com/800/500)">
</div>

<div class="b" style="background-image:url(https://placekitten.com/128/128)">
</div>

<div class="c" style="background-image:url(https://placekitten.com/600/700)">
</div>

<div class="error"></div>

But if I take the body and the css div from the water effect, it stops working.

Would it be possible to apply the effect of water on top of the breadcrumb?

    
asked by anonymous 17.07.2018 / 15:02

0 answers