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