ホームページ作成　３回目

はやくも今回で、終わりになります（笑）

最後にアニメーションをつけて終わりとなります。

アニメーション用CSS

まずは、アニメーション用のCSSを用意します。

/* アニメーション */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
 }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
 }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
 }
}

左から右から下から表示されるアニメーションを用意して、アニメーションさせたいところに適用していきます。

Class名にJavascriptで取得するための名前をつける

Javascriptで取得するときは、ＩＤが一般的に使われますが、今回は、同じアニメーションを複数回使うので、class名で判断するようにします。

今回は、スクロールして画面に表示されたときに、アニメーションをはじめたいのでJavascriptを利用します。

                <div class="poricy">
                    <div class="poricy-head scrollAnimation">　←scrollAnimation
                        <div class="poricy-img">
                            <img src="./新緑.png">
                        </div>
                        <div class="poricy-title">
                            縁家のおもい
                        </div>
                    </div>
                </div>

Javascriptで画面に表示されたらclass名を追加する

縦に長いページだと、最初に表示されていないところがありますよね。単純にアニメーションをCSSでつけるだけだと、すべてのアニメーションが同時にはじまってしまいます。スクロールして表示されるころには、アニメーションが終わっている状態になってしまいます。

そこで、Javascriptで画面に表示されたらクラス名を追加するようにします。

const targets = document.querySelectorAll('.scrollAnimation');

window.addEventListener('scroll', function() {
  const scroll = window.scrollY;
  const height = window.innerHeight;
  for(let target of targets) {
    const element = target.getBoundingClientRect().top + scroll;
    if (scroll > element - height) {
      target.classList.add('start-animation');
    }
  }
});

これで、画面の表示領域に入った時に、class名が『scrollAnimation』に対しては、『start-animation』がクラス名に追加されます。

start-animation　に対応するCSSを追加

最後に、CSSでアニメーションを適用しましょう。

.poricy-head.start-animation {
  animation-name: fadeInUp;
  animation-duration: 1.5s;
}

これで、完成です(o^―^o)ﾆｺ

画面に要素が表示されると、class名にstart-animationが追加されて、動きが始まるという仕掛けです。

完成した動きがこちらです。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

あつし

「＠縁紡ぐ」にご訪問頂きありがとうございます。
業務改善やＩＴ化、システム開発・プロジェクトチーム運用支援を行っています。
お気軽にご相談ください。

ホームページ作成　３回目