トップへ戻る
BLOGS

JS スクロールしたらフワッとコンテンツが現れるやつ(HTML、CSS準備編)

JS スクロールしたらフワッとコンテンツが現れるやつ(HTML、CSS準備編)

さて今回は今まで以上に難しくなりそうですが

最近よく見かける画面をスクロールして一定量進むとフワッとコンテンツが出てくるやつを実装したいと思います。

今回長くなりそうなので、HTMLとCSSは簡単にコピペで済ませようと思います。

雛形となるHTMLはこちら

長いのでコピペ推奨です。

<main>
    <ul class="contents">

      <li class="animationTarget">
        <img src="img/teien1.jpg" alt="">
        <div class="contentsText">
          <h2>Dummy Title</h2>
          <p>ここに文章が入りますここに文章が入りますここに文章が入ります
            <br>
            ここに文章が入りますここに文章が入ります
          </p>
        </div>
      </li>

      <li class="animationTarget">
        <img src="img/teien2.jpg" alt="">
        <div class="contentsText">
          <h2>Dummy Title</h2>
          <p>ここに文章が入りますここに文章が入りますここに文章が入ります
            <br>
            ここに文章が入りますここに文章が入ります
          </p>
        </div>
      </li>

      <li class="animationTarget">
        <img src="img/teien3.jpg" alt="">
        <div class="contentsText">
          <h2>Dummy Title</h2>
          <p>ここに文章が入りますここに文章が入りますここに文章が入ります
            <br>
            ここに文章が入りますここに文章が入ります
          </p>
        </div>
      </li>

      <li class="animationTarget">
        <img src="img/teien4.jpg" alt="">
        <div class="contentsText">
          <h2>Dummy Title</h2>
          <p>ここに文章が入りますここに文章が入りますここに文章が入ります
            <br>
            ここに文章が入りますここに文章が入ります
          </p>
        </div>
      </li>

    </ul>
  </main>

さらにCSSも続けて書きます

もちろんこちらもコピペ推奨です。

body {
  color: #fff;
  background-color: #333;
  font-family: serif;
}

*,*::after,*::before {
  box-sizing: border-box;
}

ul,li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header {
  padding: 50px;
}

header h1 {
  font-size: 70px;
  font-weight: bold;
  margin-bottom: 60px;
  white-space: nowrap;
}

main {
  max-width: 1000px;
  width: 100%;
  margin: 50px auto;
}

.contents li {
  position:relative;
}

.contents li:not(:first-of-type) {
  margin-top: 200px;
}

.contents li:nth-of-type(odd) .contentsText {
  right: 0;
}
.contents li:nth-of-type(even) .contentsText {
  align-items: flex-start;
}
.contents li:nth-of-type(even) img {
  margin-left: auto;
}

.contentsText {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 40px;
}

.contents h2 {
  font-size: 50px;
  font-weight: bold;
  white-space: nowrap;
  background-color: rgba(20,20,20,.8);
  padding: 10px 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.contents p {
  line-height: 1.6;
  background-color: #555;
  font-size: 14px;
  max-width: 340px;
  padding: 15px;
  margin-top: 30px;
  border-radius: 5px;
}

.contents img {
  width: 65%;
  display: block;
  border-radius: 5px;
}

CSSアニメーションを用意しておきます。

JSでshowというクラスを追加するとして書いていきます。

クラス付与されるタグに対して追記していきます。

.contents li {
  position:relative;
  opacity: 0;
  transition: all .7s ease;
  transform: translateY(50px);
}
.contents li.show {
  opacity: 1;
  transform: none;
}

これでゆっくりと下から現れる演出になるはずです

またコンテンツタイトル、コンテンツテキストは

それぞれ別のアニメーションを設定したいと思う場合の参考スタイルとして残しておきます

transform: translateY(20px);

h2,p,imgそれぞれに上記のスタイルで出現箇所を指定しておきます。

そして

.contents li.show h2,
.contents li.show p,
.contents li.show img {
  opacity: 1;
  transform: none;
}

クラス付与された際に出現するようにCSSを追記します。

また:nth-of-type(odd):nth-of-type(even)を指定することでしっかりと

偶数箇所、奇数箇所の指定も可能なのでアニメーションの幅が広がりますね

今回は以上です。

JS記述編と合わせてお読みいただければ幸いです

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA