I am currently in the process of coding my website, and I came up with an exciting idea to animate my navigation bar within an SVG container. With its naturally wavy design, I aim to achieve a sweeping wave effect similar to the intro animation on Discord. I'm exploring different options to bring this concept to life, so any suggestions involving JQuery, Java, CSS, or any other tools are welcome.
While I have some experience working with CSS, I feel a bit lost when it comes to implementing Java or JQuery for this particular task. Ideally, I would like the animation to trigger onClick events, possibly tied to a Hamburger Menu.
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 2;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<!--Fonts from Google Fonts API Directory, all rights reserved to original typographers and the Google Corperation -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--Styling for Font Awesome Icon library, for high quality icons visit Font...;
@keyframes to animate SVGs.