How to add ripple effect on the header

Question

I have to build a website where in the header or in the first page of the website I need to use ripple effect

I still don't get it where I am doing something wrong.

Down here is the code:

This is css:

#header {
  top: 15px;
  height: 70px;
  z-index: 991;
  transition: all 0.5s ease-in-out;
  padding: 10px 0;

}

#header.header-scrolled {
  top: 0;
  background: rgba(26, 24, 22, 0.85);
}

#header .logo h1 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1;
  letter-spacing: 3px;
}

#header .logo h1 a, #header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}



@media (max-width: 992px) {
  #header {
    top: 0;
    background: rgba(26, 24, 22, 0.85);
  }
}

On the head I added

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And at the end of code I added:

<script src="assets/vendor/jquery/jquery.min.js"></script>

This is how I'm trying to inster on js:

    jQuery(document).ready(function(){
      "use strict"

      $('.header').ripples({
        dropRadius: 25,
        perturbance: 0.6,
      });

    });

!(function($) {



 // Smooth scroll for the navigation menu and links with .scrollto classes
  $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      if (target.length) {
        e.preventDefault();

    var scrollto = target.offset().top;
    var scrolled = 51;


      //  ........

the rest of the code which is not needed.

Answer 1

1. Use #header if it had ID and .header if class
2. Load the libraries you need

$(function() {
  $('#header').ripples({
    dropRadius: 25,
    perturbance: 0.6,
  });
});

#header {
  top: 15px;
  height: 70px;
  z-index: 991;
  transition: all 0.5s ease-in-out;
  padding: 10px 0;
}

#header.header-scrolled {
  top: 0;
  background: rgba(26, 24, 22, 0.85);
}

#header .logo h1 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1;
  letter-spacing: 3px;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 992px) {
  #header {
    top: 0;
    background: rgba(26, 24, 22, 0.85);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<header id="header"><div class="logo"><h1>Click to see <a href="https://www.npmjs.com/package/jquery.ripples">ripples</a></h1></div></header>