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 >
<nav >
<div >
<button type="button"data-bs-toggle="collapse"
data-bs-target="#myToggleNav" aria-controls="myToggleNav" aria-expanded="false"
aria-label="Toggle navigation">
<span ></span>
</button>
<div id="myToggleNav">
<div id="navbar">
<div >
<img src="img/avatar.jpg" id="profileimg"
alt="eminem Avatar">
<h5 >Marshall Mathers</h5>
<div >
<a href="#" ><i ></i></a>
<a href="#" ><i ></i></a>
<a href="#" ><i ></i></a>
<a href="#" ><i ></i></a>
<a href="#" ><i ></i></a>
</div>
</div>
<div id="menu">
<a href="#" ><i ></i> Home</a>
<a href="#" ><i ></i> About</a>
<a href="#" ><i ></i> Resume</a>
<a href="#" ><i ></i> Porfolito</a>
<a href="#" ><i ></i> Services</a>
<a href="#" ><i ></i> Contact</a>
</div>
</div>
</div>
</div>
</nav>
<!--endnav--->
</header>
<section id="hero" >
<div data-aos="fade-in" data-aos-easing="ease-in-sine">
<h1 >Marshall Mathers</h1>
<p >I'm <span
data-typed-items="Rapper,songwriter,record producer,actor ,Rap God"></span></p>
</div>
</section>
<main id="main">
<!-- aboutme -->
<section id="aboutme ">
<div >
<div >
<h2 >About</h2>
<div > 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 >
<div data-aos="zoom-in-up">
<img src="img/arm.jpg" alt="eminem" >
</div>
<div data-aos="fade-up">
<h3 > American Rapper </h3>
<p >
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus aliquid atque non
officiis
impedit dicta?
</p>
<div >
<div >
<ul>
<li><i ></i><strong>Birthday:</strong><span>October17,
1972
</span></li>
<li><i
></i><strong>Website:</strong><span>eminem.com</span>
</li>
<li><i ></i><strong>phone:</strong><span> 123 456
789</span>
</li>
<li><i ></i><strong>City:</strong><span> New
York,USA</span>
</li>
</ul>
</div>
<div >
<ul>
<li><i ></i> <strong>Age :</strong> <span>49</span></li>
<li><i ></i> <strong>Degree :</strong>
<span>Master</span>
</li>
<li><i ></i> <strong>PhEmailone:</strong><span>
[email protected]</span></li>
<li><i ></i> <strong>FreeStyle
:</strong><span>Available</span></li>
</ul>
</div>
</div>
<p >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" >
<div >
<div >
<h2 >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 >
<div data-aos="fade-up">
<div >
<i ></i>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1"
></span>
<p><strong>Happy Clients</strong> consequuntur quae</p>
</div>
</div>
<div data-aos="fade-up"
data-aos-delay="100">
<div >
<i ></i>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1"
></span>
<p><strong>Projects</strong> adipisci atque cum quia aut</p>
</div>
</div>
<div data-aos="fade-up"
data-aos-delay="200">
<div >
<i ></i>
<span data-purecounter-start="0" data-purecounter-end="1453" data-purecounter-duration="1"
></span>
<p><strong>Hours Of Support</strong> aut commodi quaerat</p>
</div>
</div>
<div data-aos="fade-up"
data-aos-delay="300">
<div >
<i ></i>
<span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1"
></span>
<p><strong>Hard Workers</strong> rerum asperiores dolor</p>
</div>
</div>
</div>
</div>
</section>
<!-- endfact -->
<!-- skills -->
<section id="skills" >
<div >
<h2 >Skills</h2>
<div >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 >
<div data-aos="fade-up">
<div >
<span > Talent <i >100%</i></span>
<div >
<div role="progressbar" style="width : 100%;" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div >
<span >Discipline <i >90%</i></span>
<div >
<div role="progressbar" style="width : 80%;" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div >
<span >Self Confidence <i >90%</i></span>
<div >
<div role="progressbar" style="width: 90%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div data-aos="fade-up" data-aos-delay="100">
<div >
<span >Singing Voice <i >80%</i></span>
<div >
<div role="progressbar" style="width: 80%;" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div >
<span >Ability To Deal<i >70%</i></span>
<div >
<div role="progressbar" style="width : 70%;" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div >
<span >Love Music<i >100%</i></span>
<div >
<div role="progressbar" style="width : 100%;" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Resume -->
<section >
<div >
<!-- title -->
<h2 >Resume</h2>
<div >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%' }
);
}
);
CodePudding user response：
you should add this to your stylesheet :
[data-aos] {
pointer-events: none;
}
.aos-animate {
pointer-events: auto;
}
.aos-init[data-aos][data-aos].aos-animate {
transform: unset;
}