javascript 标题损坏和css动画不工作

lmvvr0a8  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(120)

我的标题是向上和向下移动时，我在我的移动版本的网站滚动。当我关闭我的汉堡菜单的文字不移动的动画。我试图解决这个问题，但我不能弄清楚。老师不知道如何解决这个问题，所以我希望你们能帮助〈3

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #1A1A1A;
  overflow-x: hidden;
  color: #fff;
  z-index: 1;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  overflow-y: scroll;
}

#wrapper {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 90vh 40vh 70vh 55vh 10vh 1fr 1fr 15rem;
  grid-template-areas: "a" "b" "c" "d" "z" "e" "f" "g";
}

#slideshow {
  grid-area: a;
  background-image: url(../bilder/test.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#starttext {
  top: 7rem;
  position: relative;
}

#starttext p {
  font-size: 0.8rem;
  margin-top: 1rem;
}

h1,
h2 {
  margin-left: 1.2rem;
  margin-right: 1.2rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  margin-bottom: 1rem;
  margin-top: 2rem;
}

p {
  margin: 0 1.2rem 2rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 100;
}

#introduktion {
  grid-area: b;
}

#bakgrund {
  grid-area: c;
  background-color: #cacbcc;
}

#bakgrund p,
#bakgrund h2,
#problemformulering p,
#problemformulering h2 {
  color: #212529;
}

#box2 {
  grid-area: z;
  background-color: rgb(31, 31, 31);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#problemformulering {
  grid-area: d;
  background-color: #cacbcc;
}

#lösning {
  grid-area: e;
}

#diskussion {
  grid-area: f;
}

#footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  grid-area: g;
  background-color: rgb(31, 31, 31);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.nav-container {
  z-index: 300;
}

#blur-box {
  height: 3.5rem;
  width: 100vw;
  background: rgba(255, 255, 255, 0.486);
  backdrop-filter: blur(8px);
}

header {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 3rem;
  background: #1a1a1a83;
  backdrop-filter: blur(8px);
}

.nav-container nav {
  height: 100%;
  width: 100%;
  padding: 0 32px;
}

nav .desktop-nav {
  list-style: none;
}

nav .desktop-nav li button,
nav .desktop-nav li a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  background: none;
  border: none;
}

.nav-container .desktop-nav {
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0vh;
  background: #303030f3;
  justify-content: start;
  overflow: hidden;
  z-index: -1;
  transition: all 1000ms ease;
}

.nav-container.active .desktop-nav {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-container .desktop-nav li {
  width: 100%;
}

.nav-container .desktop-nav li a {
  padding: 30px 0;
  width: 100%;
  font-size: 1.5rem;
  opacity: 0;
}

.border {
  border-bottom: 1px solid #616161;
}

#yes {
  width: 80%;
}

.nav-container.active .desktop-nav li a {
  opacity: 1;
}

nav .mobile-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

nav .menu-icon-container {
  width: 20px;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

nav .menu-icon {
  position: relative;
  width: 100%;
}

nav .menu-icon .line-1,
nav .menu-icon .line-2 {
  position: absolute;
  height: 1px;
  width: 100%;
  background: #fff;
  transition-property: transform, top;
  transition-delay: 0ms, 160ms;
  transition-duration: 200ms;
}

nav .menu-icon .line-1 {
  top: -4px;
}

nav .menu-icon .line-2 {
  top: 4px;
}

/* De två under är hämtat från någon bemsida */

.nav-container.active nav .menu-icon-container .menu-icon .line-1 {
  top: 0;
  transform: rotateZ(45deg);
  transition-property: top, transform;
  transition-delay: 0ms, 160ms;
  transition-duration: 200ms;
}

.nav-container.active nav .menu-icon-container .menu-icon .line-2 {
  top: 0;
  transform: rotateZ(-45deg);
  transition-property: top, transform;
  transition-delay: 0ms, 160ms;
  transition-duration: 200ms;
}

input,
div,
span,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media only screen and (min-width: 600px) {}

@media only screen and (min-width: 769px) {
  .center {
    padding-right: 35rem;
    display: block;
    padding-left: 35rem;
  }
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Buller</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../projekt3.2/style/style.css">
</head>

<body>
  <header class="nav-container">
    <nav>
      <ul class="mobile-nav">
        <li>
          <div class="menu-icon-container">
            <div class="menu-icon">
              <span class="line-1"></span>
              <span class="line-2"></span>
            </div>
          </div>
        </li>

        <ul class="desktop-nav">
          <div id="yes">
            <li>
              <button id="knapp1">Introduktion</button>
            </li>
            <li>
              <button id="knapp2">Bakgrund</button>
            </li>
            <li>
              <button id="knapp3">Problemformulering</button>
            </li>
            <li>
              <button id="knapp4">Lösning</button>
            </li>
            <li>
              <button id="knapp5">Diskussion</button>
            </li>
            <li>
              <a href="#">Bilder</a>
            </li>
          </div>
        </ul>
    </nav>
  </header>
  <main id="wrapper">
    <div id="slideshow">
      <div class="center" id="starttext">
        <h1>Framtids-<br>staden...</h1>
        <p>Ett projekt av Benim co som Lorem ipsum dolor <br> sit, amet consectetur adipisicing elit. Quia vero <br> sit, amet consectetur adipisicing elit. Quia vero</p>
      </div>
      <div clsas="center" id="blur-box">
      </div>
    </div>
    <div class="center" id="introduktion">
      <h2>Introduktion</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, suscipit!Lorem ipsum,
        dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="center" id="bakgrund">
      <h2>Bakgrund</h2>
      <p>Motorvägen som leder genom Nacka, Värmdöleden, är en vältrafikerad väg som sträcker sig mellan Stockholm och Stavsnäs i Stockholms län. På grund av att vägen går genom stora delar av Nacka, samt är mycket trafikerad, innebär det att vägen är en
        stor bidragande faktor till buller i kommunen. De åtgärder som redan gjorts, såsom bullerplank, är inte tillräckliga då vägen är för bred för att planken ska göra någon större nytta . Oljud från bilarna och vägen kan ta sig över planket och bidrar
        till en störande miljö i kommunen.</p>
      <p>I takt med att Nacka och Värmdö ökar kraftigt i befolkningsmängd, varav Nacka hade en ökning på 4,4% mellan åren 2018-2021 och Värmdö hade 4,1%, bidrar det att vägarna kommer att bli ännu mer trafikerade än vad de redan är idag. En sådan befolkningsökning
        innebär att Nacka har den 28:e högsta ökningen i landet och Värmdö den 32:a. När fler bilar befinner sig inom kommunerna kommer trafiken att öka vilket även innebär att bullret kommer att bli värre. </p>
    </div>
    <div id="box2">

    </div>
    <div class="center" id="problemformulering">
      <h2>Problemformulering</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
        impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
        Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
        repellendus!
      </p>
    </div>
    <div class="center" id="lösning">
      <h2>Lösning</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
        impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
        Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
        repellendus!
      </p>
    </div>
    <div class="center" id="diskussion">
      <h2>Diskussion</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
        impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
        Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
        repellendus!
      </p>
    </div>
    <div class="center" id="footer">
      <p>Här är benims footer (fast den är en div hihi)</p>
    </div>
  </main>
  <script src="../projekt3.2/script/js.js"></script>
</body>

我不想在滚动时上下滚动：D

JavaScript

1条答案

按热度按时间
wbgh16ku

wbgh16ku1#

固定标题位置：

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

要解决文本不随动画移动的问题：

#introduktion {
  transition: transform 0.4s ease-in-out;
}

.center {
  transition: transform 0.4s ease-in-out;
}

可以调整计时和缓动以匹配所需的动画效果。

赞(0）分享  回复(0）举报  2023-02-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com