小贝子编程

Lottie Hamburger Menu在响应页面中的使用情况



我为一个响应式单页站点添加了一个多汉堡菜单作为移动断点。我希望发生以下两件事:

当点击其中一个链接时，菜单消失。

同时，当点击链接时，lottie动画回到汉堡包图标状态，(它保持在X状态)这是链接https://codepen.io/OralYildiz/pen/abwvazw

/*--Lottie Animation and Mobile Menu Appear---*/
const pageHeader = document.querySelector(".header");
const toggleMenu = document.querySelector(".toggle-menu");
const player = document.querySelector("lottie-player");
const menuWrapper = document.querySelector(".nav__menu");
const menuOpenedClass = "menu-open";
const noTransitionClass = "no-transition";
let timer;
toggleMenu.addEventListener("click", function (e) {
e.preventDefault();
pageHeader.classList.toggle(menuOpenedClass);
if (pageHeader.classList.contains(menuOpenedClass)) {
this.setAttribute("aria-label", "Close navigation");
this.setAttribute("aria-expanded", "true");
player.getLottie().playSegments([0, 45], true);
} else {
this.setAttribute("aria-label", "Open navigation");
this.setAttribute("aria-expanded", "false");
player.getLottie().playSegments([45, 0], true);
//player.getLottie().playSegments([46, 90], true);
}
});
window.addEventListener("resize", function () {
menuWrapper.classList.add(noTransitionClass);
clearTimeout(timer);
timer = setTimeout(function () {
menuWrapper.classList.remove(noTransitionClass);
}, 500);
});
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader() {
const header = document.getElementById("header");
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 50) header.classList.add("scroll-header");
else header.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
/*=============== SHOW SCROLL UP ===============*/
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 200) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll("section[id]");
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach((current) => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute("id");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.add("active-link");
} else {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.remove("active-link");
}
});
}
window.addEventListener("scroll", scrollActive);
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
distance: "60px",
duration: 2500,
delay: 400
// reset: true
});
sr.reveal(`.home__header, .section__title`, { delay: 600 });
sr.reveal(`.home__footer`, { delay: 700 });
sr.reveal(`.home__img`, { delay: 900, origin: "top" });
sr.reveal(
`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,
{ origin: "top", interval: 100 }
);
sr.reveal(`.specs__data, .discount__animate`, {
origin: "left",
interval: 100
});
sr.reveal(`.specs__img, .discount__img`, { origin: "right" });
sr.reveal(`.case__img`, { origin: "top" });
sr.reveal(`.case__data`);
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue-color: 206;
--black-color: hsl(var(--hue-color), 4%, 4%);
--black-color-alt: hsl(var(--hue-color), 4%, 8%);
--title-color: hsl(var(--hue-color), 4%, 95%);
--text-color: hsl(var(--hue-color), 4%, 75%);
--text-color-light: hsl(var(--hue-color), 4%, 65%);
--white-color: #FFF;
--body-color: hsl(var(--hue-color), 4%, 6%);
--container-color: hsl(var(--hue-color), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
--scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 5rem;
--bigger-font-size: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--text-line-height: 2rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
@media screen and (min-width: 968px) {
:root {
--biggest-font-size: 7.5rem;
--bigger-font-size: 4.5rem;
--big-font-size: 4rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, h3 {
color: var(--title-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
button,
input {
border: none;
outline: none;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4rem 0 2rem;
}
.section__title {
font-size: var(--bigger-font-size);
text-align: center;
margin-bottom: var(--mb-2-5);
}
.section__title-gradient {
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== LAYOUT ===============*/
.main {
overflow: hidden;
}
.container {
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid {
display: grid;
}
/*=============== HEADER ===============*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background: transparent;
}
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
display: flex;
width: 1.5rem;
}
/*.header .nav__menu {
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}*/
.header.menu-open .nav__menu{
transform: translateY(80px);
}
.header .toggle-menu {
width: 50px;
}
@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
background-color: var(--body-color);
transform: translateY(-200px);
left: 0;
width: 100%;
padding: 4rem 0 3rem;
transition: .4s;
}
}
.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
.nav__link {
color: var(--white-color);
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}
.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* show menu */
.nav__menu.active {
top: 0;
}
/* Change background header */
.scroll-header {
background-color: var(--body-color);
}
/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== HOME ===============*/
.home__img {
width: 250px;
position: absolute;
top: -16rem;
right: 1.5rem;
}
.home__data {
padding-top: 5rem;
}
.home__header {
position: relative;
}
.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.home__subtitle {
font-size: var(--big-font-size);
margin-bottom: var(--mb-2-5);
}
.home__title-description {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}
.home__description {
margin-bottom: var(--mb-2-5);
line-height: var(--text-line-height);
}
.home__price {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
margin-left: var(--mb-0-75);
}
/*=============== BUTTONS ===============*/
.button {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}
.button:hover {
background-color: var(--black-color-alt);
}
.button__icon {
font-size: 1.2rem;
}
.button--flex {
display: inline-flex;
align-items: center;
column-gap: .75rem;
}
/*=============== SPONSOR ===============*/
.sponsor__img {
width: 90px;
}
.sponsor__container {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
row-gap: 5rem;
justify-items: center;
align-items: center;
}
/*=============== SPECS ===============*/
.specs__container {
position: relative;
}
.specs__content {
row-gap: 1.5rem;
}
.specs__data {
display: grid;
row-gap: .25rem;
}
.specs__icon {
font-size: 1.2rem;
color: var(--white-color);
}
.specs__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.specs__subtitle {
font-size: var(--smaller-font-size);
}
.specs__data:nth-child(1), .specs__data:nth-child(4) {
margin-left: 1.5rem;
}
.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}
/*=============== CASE ===============*/
.case__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.case__data {
padding: 5rem 0 3rem;
}
.case__img {
width: 250px;
position: absolute;
left: -7rem;
}
.case__description {
margin-bottom: var(--mb-1-5);
line-height: var(--text-line-height);
}
/*=============== DISCOUNT ===============*/
.discount__container {
position: relative;
background-color: var(--container-color);
padding: 2rem 1.5rem;
border-radius: .75rem;
}
.discount__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-75);
}
.discount__description {
margin-bottom: var(--mb-1);
}
.discount__img {
width: 300px;
position: absolute;
top: 4rem;
right: -11rem;
}
/*=============== SCROLL UP ===============*/
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
display: flex;
background-color: var(--container-color);
border-radius: .25rem;
padding: .45rem;
opacity: 9;
z-index: var(--z-tooltip);
transition: .4s;
}
.scrollup:hover {
background-color: var(--black-color);
opacity: 1;
}
.scrollup__icon {
color: var(--white-color);
font-size: 1.35rem;
}
/* Show Scroll Up*/
.show-scroll {
bottom: 5rem;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
width: .60rem;
border-radius: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scroll-thumb-color-alt);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
.container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.section__title {
font-size: var(--big-font-size);
}
.home__img {
width: 200px;
top: -13rem;
}
.home__title {
top: -4rem;
font-size: var(--bigger-font-size);
}
.home__data {
padding-top: 1rem;
}
.home__description {
font-size: var(--small-font-size);
}
.specs__img {
width: 200px;
}
.case__container {
grid-template-columns: .6fr 1fr;
}
.case__img {
width: 220px;
top: -2rem;
left: -9rem;
}
.case__data {
padding: 0;
}
.products__container {
grid-template-columns: 142px;
justify-content: center;
}
}
/* For medium devices */
@media screen and (min-width: 576px) {
.home__container {
grid-template-columns: .8fr 1fr;
}
.home__data {
padding-top: 2rem;
}
.home__img {
top: -7rem;
left: 0;
}
.specs__img {
position: initial;
}
.specs__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.case__img {
position: initial;
}
.case__data {
padding: 0;
}
.case__container {
grid-template-columns: max-content 250px;
justify-content: center;
align-items: center;
column-gap: 2rem;
}
.discount__img {
position: initial;
}
.discount__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.products__container {
grid-template-columns: repeat(3, 142px);
justify-content: center;
}
}
@media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 6rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__logo {
width: 2rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
}
.nav__link {
font-size: var(--normal-font-size);
text-transform: initial;
}
.toggle-menu {
display: none;
}
.home__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.home__img {
top: -9rem;
left: 4rem;
}
.home__data {
padding-top: 8rem;
}
.specs__img {
width: 300px;
}
.case__container {
column-gap: 5rem;
}
.case__img {
width: 300px;
}
.case__description {
margin-bottom: var(--mb-2);
}
.discount__container {
grid-template-columns: 250px max-content;
justify-content: center;
column-gap: 5rem;
padding: 3rem 0;
}
.discount__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1);
}
.discount__description {
margin-bottom: var(--mb-2);
}
.products__container {
grid-template-columns: repeat(3, 162px);
gap: 6rem 3rem;
padding-top: 5rem;
}
.products__card {
height: 152px;
padding: .85rem;
}
.products__img {
width: 95px;
}
.footer__container {
grid-template-columns: .4fr .7fr .7fr 1fr;
}
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.home__img {
width: 300px;
top: -15rem;
}
.home__title {
top: -5rem;
left: 3.5rem;
}
.home__description {
padding-right: 5rem;
}
.sponsor__img {
width: 100px;
}
.discount__img {
width: 350px;
}
.footer__container {
padding-top: 3rem;
}
.footer__copy {
margin-top: 9rem;
}
}
<!DOCTYPE html>
<html lang="en" class="sr"><head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/favicon.png?raw=true" type="image/x-icon">
<!--=============== REMIX ICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>Responsive landing page headphones</title>
</head>
<body>
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/logo.png?raw=true" alt="">
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">Home</a>
</li>
<li class="nav__item">
<a href="#specs" class="nav__link">Specs</a>
</li>
<li class="nav__item">
<a href="#case" class="nav__link">Case</a>
</li>
</ul>
</div>
<a href="" class="toggle-menu" role="button" aria-controls="menu-wrapper" aria-label="Open navigation" aria-expanded="false">
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_nzuitqg1.json"></lottie-player>
</a>
</nav>
</header>
<main class="main">
<!--=============== HOME ===============-->
<section class="home section" id="home">
<div class="home__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/home.png?raw=true" alt="" class="home__img">
</div>
<div class="home__data">
<div class="home__header">
<h1 class="home__title">On ear</h1>
<h2 class="home__subtitle">Beats 3</h2>
</div>
<div class="home__footer">
<h3 class="home__title-description">Overview</h3>
<p class="home__description">Enjoy award-winning Beats sound with wireless listening freedom and a sleek,
streamlined design with comfortable padded earphones, delivering first-rate playback.
</p>
<a href="#" class="button button--flex">
<span class="button--flex">
<i class="ri-shopping-bag-line button__icon"></i></i> Add to Bag
</span>
<span class="home__price">$299</span>
</a>
</div>
</div>
</div>
</section>
<!--=============== SPONSOR ===============-->
<section class="sponsor section">
<div class="sponsor__container container grid">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor1.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor2.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor3.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor4.png?raw=true" alt="" class="sponsor__img">
</div>
</section>
<!--=============== SPECS ===============-->
<section class="specs section grid" id="specs">
<h2 class="section__title section__title-gradient">Specs</h2>
<div class="specs__container container grid">
<div class="specs__content grid">
<div class="specs__data">
<i class="ri-bluetooth-line specs__icon"></i>
<h3 class="specs__title">Connection</h3>
<span class="specs__subtitle">Bluetooth v5.2</span>
</div>
<div class="specs__data">
<i class="ri-battery-charge-line specs__icon"></i>
<h3 class="specs__title">Battery</h3>
<span class="specs__subtitle">Duration 40h</span>
</div>
<div class="specs__data">
<i class="ri-plug-line specs__icon"></i>
<h3 class="specs__title">Load</h3>
<span class="specs__subtitle">Fast charge 4.2-AAC</span>
</div>
<div class="specs__data">
<i class="ri-mic-line specs__icon"></i>
<h3 class="specs__title">Microphone</h3>
<span class="specs__subtitle">Supports Apple Siri <br> and Google</span>
</div>
</div>
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/specs.png?raw=true" alt="" class="specs__img">
</div>
</div>
</section>
<!--=============== CASE ===============-->
<section class="case section grid" id="case">
<h2 class="section__title section__title-gradient">Case</h2>
<div class="case__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/case.png?raw=true" alt="" class="case__img">
</div>
<div class="case__data">
<p class="case__description">With a comfortable and adaptable case so that you can
store it whenever you want, and keep your durability forever.
</p>
<a href="#" class="button button--flex">
<i class="ri-information-line button__icon"></i> More info
</a>
</div>
</div>
</section>
<!--=============== DISCOUNT ===============-->
<section class="discount section">
<div class="discount__container container grid">
<div class="discount__animate">
<h2 class="discount__title">Immerse yourself in <br> your music</h2>
<p class="discount__description">Get it now, up to 50% off.</p>
<a href="#" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i> Shop Now
</a>
</div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/discount.png?raw=true" alt="" class="discount__img">
</div>
</section>
</main>


<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-s-line scrollup__icon"></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="https://unpkg.com/scrollreveal"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>


</body></html>

以下工作:

  1. 定义变量 
// querySelectorAll gets you all 3 menu-links
const menuLink = document.querySelectorAll(".nav__link");
  • 定义一个函数()关闭菜单并向后播放彩票播放器:
    • function closeMenu() {
// pageHeader.classList.toggle(menuOpenedClass); // would also work;
pageHeader.classList.remove("menu-open");
// play lottie player segment backwards
player.getLottie().playSegments([45, 0], true);
}
    1. 添加事件监听器到所有3个菜单链接:
    menuLink.forEach(function (element) {
element.addEventListener("click", function () {
closeMenu();
})
});

    相关内容

    • 没有找到相关文章

    最新更新


    热门标签：

    javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium