自己紹介ページのフッターを編集

お疲れ様です。

今日は自己紹介文のフッターに貼り付けている画像に動きをつけました。
内容は以前紹介した　「1冊ですべて身につくJavaScript入門講座」　を進んだり戻ったりしながら書きました。

css　

.other {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1020px;
  gap: 30px;
  margin: auto;  
  padding: 30px;
}

.item{
  width: 300px;
  height: 300px;
  }

JavaScript

// footer画像のアニメーション
// .itemの配列要素を個別に取得
const imgItem = document.querySelectorAll('.item');

for(let i = 0; i < imgItem.length; i++){
const keyframes = {
  // 定数keyframesで画像の透明度を指定する
  opacity: [0, 1],
};

// 再生時間の指定
const option = {
  duration: 800,
// fill: 'forwards'はキーフレームの状態を保持するという意味
  fill: 'forwards',
};
imgItem[i].animate(keyframes, option);
}

画面撮影した動画の埋め込みがアプリの種類の関係でできないため画像での紹介になります。
今回は opacityとduration を使って、0.8秒後に4枚の画像がすべて同時に表示されるようにコードを書きました。
参考本を読んでいる中で、direction というアニメーションを実行する方向の指定や、easing というアニメーションが変化する速度、タイミング、fill というアニメーション再生前後の状態を指定できるプロパティがあると知り、その値を見に行ったり来たりしました。あとは、jsのページでコードの意味をコメントアウトで書いたり…

以前にも書きましたが、慣れるまで日本語で整理してからコードを書くなどした方が、今何をしているか理解できるような気がします。または、コードを読んで、日本語で何をしているコードなのかを書いても勉強になるなと思います。

慣れるまでとは言いますが、コードを書きまくった方が指も動かせるし、覚えられるのでしょうか…？

明日は、この画像を数秒遅れで表示されるようにそれぞれ指定し、順番に表示されるようにしていきたいと思います。