如何在 header 上添加连锁反应

Question

我必须建立一个网站，在 header 或网站的第一页中我需要使用涟漪效应

我还是不明白哪里做错了。

下面是代码：

这是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

如果有 ID，则使用 #header；如果 class
加载你需要的库

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

如何在 header 上添加连锁反应

How to add ripple effect on the header

html

javascript

jquery

function

ripplejs