如何更改 AOS 动画 z-index？
how change AOS animate z-index?
我为我的网站使用 AOS 动画，但是具有 AOS 动画的元素放置在导航栏上。我如何更改元素的（具有 AOS 动画的元素）z-index 以将导航栏放在每个元素上。
这个站点有一个适合我的练习模式，我想使用相同的动画元素方法。如果我使用的方法不对，谢谢你教我。
我的 html 代码：
<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@ex.com</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>
这是我的 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;
}
这是我的js代码：
/**
* 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%' }
);
}
);
您应该将其添加到您的样式表中：
[data-aos] {
pointer-events: none;
}
.aos-animate {
pointer-events: auto;
}
.aos-init[data-aos][data-aos].aos-animate {
transform: unset;
}
我为我的网站使用 AOS 动画，但是具有 AOS 动画的元素放置在导航栏上。我如何更改元素的（具有 AOS 动画的元素）z-index 以将导航栏放在每个元素上。 这个站点有一个适合我的练习模式，我想使用相同的动画元素方法。如果我使用的方法不对，谢谢你教我。 我的 html 代码：
<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@ex.com</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>
这是我的 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;
}
这是我的js代码：
/**
* 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%' }
);
}
);
您应该将其添加到您的样式表中：
[data-aos] {
pointer-events: none;
}
.aos-animate {
pointer-events: auto;
}
.aos-init[data-aos][data-aos].aos-animate {
transform: unset;
}