未経験エンジニアの自作ポートフォリオ【コードあり】

CSSとJavascriptでシンプルなポートフォリオサイトを作ったので、作った過程をまとめておこうと思います。
完成したサイトはこちら。

Kashiwaba Yuki

ソースコードはGithub上で公開してます。

Github

トップページのアニメーション

まずは今回のポートフォリオサイトの一番のお気に入りであるトップページについて。

ポートフォリオサイトのトップページ、だんだん夜になってくイメージで作ったのだけど、とても気に入っている。 pic.twitter.com/aaLnHxszbQ
— カシワバユキ (@yuki_kashiwaba) 2019年1月5日

名前と季節感を合わせて、背景で雪が降るアニメーションになっています。
朝から夜になっていくような演出になっているのもお気に入りポイント。

こちらのアニメーションは、背景画像とCSSで実装されています。
参考にしたのはこちら。

このSnowEffectというサイトのコードをほとんどそのままいただきました。
自分で変更したのは、背景色が朝から夜に代わっていく部分のみです。

このアニメーションは、三枚の雪の画像を背景として重ねて、それぞれを動かすことによって作られています。
ちなみにCSSのコードはこちら。

  .cover{
    height: 100vh;
    background-color: rgba(67,135,233,0.7);
    position: relative;

    background-image: url("../img/snow1.png"), url("../img/snow2.png"), url("../img/snow3.png");
  	-webkit-animation: snow 20s linear infinite;
  	animation: snow 20s linear infinite;

    text-align: center;
  }

  @-webkit-keyframes snow {
  	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  	50% { background-color: #151d25 }
  	100% {
  		background-position: 500px 1000px, 400px 400px, 300px 300px;
  		background-color: #151d25;
  	}
  }
  @keyframes snow {
  	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  	50% { background-color: #151d25 }
  	100% {
  		background-position: 500px 1000px, 400px 400px, 300px 300px;
  		background-color: #151d25;
  	}
  }

まだあまり使いこなせてはいないのですが、CSSのアニメーションで背景画像の位置を少しずつ動かして雪が降るのを実装してます。
雪のオブジェクトを作ってJavascriptで動かす方法も考えたのですが、CSSのアニメーションってJavascriptと比べてどうなんでしょう？
やっぱり軽量なんでしょうか。

Javacriptでイベントリスナーの実装

WEBページ上で、ユーザーのアクションに合わせて処理を実行したい時、イベントリスナーを実装する必要があります。
今回は、Javascriptで三つのイベントリスナーを用意しました。

コードはこちら。

  const items = document.getElementsByClassName('item');
  const created = document.getElementById('created');

  //マウスが乗ったときの処理
  for(let i=0; i<items.length; i++){="" items[i].addeventlistener('mouseover',="" ()=""> {
      let style = created.style;
      items[i].style.opacity = 1;
    });

    //マウスが離れたときの処理
    items[i].addEventListener('mouseleave', () => {
      let style = created.style;
      items[i].style.opacity = 0.7;
      style.backgroundImage="url('')";
    });

    //クリックされたときの処理
    items[i].addEventListener('click', () => {

    });
  }
</items.length;>

itemというページ上の要素に対して、items[i].addEventListener()でイベントリスナーを設定しています。
イベントリスナーの実装は思ったより簡単ですね。

Javascriptで要素を自由に動かせるようになってくると、実装の幅が広がって面白いなと思います。