Как добавить эффект ряби на заголовок

Question

Мне нужно создать веб-сайт, где в заголовке или на первой странице веб-сайта мне нужно использовать эффект пульсации

Я все еще не понимаю, где я делаю что-то не так.

Вот код:

Это 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);
  }
}

По голове добавил

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

И в конце кода я добавил:

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

Вот как я пытаюсь установить 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;


      //  ........

остальной код, который не нужен.

Answer 1

1. Используйте #header, если у него был идентификатор, и.header, если класс
2. Загрузите нужные библиотеки

$(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>