Apply water effect on div

Asked

Viewed 384 times

0

I got a div that’s 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 very much like to apply this water effect on 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>
<script src="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 of the water effect, it stops working.

It would be possible to apply the effect of water on the breadcrumb?

jquery

  • And what/where would be the "breadcrumb" ? I didn’t quite understand what you want...

  • I only know the English term for that element. In this example: http://www.bodynutry.ind.br/contacto where there is a background with a blue image, the name of the page in large font, the link of the home and the current page in smaller fonts. It would apply the effect of water in this blue region.

  • Do you want just in the div where the breadcrumb will be inside to have that effect? Only the background with the image is in the other major back div is this?

  • I think the effect would work in the "banner-contact Parallax-bg" div. I’m looking for another effect case not sure of this (and I’m also trying to make the effect). The company collects water from a mine and engages in bottling..

  • Dude this plugin is cool yes, just think you’re using it the wrong way, you should value it more, use in Breadcrumbs is silly. Try to use only in the images, or in the Hero Images of the page headers. Using this link component I find silly in my view...

  • I’m thinking about going to that point. I found another tool that gives the same result, but bumps into the same problem: she did the effect on the image. If I put the container div, page name, etc, it covers the image, and cancels the effect.

  • Sometimes they change their names, but what would be the Hero Image?

  • Hero Image are these large images that are usually used at the top of the site or pages. Any large image at the top of the page is considers the "Hero image" in your case would be that image of the water at the top. I use this effect on this image to value you understand. gives a first impact to the user

Show 3 more comments
No answers

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.