Rails6のアプリでポートフォリオを作った話。【2】

前回の記事の続きになります。

# 使うもの👩‍💻

• Rails6, slim, scss, Vue.js, webpacker
• heroku, postgres

# ゴール💡

• 動的なコンテンツのあるポートフォリオページ

# 今回の目次🐕

1. CSS3を使ってオシャレ感を演出する

2. Vue.jsでモーダルを追加する

3. GSAPでDOMを動かす

## 1. CSS3を使ってオシャレ感を演出する

①hover時にぼやっとする

②hover時にぼやっとして文字を出す

①やっていることはCSS3でfilterとanimationの動きを指定するだけです。

&:hover {
  transition: .3s ease-in-out;
  -webkit-filter: grayscale(60%) blur(2px);
  filter: grayscale(60%) blur(2px);
}

developer.mozilla.org

CSS3のfilterはinvert(反転)の効果が簡単に画像にかけられて好きです。 場合によってはデザイナーさんの手を煩わせずに加工ができてしまいますが、caniuseなどでCSSがブラウザに対応しているか見つつ、プレフィックス(-webkitなど)を導入してください。

filterだけではゆっくりと変化する動作がつけられないので、transition-durationで変化の所要時間を指定しましょう。transitionは変化のモーションを指定することもできますよ。

②画像にfilterをかけて、画像を囲っているdivのbefore要素に対して文字を載せています。beforeのような擬似要素はimgのような置換要素には適用できません。

今回はscssを触ったので、マップを使って文章を各divに載せることをしました。key名をクラスにあてがう事で、対応する文章を載せています。

$texts: (
  bike: "バイク好きです。よく1人でお出かけしたりしています。",
  game: "ホラゲとシューティングゲームが好きです。バイオハザードシリーズや最近は              World War Zに手を出しました。",
  spa: "Vue.jsを使ったSPAアプリを作りました。お手軽にできるのがいいですね。",

　 … );

  @each $key, $text in $texts {
     &.-#{$key}:hover:before {
       width: 100%;
       height: 100%;
       font-size: 30px;
       font-family: 'クレー', '游明朝体', 'ヒラギノ明朝 ProN';
       position: absolute;
       content: $text;
       padding: 12px;
     }
   }

## 2. Vue.jsでモーダルを追加する

• DOMが描画されるタイミングでトップ画面にモーダル付きのカード要素を挿入しています。
• カードのボタン押下時のイベントを拾い、モーダルを出力します。
• モーダルではバツボタンを押下すると、イベントが伝搬し、モーダルを閉じる動作になります。

カードのテンプレート

<template>
  <div class="m-card">
    <div class="a-picture">
      <img v-bind:src="require('../assets/images/new.PNG')"/>
    </div>
    <h2 class="a-title">What's new</h2>
    <h3 class="a-title -sub">2020.04.20 | Aboutページを更新しました！</h3>
    <button @click="showModal">...</button>
    <modal @from-upddate-modal="handler()" v-show="show"></modal>
  </div>
</template>

• requireはRailsのアセットが置かれているパスを参照してくれます。
• v-showはプロパティの評価に関わらず、CSSで要素の表示・非表示の切り替えをしています。評価の遅延がある分、条件が一つであるならv-showで切り替えた方が良さそうです。

モーダルのテンプレート

<template>
  <div class="m-modal__bkground">
    <div class="m-modal">
      What's new
      <button class="a-button" @click="closeModal">x</button>

      <h2 class="a-title">2020.04.20 | Aboutページを更新しました！</h2>
      <span>CSS3を使ったhover時の挙動を追加しました。</span>
          ----

　　 …