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?