0

HTML ページの AOS (animate-on-scroll) ライブラリに問題があるようです。コードは正常に動作しますが、問題は、ユーザーが特定のピクセル範囲内でスクロールするまで、最後の div が AOS コード (フェードライト) を実行しないことです。つまり、高さが「100%」に設定されている場合"、ページには div があるはずの空白スペースが表示されます。これは、最後の div のコンテンツが短すぎて、実際にユーザーがその範囲内でスクロールできないためです。もちろん、html の高さを、ページ内の要素が占める高さよりも長い指定値に拡張すると、コードは正常に実行されますが、実際にはそれを避けて、この最後の div なしで表示できるようにしたいと考えています。ユーザーがスクロールするためのスペースをもう少し追加する必要があります。明確にするためにスニペットを残します。

html{
  height:100%;
}
body{
  overflow-x: hidden;
}

h1{
  font-size : 90px;
  text-align: center;
}

p{
  width:50%;
  font-size:20px;
  text-align:justify;
  margin:auto;
  padding:20px;
  background-color: #3E9AE0;
}

div{
  margin-bottom:50px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  </head>
  <body>
    <div data-aos="fade-right" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
      </p>
    </div>
    <div data-aos="fade-left" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
      </p>
    </div>
    <div data-aos="fade-right" data-aos-duration="1000">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init({
        mirror:false,
      });
    </script>
  </body>
</html>

4

1 に答える 1