i use AOS animate for my website ,but the elements that have AOS animate is placed on the navbar. how can i change the element's(the elements that have AOS animate) z-index to put navbar on everyelements. This site has a practice mode for me and I want to use the same method of animating elements. If the method I use is wrong, thank you for teaching me. My html code :
<body>
<header id="header">
<!--navbar-->
<div class="d-flex flex-column">
<nav class="nav navbar-dark navbar-expand-lg position-fixed">
<div class="container-fluid p-0">
<button class="navbar-toggler" type="button"data-bs-toggle="collapse"
data-bs-target="#myToggleNav" aria-controls="myToggleNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column float-left" id="myToggleNav">
<div id="navbar">
<div class="prifilito">
<img src="img/avatar.jpg" class="img-fluid rounded-circle" id="profileimg"
alt="eminem Avatar">
<h5 class="text-light font-weight-bold text-center">Marshall Mathers</h5>
<div class="social-links text-center">
<a href="#" class="twitter"><i class="bi bi-twitter text-light"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook text-light"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram text-light"></i></a>
<a href="#" class="google-plus"><i class="bi bi-youtube text-light"></i></a>
<a href="#" class="linkedin"><i class="bi bi-skype text-light"></i></a>
</div>
</div>
<div class="navbar-nav d-flex flex-column float-left pt-4 " id="menu">
<a href="#" class="navbar-item nav-link"><i class="bi bi-house"></i> Home</a>
<a href="#" class="navbar-item nav-link"><i class="bi bi-person"></i> About</a>
<a href="#" class="navbar-item nav-link"><i class="bi bi-file-earmark"></i> Resume</a>
<a href="#" class="navbar-item nav-link"><i class="bi bi-cup"></i> Porfolito</a>
<a href="#" class="navbar-item nav-link"><i class="bi bi-hdd-stack"></i> Services</a>
<a href="#" class="navbar-item nav-link"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
</div>
</div>
</nav>
<!--endnav--->
</header>
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
<div class="hero-container text-white text-center" data-aos="fade-in" data-aos-easing="ease-in-sine">
<h1 class="display-3 border p-2 ">Marshall Mathers</h1>
<p class="display-6">I'm <span class="typed border-bottom border-primary border-4"
data-typed-items="Rapper,songwriter,record producer,actor ,Rap God"></span></p>
</div>
</section>
<main id="main">
<!-- aboutme -->
<section id="aboutme ">
<div class="container">
<div class=" title-heading">
<h2 class="titleall border-bottom border-3 border-dark pb-2">About</h2>
<div class="text-justify textabout"> Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Laudantium cum,
tenetur tempore debitis accusamus obcaecati voluptatum saepe laborum consequatur illum dolores
odit incidunt voluptates amet iure ad! Iusto adipisci reprehenderit provident delectus sunt
dolorem corporis sed doloribus.</div>
</div>
<div class="row">
<div class="col-lg-4 pt-3 " data-aos="zoom-in-up">
<img src="img/arm.jpg" alt="eminem" class="img-fluid ">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content aboutsection " data-aos="fade-up">
<h3 class="titleinfo border-bottom border-3 border-dark pb-2"> American Rapper </h3>
<p class="fst-italic text-justify">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus aliquid atque non
officiis
impedit dicta?
</p>
<div class="d-flex flex-wrap">
<div class="col-12 col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i><strong>Birthday:</strong><span>October17,
1972
</span></li>
<li><i
class="bi bi-chevron-right"></i><strong>Website:</strong><span>eminem.com</span>
</li>
<li><i class="bi bi-chevron-right"></i><strong>phone:</strong><span>+123 456
789</span>
</li>
<li><i class="bi bi-chevron-right"></i><strong>City:</strong><span> New
York,USA</span>
</li>
</ul>
</div>
<div class="col-12 col-lg-6 ps-0">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age :</strong> <span>49</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Degree :</strong>
<span>Master</span>
</li>
<li><i class="bi bi-chevron-right"></i> <strong>PhEmailone:</strong><span>
[email protected]</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>FreeStyle
:</strong><span>Available</span></li>
</ul>
</div>
</div>
<p class="textabout">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nisi
veritatis nam doloribus
distinctio rem, error a corporis corrupti qui mollitia soluta quo obcaecati, tenetur
doloremque
suscipit in sed dignissimos.</p>
</div>
</div>
</div>
</section>
<!-- endaboutme -->
<!-- fact -->
<section id="facts" class="facts">
<div class="container">
<div class="section-title">
<h2 class="border-bottom border-3 border-dark pb-2 titleall">Facts</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem.
Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit
alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up">
<div class="count-box">
<i class="bi bi-emoji-smile"></i>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1"
class="purecounter"></span>
<p><strong>Happy Clients</strong> consequuntur quae</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up"
data-aos-delay="100">
<div class="count-box">
<i class="bi bi-journal-richtext"></i>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1"
class="purecounter"></span>
<p><strong>Projects</strong> adipisci atque cum quia aut</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up"
data-aos-delay="200">
<div class="count-box">
<i class="bi bi-headset"></i>
<span data-purecounter-start="0" data-purecounter-end="1453" data-purecounter-duration="1"
class="purecounter"></span>
<p><strong>Hours Of Support</strong> aut commodi quaerat</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up"
data-aos-delay="300">
<div class="count-box">
<i class="bi bi-people"></i>
<span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1"
class="purecounter"></span>
<p><strong>Hard Workers</strong> rerum asperiores dolor</p>
</div>
</div>
</div>
</div>
</section>
<!-- endfact -->
<!-- skills -->
<section id="skills" class="skills">
<div class="container">
<h2 class="border-bottom border-3 border-dark pb-2 titleall">Skills</h2>
<div class="skill-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, minima
accusamus? Eos obcaecati incidunt nostrum dolore error harum ipsam omnis minima, quas deserunt,
vitae doloremque eveniet temporibus eius iusto facere magni exercitationem ipsum aspernatur!
Officiis, ut? Voluptates?</div>
<div class="row skills-content py-4">
<div class="col-lg-6" data-aos="fade-up">
<div class="progress mt-3">
<span class="skill"> Talent <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar " role="progressbar" style="width : 100%;" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress mt-3">
<span class="skill">Discipline <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" style="width : 80%;" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress mt-3">
<span class="skill">Self Confidence <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
<div class="progress mt-3">
<span class="skill">Singing Voice <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress mt-3">
<span class="skill">Ability To Deal<i class="val">70%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" style="width : 70%;" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress mt-3">
<span class="skill">Love Music<i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" style="width : 100%;" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Resume -->
<section class="resume section-bg">
<div class="container">
<!-- title -->
<h2 class="border-bottom border-3 border-dark pb-2 titleall">Resume</h2>
<div class="skill-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, minima
accusamus? Eos obcaecati incidunt nostrum dolore error harum ipsam omnis minima, quas deserunt,
vitae doloremque eveniet temporibus eius iusto facere magni exercitationem ipsum aspernatur!
Officiis, ut? Voluptates?</div>
<!-- title -->
</div>
</section>
<!-- endResume -->
</main>
this is my css :
.titleall{
color: #a36838;
width: 5rem;
}
/* nav */
#profileimg {
margin: 15px auto;
display: block;
width: 120px;
border: 8px solid #2c2f3f;
}
#navbar{
height: 100vh;
}
#myToggleNav{
color: #040b14 !important;
width: 15.3rem;
z-index: 9999;
overflow-y: auto;
}
.social-links{
padding-top :.75rem; ;
}
.social-links i {
background-color: #212431;
border-radius: 50%;
padding: .6rem .7rem;
margin-top: 1rem;
font-size: 1rem;
}
#menu{
line-height: 2.5rem;
padding-left: 1rem;
}
nav{
background-color: #5D4B3C;
}
#hero{
background: url("../img/wp7116723new.jpg") center/cover fixed no-repeat;
height: 100vh;
width: auto;
}
#hero p{
font-family: "Poppins", sans-serif;
}
.lists li{
list-style-type: none;
}
.lists i{
color: #a36838;
}
#main {
margin-left: 275px;
}
@media (max-width: 1199px) {
#main {
margin-left: 0;
}
}
.titleinfo{
color: #a36838;
width: 14rem;
}
.aboutsection ul{
padding-left: 0;
}
/* fact */
#facts i {
float: left;
font-size: 3rem !important;
color: #a36838;
display: block;
}
#facts .count-box{
padding: 1.3rem;
width: 100%;
}
#facts .count-box span{
font-weight: 700;
margin-left: 1.2rem;
font-size: 2.8rem;
line-height: 40px;
}
#facts .count-box p{
font-family: "Raleway", sans-serif;
padding: 16px 0 0 0;
margin: 0 0 0 60px;
}
/* skills */
.skills .progress-bar-wrap {
background: #dce8f8;
height: 10px;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: #149ddd;
}
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .val{
float: right;
}
.progress .skill {
font-family: "Raleway", sans-serif;
font-size: .75rem;
font-weight: 700;
}
.skills{
background: #f5f8fd;
}
this is my js code:
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Hero type effect
*/
$(document).ready(function () {
$("#namedefine").fadeIn(5000);
});
const typed = select('.typed')
if (typed) {
let typed_strings = typed.getAttribute('data-typed-items')
typed_strings = typed_strings.split(',')
new Typed('.typed', {
strings: typed_strings,
loop: true,
typeSpeed: 100,
backSpeed: 50,
backDelay: 2000
});
}
/**
* Skills animation
*/
$(document).ready(function() {
$('.progress-bar').waypoint(function() {
$('.progress-bar').css({
animation: "animate-positive 2s",
opacity: "1"
});
},
{ offset: '75%' }
);
}
);
you should add this to your stylesheet :