I am creating a navbar for a website where I want the behavior of navbar to be like this-
User hovers over a nav-item > nav-item's background image fades in into a sweet radial gradient > color of the whole navbar changes to the farthest color of the nav-item gradient.
Now I want this change in colors of two divs(navbar and nav-item) to appear as a single effect.
HTML Code
<html>
<body>
<div id="navbar">
<div >
<div >
<img src="./img/Mob-Asset 18.png" alt="">
</div>
<div >
<div id="services">Services</div>
<div id="clients">Clients</div>
<div id="about-us">About Us</div>
<div id="contact-us">Contact Us</div>
</div>
</div>
</div>
</body>
</html>
CSS Styling
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;700&family=Poppins:wght@100;200;300;500;600;700;800&display=swap');
html{
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(to top, #3d7ad6, #009eea, #12bff3, #5bdef7, #97fbfb);
}
.all-caps{
text-transform: uppercase;
}
.text-light{
color: #ffffff;
}
#navbar .container{
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
max-height: 60px;
box-shadow: 0px 5px 5px 0px #ffffff5a;
background-color: #000000;
transition: background-color 250ms ease-in-out;
}
#navbar .logo{
display: flex;
margin-left: 10px;
align-items: center;
}
#navbar .logo img{
cursor: pointer;
height: 40px;
}
#navbar .navbar-items{
height: 60px;
display: flex;
flex-direction: row;
width: auto;
}
#navbar .navbar-item{
position: relative;
cursor: pointer;
font-size: large;
font-weight: 600;
display: flex;
align-items: center;
margin: 0;
padding: 0 45px;
z-index: 1;
}
#navbar .navbar-item:nth-child(1)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #009aff, #1ba1ff, #2ca8ff, #3caeff, #4ab5ff, #58bbff, #65c0ff, #71c6ff, #7fccff, #8dd1ff, #9ad7ff, #a7dcff);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(1):hover::after{
opacity: 1;
}
/* Services Nav Item Hover End */
/* Clients Nav Item Hover Start */
#navbar .navbar-item:nth-child(2)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #00ff51, #23ff5f, #35fe6c, #43fe78, #4ffd83, #5bfd8c, #67fd94, #71fd9c, #7efea5, #8bfeae, #96ffb7, #a2ffbf);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(2):hover::after{
opacity: 1;
}
/* Clients Nav Item Hover End */
/* Abouts Us Nav Item Hover Start */
#navbar .navbar-item:nth-child(3)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #ffa600, #feab1c, #feb12c, #fdb63a, #fdbb46, #fdbf51, #fcc45c, #fcc867, #fccc74, #fcd180, #fbd58d, #fbd999);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(3):hover::after{
opacity: 1;
}
/* About Us Nav Item Hover End */
/* Abouts Us Nav Item Hover Start */
#navbar .navbar-item:nth-child(4)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #cf3dff, #d145ff, #d34dff, #d454fe, #d65bfe, #d865fe, #db6fff, #dd78ff, #e186ff, #e494ff, #e8a2ff, #ebafff);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(4):hover::after{
opacity: 1;
}
/* About Us Nav Item Hover End */
Jquery
$(document).ready(function(){
$("#services").hover(function(){
$("#navbar .container").css({"background-color": "#a7dcff"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
});
$("#clients").hover(function(){
$("#navbar .container").css({"background-color": "#96ffb7"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
$("#about-us").hover(function(){
$("#navbar .container").css({"background-color": "#fbd999"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
$("#contact-us").hover(function(){
$("#navbar .container").css({"background-color": "#ebafff"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
});
Here's the jsfiddle of my current attempt at this. It's a mess but this will give you an idea.
I am doing something like this for the very first time. Any help will be appreciated :)
CodePudding user response：
To do what you require you simply need to set the final colour of the gradient to be transparent. That way it will seamlessly merge in to the background colour set on the navbar.
One thing to note about this is that to make this more effective I removed most of the intermediary steps in the gradients. They were not needed, as the colour stops were the same as going straight from one colour at 0% to another at 100%.
However it's worth noting that there's several other improvements that can be made. Firstly you need to DRY up your code; there's a lot of repetition in the JS and CSS. Put the repeated CSS rules on common selectors, and you can genericise the JS by using a single event handler for all .navbar-item element. You can then create a class for each navbar item which toggles a specific class on the navbar container to set its class.
Here's a working example:
jQuery($ => {
let $container = $('#navbar .container');
$('.navbar-item').hover(e => $container.toggleClass(e.target.id));
});@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;700&family=Poppins:wght@100;200;300;500;600;700;800&display=swap');
html {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(to top, #3d7ad6, #009eea, #12bff3, #5bdef7, #97fbfb);
}
.all-caps {
text-transform: uppercase;
}
.text-light {
color: #ffffff;
}
#navbar .container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
max-height: 60px;
box-shadow: 0px 5px 5px 0px #ffffff5a;
background-color: #000000;
transition: background-color 250ms ease-in-out;
}
#navbar .container.services {
background-color: #a7dcff;
}
#navbar .container.clients {
background-color: #96ffb7;
}
#navbar .container.about-us {
background-color: #fbd999;
}
#navbar .container.contact-us {
background-color: #ebafff;
}
#navbar .logo {
display: flex;
margin-left: 10px;
align-items: center;
}
#navbar .logo img {
cursor: pointer;
height: 40px;
}
#navbar .navbar-items {
height: 60px;
display: flex;
flex-direction: row;
width: auto;
}
#navbar .navbar-item {
position: relative;
cursor: pointer;
font-size: large;
font-weight: 600;
display: flex;
align-items: center;
margin: 0;
padding: 0 45px;
z-index: 1;
}
#navbar .navbar-item::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:hover::after {
opacity: 1;
}
#navbar .navbar-item:nth-child(1)::after {
background-image: radial-gradient(circle, #009aff 0%, rgba(167, 220, 255, 0) 100%);
}
#navbar .navbar-item:nth-child(2)::after {
background-image: radial-gradient(circle, #00ff51 0%, rgba(162, 255, 191, 0) 100%);
}
#navbar .navbar-item:nth-child(3)::after {
background-image: radial-gradient(circle, #ffa600 0%, rgba(251, 217, 153, 0) 100%);
}
#navbar .navbar-item:nth-child(4)::after {
background-image: radial-gradient(circle, #cf3dff 0%, rgba(235, 175, 255, 0) 100%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="navbar">
<div >
<div >
<img src="./img/Mob-Asset 18.png" alt="">
</div>
<div >
<div id="services">Services</div>
<div id="clients">Clients</div>
<div id="about-us">About Us</div>
<div id="contact-us">Contact Us</div>
</div>
</div>
</div>