<p>YouTubeの「プログラミングチュートリアル」チャンネルの動画を参考に、Reactでログインフォームを作ってみました。今回はフロント部分のみで、バックエンドとのAPI連携はしていません。</p><p>ゴールとしては、「ユーザー名」「メールアドレス」「パスワード」を入力し、ログインできるようにします。その際にバリデーションチェックを行い、入力誤りがあればエラーを表示させます。</p><p><a href="https://www.youtube.com/watch?v=HB3kZKfMm-s" target="_blank" rel="noopener noreferrer">動画URL</a></p><h2 id="h48162eced8">使用技術</h2><p>React  -  18.2.0</p><p>HTML</p><p>CSS</p><h2 id="h0b18e049c9">ファイル構成</h2><pre><code>- node_modules
- public
- src 
  -- App.css
  -- App.js
  -- index.css
  -- index.js
- packge.json
- gitinore
- yarn.look</code></pre><h2 id="h6e69ed5281">全体のコード（App.js）</h2><pre><code>// App.js

import { useState } from "react";
import "./App.css";


function App() {
  const initialValues = { username: "", mailAddress: "", password: "" };
  const [formValues, setFormValues] = useState(initialValues);
  //配列だと値しか入っていかない。objectならキーと値を入れることができる
  const [formErrors, setFormErrors] = useState({});
  // ログインボタンをクリックしたかどうか
  const [isSubmit, setIsSubmit] = useState(false);


  const handleChange = (e) =&gt; {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
    setIsSubmit(true);
  };


  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    //ログイン情報を送信する
    //バリデーションチェックをする
    setFormErrors(validate(formValues));
  };


  //どの値をバリデーションチェックするのか→引数が必要
  const validate = (values) =&gt; {
    const errors = {};
    const regex =
      /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
    if (!values.username) {
      errors.username = "ユーザー名を入力してください";
    }
    if (!values.mailAddress) {
      errors.mailAddress = "メールアドレスを入力してください";
    } else if (!regex.test(values.mailAddress)) {
      errors.mailAddress = "正しいメールアドレスを入力してください";
    }
    if (!values.password) {
      errors.password = "パスワードを入力してください";
    } else if (values.password.length &lt; 4) {
      errors.password = "4文字以上15文字以下のパスワードを設定してください";
    } else if (values.password.length &gt; 15) {
      errors.password = "4文字以上15文字以下のパスワードを設定してください";
    }
    return errors;
  };


  return (
    &lt;div className="App"&gt;
      &lt;form onSubmit={(e) =&gt; handleSubmit(e)}&gt;
        &lt;h1&gt;ログインフォーム&lt;/h1&gt;
        &lt;hr /&gt;
        &lt;div className="uiForm"&gt;
          &lt;div className="formField"&gt;
            &lt;label&gt;ユーザー名&lt;/label&gt;
            &lt;input
              type="text"
              placeholder="ユーザー名"
              name="username"
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
          &lt;/div&gt;
          &lt;p className="errorMsg"&gt;{formErrors.username}&lt;/p&gt;
          &lt;div className="formField"&gt;
            &lt;label&gt;メールアドレス&lt;/label&gt;
            &lt;input
              type="text"
              placeholder="メールアドレス"
              name="mailAddress"
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
          &lt;/div&gt;
          &lt;p className="errorMsg"&gt;{formErrors.mailAddress}&lt;/p&gt;
          &lt;div className="formField"&gt;
            &lt;label&gt;パスワード&lt;/label&gt;
            &lt;input
              type="text"
              placeholder="パスワード"
              name="password"
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
          &lt;/div&gt;
          &lt;p className="errorMsg"&gt;{formErrors.password}&lt;/p&gt;
          &lt;button className="submitButton"&gt;ログイン&lt;/button&gt;
          {/* エラー文の数が0個なら */}
          {Object.keys(formErrors).length === 0 &amp;&amp; isSubmit &amp;&amp; (
            &lt;div className="msgOk"&gt;ログインに成功しました&lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre><p><br></p><h2 id="h2591ec88d6">コード解説</h2><h3 id="ha4abfe896f">onChangeで入力情報を取得する</h3><pre><code>// App.js 

&lt;div className="formField"&gt;
       &lt;label&gt;ユーザー名&lt;/label&gt;
            &lt;input
              type="text"
              placeholder="ユーザー名"
              name="username"
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
&lt;/div&gt;</code></pre><p><strong>input</strong> への入力があった場合、<strong>onChange={(e) =&gt; handleChange(e)}</strong> で入力情報を取得する。</p><pre><code>  const initialValues = { username: "", mailAddress: "", password: "" };
  const [formValues, setFormValues] = useState(initialValues);</code></pre><p>ReactHooksの<strong>useState</strong> を 使用して、inputへ入力された文字列を格納する状態変数を設定する。useStateの初期値は、<strong>initialValues</strong> のオブジェクトを設定する。</p><p><strong>formValues</strong> の文字列をinputへ入力されたタイミングで、<strong>username</strong> へ格納していく必要がある。なので、inputタグに<strong>onChange={(e) =&gt; handleChange(e)}</strong>を設定する。</p><pre><code>// handleChange関数  

const handleChange = (e) =&gt; {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
    setIsSubmit(true);
  };</code></pre><p>inputタグへ入力があるたびに、handleChange 関数が発火して、useState の <strong>formValue</strong> へ文字列が格納される。</p><p><strong>usename ・</strong> <strong>mailAddress ・</strong> <strong>password</strong> を見分ける必要があるため、分割代入を使用し、<strong>const {name, value} = e.target</strong> でnameとvalueを取得する。</p><p>その後、スプレッド構文を使用して、<strong>formValues</strong> へ <strong>name</strong> と <strong>value</strong> を格納し、 <strong>useState</strong> の <strong>setFormValues</strong> へセットする。</p><p><br></p><h3 id="hbf8070ca09">ログインボタンをクリックしたら、ログイン情報を送信する</h3><pre><code>// App.js

&lt;form onSubmit={(e) =&gt; handleSubmit(e)}&gt;</code></pre><p><strong>form</strong> タグへ <strong>onSubmit</strong> を設定し、ログインボタンがクリックされる度に、<strong>handleSubmit</strong> が発火される。</p><pre><code>// App.js  

 //配列だと値しか入っていかない。objectならキーと値を入れることができる
 const [formErrors, setFormErrors] = useState({});

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    //ログイン情報を送信する
    //バリデーションチェックをする
    setFormErrors(validate(formValues));
  };</code></pre><p><br></p><p><strong>e.preventDefault()</strong> でクリック時の更新をなくす。</p><p>バリデーションチェックするために、空の配列 <strong>[formErrors, setFormErrors]</strong> を準備して、その中にエラーを格納していく。</p><p>オブジェクトにすることで、値だけでなく、キーと値を格納することができる。</p><p><strong>setFormErrors</strong> で <strong>validate</strong> 関数を呼び出す。</p><pre><code>// App.js  

//どの値をバリデーションチェックするのか→引数が必要
  const validate = (values) =&gt; {
    const errors = {};
    const regex =
      /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
    if (!values.username) {
      errors.username = "ユーザー名を入力してください";
    }
    if (!values.mailAddress) {
      errors.mailAddress = "メールアドレスを入力してください";
    } else if (!regex.test(values.mailAddress)) {
      errors.mailAddress = "正しいメールアドレスを入力してください";
    }
    if (!values.password) {
      errors.password = "パスワードを入力してください";
    } else if (values.password.length &lt; 4) {
      errors.password = "4文字以上15文字以下のパスワードを設定してください";
    } else if (values.password.length &gt; 15) {
      errors.password = "4文字以上15文字以下のパスワードを設定してください";
    }
    return errors;
  };</code></pre><p><br></p><p>複数のパターンを <strong>const errors = {}</strong> でオブジェクトに格納することで、汎用性が上がる。</p><p><strong>(!value.username)</strong> ユーザー名に入力がなかった場合。<strong>(!value.mailAddress)</strong> メールアドレスに入力がなかった場合、また、<strong>regex</strong> へメールアドレスの正規表現を格納し、正しい表記で入力されなかった場合もエラーを表示させる。</p><p>パスワードは、入力がなかった場合と4文字以下の時、15文字以上の時にエラーを表示させる。</p><h3 id="h3bc4a1f213">ログインに成功したかどうか</h3><pre><code>//App.js

 // ログインボタンをクリックしたかどうか
 const [isSubmit, setIsSubmit] = useState(false);

 {/* エラー文の数が0個なら */}
 {Object.keys(formErrors).length === 0 &amp;&amp; isSubmit &amp;&amp; (
      &lt;div className="msgOk"&gt;ログインに成功しました&lt;/div&gt;
  )}</code></pre><p><br></p><p>ログインが成功する条件としては、<strong>エラーが0個</strong> かつ <strong>ログインボタンをクリックしたか</strong> をクリアした時に成功となる。</p><p>エラーの <strong>keys</strong> の数を数えて0個ならOK（エラー文の数）。<strong>isSubmit</strong> でログインボタンをクリックしたかをチェックするが、初期値は <strong>false</strong> を設定し、<strong>handleSubmit</strong>  が実行されたときに、<strong>true</strong> になる。</p><h2 id="h3bcda3e6b0">最後に</h2><p>今回はログインフォームのフロント部分のみを学習の一環として制作をしました。今後は、バックエンドのAPIと連携させていく方法も学んでいきたいと思います。</p>

YouTubeの「プログラミングチュートリアル」チャンネルの動画を参考に、Reactでログインフォームを作ってみました。今回はフロント部分のみで、バックエンドとのAPI連携はしていません。

React

Reactでログインフォームを実装（フロントのみ）

<p>今回は、マウスを特定の要素に乗せたら、画像がマウスを追従して表示される機能を実装してみました。JavaScriptを使用し、GSAPでアニメーションをつけています。</p><p>まずはデモサイトをご覧ください。</p><p><a style="color:#ffffff" href="https://ippei-log.conohawing.com/demo/hover-images-stalker/" target="_blank" rel="noopener noreferrer">DEMOサイトはこちら</a></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FvYpMbpM%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DvYpMbpM&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FvYpMbpM&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FvYpMbpM-512.jpg%3Fversion%3D1650717537&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h7140f5cfa4">GSAP導入</h2><pre><code>/**html**/

  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"&gt;&lt;/script&gt;そ</code></pre><h2 id="hbc3fc5362d">ソースコード一覧</h2><h3 id="hd0e9724409">HTML</h3><pre><code>/**html**/

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta name="robots" content="noindex"&gt;
  &lt;title&gt;hover-images-stalker&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
  &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&amp;family=Zen+Kaku+Gothic+Antique:wght@500;700&amp;display=swap" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;ul id="section"&gt;
    &lt;li class="item"&gt;
      &lt;a href="" class="a"&gt;
          &lt;p&gt;category&lt;/p&gt;
          &lt;div class="text"&gt;
            &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-01&lt;/h2&gt;
            &lt;p&gt;2022.04.18&lt;/p&gt;
          &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="item"&gt;
      &lt;a href="" class="a"&gt;
        &lt;p&gt;category&lt;/p&gt;
        &lt;div class="text"&gt;
          &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-02&lt;/h2&gt;
          &lt;p&gt;2022.04.18&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="item"&gt;
      &lt;a href="" class="a"&gt;
        &lt;p&gt;category&lt;/p&gt;
        &lt;div class="text"&gt;
          &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-03&lt;/h2&gt;
          &lt;p&gt;2022.04.18&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="item"&gt;
      &lt;a href="" class="a"&gt;
        &lt;p&gt;category&lt;/p&gt;
        &lt;div class="text"&gt;
          &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-04&lt;/h2&gt;
          &lt;p&gt;2022.04.18&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;div class="hover-stalker-img"&gt;&lt;/div&gt;
  &lt;/ul&gt;
&lt;/body&gt;

  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="h20a15eee8c">Scss</h3><pre><code>/**scss**/

/*font-family*/
$family-poppins:'Poppins', sans-serif;
$family-zen-kaku: 'Zen Kaku Gothic Antique', sans-serif;

/*color*/
$gray: rgb(41, 41, 41);
$white: #fff;
$white02:rgba(255, 255, 255, 0.228);
$font-color-ctg: rgb(162, 162, 162);

body {
  font-family: $family-poppins;
  font-family: $family-zen-kaku;
  background-color: $gray;
}

a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

ul {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  li {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    a {
      display: flex;
      align-items: center;
      padding: 48px 0;
      position: relative;
      &amp;::before {
        content: "";
        height: 1px;
        width: 100%;
        background-color: $white02;
        display: block;
        position: absolute;
        top: 0;
      }
      &amp;::after {
        content: "";
        height: 2px;
        width: 100%;
        background-color: $white;
        display: block;
        position: absolute;
        top: 0;
        transform: scale(0);
        transform-origin: right center;
        transition: transform 1s cubic-bezier(.19,1,.22,1);
      }
      &gt; p {
        font-size: 16px;
        color: $font-color-ctg;
        margin-right: 5%;
      }
      div {
        h2 {
          font-size: 24px;
          letter-spacing: 0.07em;
        }
        p {
          font-size: 14px;
          color: $font-color-ctg;
        }
      }
      &amp;:hover {
        &amp;::after {
          transform: scale(1);
          transform-origin: left center;
        }
      }
      .hover-img {
        width: 350px;
        height: 350px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transform: scale(1.1);
        }
      }
      &amp;.js-active {
        z-index: 2;
        p {
          z-index: 2;
        }
        .text {
          z-index: 2;
          h2 {
            opacity: 1;
            transition: opacity 2s cubic-bezier(.19,1,.22,1);
          }
        }
      }
    }
  }
  .hover-stalker-img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    background-position: 0 0;
    background-size: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}</code></pre><h3 id="hd148c32f21">JavaScript</h3><p>コードを部分的に分けて説明します。</p><pre><code>/**js**/

const wrapper = document.getElementById('section');
wrapper.addEventListener('mouseenter', (e) =&gt; {
  gsap.to(image,{
    opacity: .5,
    visibility: "visible",
  })
})</code></pre><p>↑<strong style="color:#353535">「mouseenter」</strong>は、マウスが指定した要素内に入った時のアクションを指定します。ここでは、GSAPを使用して、マウスが「#section」に入ったら「image」要素に<strong style="color:#353535">「opacity: .5;」</strong>と<strong style="color:#353535">「visibility: visible;」</strong>を追加します。</p><pre><code>/**js**/

wrapper.addEventListener('mouseleave', (e) =&gt; {
  gsap.to(image, {
    autoAlpha: 0,
  })
})</code></pre><p>↑<strong style="color:#353535">「mouseleave」</strong>は、マウスが指定の要素から外に出たら行う動作を指定できます。ここでは、GSAPを使用して、<strong style="color:#353535">「autoAlpha: 0」</strong>で「opacity: 0;」と「visibility: hidden;」を指定しています。</p><pre><code>/**js**/

const image = document.querySelector('.hover-stalker-img');

wrapper.addEventListener('mousemove', (e) =&gt; {
  gsap.to(image, {
    duration: 2,
    x: e.pageX + 300,
    y: e.pageY - 100,
    ease: "Power4.easeOut",
  })
})</code></pre><p>↑<strong>「mousemove」</strong>は、マウスが指定の要素内にある時に行う動作を指定できます。ここでは、「image」要素（マウスを追従する画像）が、少し遅れて追従し、表示位置を少し右上に指定しています。</p><pre><code>/**js**/

  const items = document.querySelectorAll('.item');
  const imgArr = [
    './images/fashion-01.jpg',
    './images/fashion-02.jpg',
    './images/fashion-04.jpg',
    './images/fashion-13.jpg',
  ];
  items.forEach((item, i) =&gt; {
    item.addEventListener('mouseenter', (e) =&gt; {
      image.style.backgroundImage = `url("${imgArr[i]}")`;
      gsap.set(image, {
        backgroundPosition: "center",
        
      });
      gsap.to(image, {
        repeat: -1,
        ease: "liner",
      });
    })
  })</code></pre><p>↑最後は、画像を配列に格納してそれぞれの要素にマウスが入ったら取り出す動作を行なっています。「forEach」を使用して、マウスが「.item」に入ったら繰り返し、背景に画像を追加する動作を行なっています。<strong style="color:#353535">「image.style.backgroundImage =&nbsp;</strong><strong>url("${imgArr[i]}")</strong><strong style="color:#353535">;」</strong>は、image要素にCSSで背景を設定することを示しています<span style="color:#353535">。</span></p>

JavaScriptとアニメーションライブラリのGSAPを使用してマウスをhoverさせたら、画像が追従する追従アニメーションを実装しました。addEventListenerの「mouseenter」「mouseleave」「mousemove」を使用して、マウスの動作をコントロールします。またgsapを使用することで、簡単にjavascriptを書くことができます。

Javascript

GSAP

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

Locomotive ScrollとGSAPを組み合わせて、スクロールアクションがあるパララックスサイトを実装してみました。locomotive-scrollはparallaxの実装を手助けしてくれるライブラリです。また、数多くのオプションがあるため、アニメーションの幅も広いです。GSAPと併用することで、慣性スクロールや滑らかなアニメーションを実装することができます。

【Locomotive Scroll】と【GSAP】 を使用してパララックスサイトを制作してみた

<p>スクロールアクションを『GSAP』というJavaScriptライブラリの『ScrollTrigger』を使用して実装してみました。スクロールに合わせてテキストや画像が表示されます。</p><p>まずはデモサイトをご覧ください。</p><p><a href="https://ippei-log.conohawing.com/demo/gsap-scrolltrigger/" target="_blank" rel="noopener noreferrer">デモサイトはこちら</a></p><p>今回は、スクロールに合わせて、テキストを左から徐々に表示させたり、画像を下からフワッと表示させるアニメーションをかけてみました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FExoWJzW%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DExoWJzW&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FExoWJzW&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FExoWJzW-512.jpg%3Fversion%3D1648359172&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h3cb37f0868">アニメーション毎のソースコード<br>テキストが左から右へ徐々に表示される</h2><p>CSSの「clip-path」を使用して、「GSAP」の「ScrollTrigger」でclassの付け替えを行なっています。</p><p><strong style="color:#353535">HTML</strong></p><pre><code>/**html**/

&lt;div class="ttl"&gt;
    &lt;h2 class="ttl__clip"&gt;ScrollTrigger&lt;/h2&gt;
    &lt;span class="ttl__clip__line"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre><p><strong>Scss</strong></p><pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
  @media #{map-get($breakpoint-up,$breakpoint)}{
    @content;
  }
}

$breakpoint-up: (
'bp760':'screen and(max-width:760px)',
)!default;


.ttl {
  display: table;
  margin-left: 5%;
  position: relative;
  &amp;__clip {
    position: relative;
    display: inline-block;
    font-size: clamp(3rem, 4vw ,7rem);
    transition: clip-path .6s cubic-bezier(0.18, 0.06, 0.23, 1) .2s;
    clip-path: inset(0 100% 0 0);
    padding: 0 12px 8px 0;
    &amp;__line {
      height: 2px;
      background-color: #000;
      width: 0;
      display: block;
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      &amp;.slid__open {
        width: 100%;
        opacity: 1;
        transition: all .4s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
      }
    }
    &amp;.slid__open {
      clip-path: inset(0);
    }
  }
}</code></pre><p><strong>JavaScript</strong></p><p>繰り返し使えるように、「forEach」を使っています。</p><pre><code>/**js**/

// テキストを徐々に表示させる
gsap.registerPlugin(ScrollTrigger);

const ttl__clips = document.querySelectorAll('.ttl__clip');

ttl__clips.forEach((ttl__clip, index) =&gt; {
  gsap.to(ttl__clip, {
    scrollTrigger: {
      trigger: ttl__clip,
      start: 'top-=300 center+=100',
      end: 'top top-=100',
    }
  });

  ScrollTrigger.create({
    trigger:ttl__clip,
    id: index+1,
    start: 'top center+=300',
    end: 'top top-=100',
    once: true,
    toggleClass: {
      targets: ttl__clip,
      className: 'slid__open',
    },
  });
});

const ttl__clip__lines = document.querySelectorAll('.ttl__clip__line');

ttl__clip__lines.forEach((ttl__clip__line, index) =&gt; {
  gsap.to(ttl__clip__line, {
    scrollTrigger: {
      trigger: ttl__clip__line,
      start: 'top center+=300',
      end: 'top top',
    }
  });

  ScrollTrigger.create({
    trigger:ttl__clip__line,
    id: index+1,
    start: 'top center+=300',
    end: 'top top',
    once: true,
    toggleClass: {
      targets: ttl__clip__line,
      className: 'slid__open',
    },
  });
});</code></pre><h2 id="he118c5a709">テキストがスクロールに合わせて横に動く</h2><p>スクロールに合わせて左右に横移動します。</p><p><strong style="color:#353535;background-color:#ffffff">HTML</strong></p><pre><code>/**html**/

 &lt;section class="scroll"&gt;
    &lt;div class="scroll__wrap"&gt;
      &lt;p class="scroll__x"&gt;GSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLL&lt;/p&gt;
    &lt;/div&gt;
    &lt;p class="fade__img"&gt;&lt;img src="images/shapelined-_JBKdviweXI-unsplash.jpg" alt=""&gt;&lt;/p&gt;
 &lt;/section&gt;</code></pre><p><strong>Scss</strong></p><pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
  @media #{map-get($breakpoint-up,$breakpoint)}{
    @content;
  }
}

$breakpoint-up: (
'bp760':'screen and(max-width:760px)',
)!default;

/*背景テキスト*/
.scroll {
  overflow: hidden;
  padding-top: 20%;
  padding-bottom: 20%;
  &amp;__wrap {
    p {
      font-size: clamp(8rem, 15vw, 16rem);
      font-weight: 900;
      color: #ebe9e9;
      opacity: 0.1;
      -webkit-text-stroke: 1px #000;
    }
  }
}</code></pre><p><strong>JavaScript</strong></p><pre><code>/**js**/

// 背景テキストがスクロールに合わせて左へ動く
gsap.fromTo( '.scroll__x', {
    x: "-15.1797px",
},
{
  x: '-1603.18px',
  scrollTrigger: {
    trigger: '.scroll',
    start: 'top center+=300' ,
    end: 'bottom top', 
    scrub: 0.8,
  }
}
);</code></pre><h2 id="hbcb32549b2">背景がスクロールに合わせて左から右へ広がって表示される</h2><p><strong>HTML</strong></p><pre><code>/**html**/

&lt;div class="scroll__bg"&gt;
    &lt;span class="scroll__cover"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre><p><strong>Scss</strong></p><pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
  @media #{map-get($breakpoint-up,$breakpoint)}{
    @content;
  }
}

/*背景徐々に表示*/
.scroll__bg {
  position: relative;
  padding: 32px 0 48px;
  display: flex;
  justify-content: space-between;
  @include media(bp760) {
    display: block;
    padding: 15% 0;
  }
  .scroll__cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: $color-bg02;
    transform-origin: left;
    width: 100%;
    height: 100%;
  }
  .fade__img {
    width: 50%;
    margin-right: 5%;
    margin-top: 10%;
    @include media(bp760) {
      margin-left: 5%;
      margin-right: 0;
      width: 90%;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}</code></pre><p><strong>JavaScript</strong></p><pre><code>/**js**/

// 背景が徐々に表示
gsap.fromTo('.scroll__cover', {
    x: "0",
    scaleX: 0,
    scaleY: 1,
},
{
  x: '0',
  scaleX: 1,
  scrollTrigger: {
    trigger: '.scroll__bg',
    start: 'top-=350 center+=100',
    end: 'bottom-=400 center+=100',
    scrub: 0.5,
    once: true,
  }
}
)

//下から画像フェードイン
const fadeUps = document.querySelectorAll('.fade__img');

fadeUps.forEach((fadeUp, index) =&gt; {
  gsap.fromTo(fadeUp, {
    autoAlpha: 0,
    y:20,
  },
  {
    autoAlpha: 1,
    y: 0,
    scrollTrigger: {
      trigger: fadeUp,
      start: 'top center+=100',
      end: 'top top',
      // toggleActions: "play pause resume reverse",
    }
  });
  ScrollTrigger.create({
    trigger: fadeUp,
    id: index+1,
    start: 'top center+=100',
    end: 'top top',
    once: true,
    // toggleActions: "play pause resume reverse",
  });
})

// 背景が徐々に表示
gsap.fromTo('.scroll__cover', {
    x: "0",
    scaleX: 0,
    scaleY: 1,
},
{
  x: '0',
  scaleX: 1,
  scrollTrigger: {
    trigger: '.scroll__bg',
    start: 'top-=350 center+=100',
    end: 'bottom-=400 center+=100',
    scrub: 0.5,
    once: true,
  }
}
)

//下から画像フェードイン
const fadeUps = document.querySelectorAll('.fade__img');

fadeUps.forEach((fadeUp, index) =&gt; {
  gsap.fromTo(fadeUp, {
    autoAlpha: 0,
    y:20,
  },
  {
    autoAlpha: 1,
    y: 0,
    scrollTrigger: {
      trigger: fadeUp,
      start: 'top center+=100',
      end: 'top top',
      // toggleActions: "play pause resume reverse",
    }
  });
  ScrollTrigger.create({
    trigger: fadeUp,
    id: index+1,
    start: 'top center+=100',
    end: 'top top',
    once: true,
    // toggleActions: "play pause resume reverse",
  });
})</code></pre><h2 id="h7a1aad4d44">テキストを１文字ずつしたから徐々に表示させる</h2><p><strong>HTML</strong></p><pre><code>/**html**/

  &lt;div class="text__up"&gt;
    &lt;span class="text__up__js"&gt;S&lt;/span&gt;
    &lt;span class="text__up__js"&gt;c&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
    &lt;span class="text__up__js"&gt;o&lt;/span&gt;
    &lt;span class="text__up__js"&gt;l&lt;/span&gt;
    &lt;span class="text__up__js"&gt;l&lt;/span&gt;
    &lt;span class="text__up__js"&gt;T&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
    &lt;span class="text__up__js"&gt;i&lt;/span&gt;
    &lt;span class="text__up__js"&gt;g&lt;/span&gt;
    &lt;span class="text__up__js"&gt;g&lt;/span&gt;
    &lt;span class="text__up__js"&gt;e&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="text__up text__up__02"&gt;
    &lt;span class="text__up__js"&gt;S&lt;/span&gt;
    &lt;span class="text__up__js"&gt;c&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
    &lt;span class="text__up__js"&gt;o&lt;/span&gt;
    &lt;span class="text__up__js"&gt;l&lt;/span&gt;
    &lt;span class="text__up__js"&gt;l&lt;/span&gt;
    &lt;span class="text__up__js"&gt;T&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
    &lt;span class="text__up__js"&gt;i&lt;/span&gt;
    &lt;span class="text__up__js"&gt;g&lt;/span&gt;
    &lt;span class="text__up__js"&gt;g&lt;/span&gt;
    &lt;span class="text__up__js"&gt;e&lt;/span&gt;
    &lt;span class="text__up__js"&gt;r&lt;/span&gt;
  &lt;/div&gt;</code></pre><p><strong>Scss</strong></p><pre><code>/**scss**/

//一文字ずつしたから表示
.text__up {
  display: flex;
  justify-content: center;
  margin: 15% auto 16px;
  overflow: hidden;
  span {
    display: block;
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: 0.04em;
  }
  &amp;__02 {
    margin: 0 auto 25%;
    span {
      font-size: 1.8rem;
    }
  }
}</code></pre><p><strong>JavaScript</strong></p><pre><code>/**js**/

//一文字ずつしたから表示
const text__ups = document.querySelectorAll('.text__up__js');

text__ups.forEach((text__up, i) =&gt; {
    gsap.fromTo(text__up, {
      opacity:0.1,
      y: '110%',
    },
    {
      opacity:1,
      y: 0,
      duration: 0.7,
      delay: i * 0.03,
      scrollTrigger: {
        trigger: '.text__up',
        start: 'top center+=300',
        end: 'top center+=300',
        once: true,
      }
    },
    )
}); </code></pre><h2 id="h406f13db12">画像を下からフワッとスケールしながら表示させる</h2><p><strong>HTML</strong></p><pre><code>/**html**/

  &lt;div class="flower"&gt;
    &lt;div class="flower__img flower__img__01 js-fadeup"&gt;
      &lt;img src="images/pink.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="flower__img flower__img__02 js-fadeup"&gt;
      &lt;img src="images/yellow.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="flower__img flower__img__03 js-fadeup"&gt;
      &lt;img src="images/blue.jpg" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="grid__img"&gt;
    &lt;div class="grid__img__item grid__img__item__01"&gt;
      &lt;img src="images/hito01.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid__img__item grid__img__item__02"&gt;
      &lt;img src="images/hito02.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid__img__item grid__img__item__03"&gt;
      &lt;img src="images/hito03.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid__img__item grid__img__item__04"&gt;
      &lt;img src="images/hito04.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid__img__item grid__img__item__05"&gt;
      &lt;img src="images/hito05.jpg" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre><p><strong>Scss</strong></p><pre><code>/**scss**/

/*画像が下から表示される*/
.flower {
  padding: 22% 0;
  background-color: $color-white;
  &amp;__img {
    width: 58.04688%;
    position: relative;
    &amp;:nth-child(even) {
      margin: 15% 0 15% auto;
    }
    &amp;__02 {
      width: 41.25%;
    }
    &amp;__03 {
      width: 48.125%;
      margin: {
        left: 8%;
      };
    }
  }
}

.grid__img {
  position: relative;
  display: block;
  background-color: $color-white;
  padding-top: 50%;
  padding-bottom: 20%;
  &amp;__item {
    position: absolute;
    display: block;
    overflow: hidden;
    &amp;::after {
      content: "";
      width: 100%;
      height: 102%;
      background-color: $color-white;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
      transform: translate3d(0, 0%, 0);
    }
    &amp;.js-after {
      &amp;::after {
        transform: translate3d(0, -102%, 0);
      }
      img {
        opacity: 1;
        transform: scale(1);
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      transform: scale(1.3);
      transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
      object-fit: cover;
    }
    &amp;__01 {
      top: 0;
      left: 8.28125%;
      width: 25.46875%;
    }
    &amp;__02 {
      width: 42.8125%;
      left: -9.0625%;
      top: 26.25%;
      height: 35%;
    }
    &amp;__03 {
      width: 27.5%;
      left: 35%;
      top: 0;
      height: 74%;
    }
    &amp;__04 {
      width: 25.46875%;
      right: 10.78125%;
      top: 6.58824%;
    }
    &amp;__05 {
      width: 36.4%;
      right: 0;
      top: 33.17647%;
    }
  }
}

.js-fadeup {
  position: relative;
  overflow: hidden;
  &amp;::after {
    content: "";
    width: 100%;
    height: 102%;
    background-color: $color-white;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
    transform: translate3d(0, 0%, 0);
  }
  &amp;.js-after {
    &amp;::after {
      transform: translate3d(0, -102%, 0);
    }
    img {
      opacity: 1;
      transform: scale(1);
    }
  }
  img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform: scale(1.3);
    transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
  }
  }</code></pre><p><strong>JavaScript</strong></p><pre><code>/**js**/

// 画像を下から表示させる
const jsFadeUps = document.querySelectorAll('.js-fadeup');

jsFadeUps.forEach((jsFadeUp, index) =&gt; {
  gsap.to(jsFadeUp, {
    scrollTrigger: {
      trigger: jsFadeUp,
      start: 'top-=200 bottom',
      end: 'bottom top',
      scrub: true,
    }
  });

  ScrollTrigger.create({
    trigger: jsFadeUp,
    start: 'top-=200 bottom',
    end: 'bottom top',
    id: index+1,
    once: true,
    toggleClass: {
      targets: jsFadeUp,
      className: 'js-after',
    }
  })
})

const gridItems = document.querySelectorAll('.grid__img__item');

gridItems.forEach((gridItems, index) =&gt; {
  gsap.to(gridItems, {
    scrollTrigger: {
      trigger: gridItems,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true,
    }
  });

  ScrollTrigger.create({
    trigger: gridItems,
    start: 'top bottom',
    end: 'bottom top',
    id: index+1,
    once: true,
    toggleClass: {
      targets: gridItems,
      className: 'js-after',
    }
  })
})</code></pre><p><br></p>

JavaScriptの軽量アニメーションライブラリのGSAPをしようして、スクロールアニメーションを実装しました。GSAPのScrollTriggerを使用して、スクロールに合わせて、画像がフェードインしたり、テキストがスクロールに合わせて横移動したりするアニメーションを実装しました。

GSAPのScrollTriggerを使用してスクロールアニメーションを実装してみた

Web制作で使用する頻度が高い実装をjQueryを使わずに、素のJavaScriptで実装してみました。しょーごログさんのものを参考にさせてもらいましたので、アクセシビリティなども考慮したものとなっています。

JavaScriptでWeb制作でよく使用するパーツを実装してみた

<h2 id="h44db0678e8">cubic-bezierとは</h2><p>CSSのアニメーションのイージングを細かく数値で設定できるプロパティーになります。X軸、Y軸を使用しイージングのスピードを設定できます。</p><p>まず、イージングについてまとめてみました。</p><h2 id="ha65168e6df">cubic-bezierを直感的に設定できるサイト</h2><p>直感的にcubic-bezierを設定できるサイト↓</p><p><a href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank" rel="noopener noreferrer">cubic-bezier.com</a></p><h2 id="h87d79ace20"><strong>cubic-bezierを使用したhoverアクション例</strong></h2><p>簡単に制作してあるだけなので、アレンジすることをおすすめします！</p><h3 id="h960cf8d9e9">背景が左から右へスライドするhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FBamPZXB%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DBamPZXB&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FBamPZXB&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FBamPZXB-512.jpg%3Fversion%3D1645712428&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;div class="div"&gt;
&lt;p class="btn"&gt;&lt;a&gt;button&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>body {
 background-color: #ececec;
}

.div{
  position: relative;
  background-color: #ececec;
  width: 100%;
  height: 100vh;
}

.btn {
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 22px;
  overflow: hidden;
}

.btn a {
  font-size: 16px;
  display: inline-block;
  padding: 15px 70px;
  letter-spacing: 1.1px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
  border-radius: 22px;
}

.btn a:hover {
  color: #fff;
  transition: color 0.1s cubic-bezier(.16,.5,.43,1);
}

.btn a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
}

.btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background-image: linear-gradient(to right, #a5efff 0%, #00d0ff 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  z-index: -1;
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
}</code></pre><h3 id="h8f8e05274b">画像が小さくなって近づいてくるhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FgOXjGLm%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DgOXjGLm&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FgOXjGLm&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FgOXjGLm-512.jpg%3Fversion%3D1645715295&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h2 id="hcf83e1357e"><br></h2><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/
&lt;div class="img__box"&gt;
  &lt;div class="img__box__02"&gt;
  &lt;a&gt;
    &lt;img src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3270&amp;q=80"&gt;
   &lt;/a&gt;
  &lt;/div&gt;
 &lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

.img__box {
  width: 40%;
  margin: 60px auto;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box:hover {
  transform: scale(.95);
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box__02 {
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box__02:hover {
  transform: scale(1.1);
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box a {
  display: block; 
}

.img__box img {
  width: 100%;
  height: auto;
}</code></pre><h3 id="hf367a1e1f7">ニューフォフィズムボタンが凹むようなhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FvYWaVRg%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DvYWaVRg&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FvYWaVRg&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FvYWaVRg-512.jpg%3Fversion%3D1645743436&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;div class="btn"&gt;
  &lt;a&gt;neuphophism_buttton&lt;/a&gt;
&lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

body {
  background-color: #f2f2f2;
}

.btn {
  width: 300px;
  margin: 20% auto;
  display: block;
  text-align: center;
  border-radius: 30px;
}

.btn a {
  display: block;
  background-color:#f2f2f2;
  padding: 45px 60px;
  box-shadow: 8px 8px 20px rgb(112 112 112 / 20%), -8px -8px 20px #fff;
  border-radius: 30px;
  transition: .6s cubic-bezier(.16,.5,.43,1);
}

.btn a:hover {
  box-shadow: 8px 8px 20px rgb(160 160 160 / 20%), -8px -8px 20px #fff, inset 4px 4px 10px rgb(160 160 160 / 20%), inset -4px -4px 10px #fff;
  transition: .6s cubic-bezier(.16,.5,.43,1);
}</code></pre><h3 id="h4c299bb1d9">背景が滑らかに画像になるhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FdyZjgLN%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DdyZjgLN&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FdyZjgLN&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FdyZjgLN-512.jpg%3Fversion%3D1645745464&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;ul&gt;
  &lt;li&gt;
    &lt;a&gt;
      &lt;div&gt;
        &lt;h2&gt;BUTTON&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

ul li {
  width: 50%;
  min-width: 50%;
  margin: 10% auto;
  text-align: center;
  border: 1px solid #0000003b;
  position: relative;
  height: 300px;
}

ul li a {
  display: block;
  line-height: 300px;
}

ul li a div {
  width: 100%;
  height: 100%;
  position: relative;
}

ul li a div::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://images.unsplash.com/photo-1502982720700-bfff97f2ecac?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3270&amp;q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,.87,.43,1);
}

ul li a:hover div::before {
  opacity: 1;
  transition: opacity .6s cubic-bezier(.16,.87,.43,1);
}

ul li a div h2 {
  font-size: 18px;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  transition: color .4s cubic-bezier(.16,.87,.43,1);
}

ul li a:hover h2 {
  color: #fff;
  transition: color .4s cubic-bezier(.16,.87,.43,1);
}</code></pre><p><br></p>

cubic-bezierを使用して、滑らかな動きをするhoverアクションを作ってみました。直感的にcubic-bezierを設定できるサイトも紹介していますので、オリジナルの動きにアレンジしてお使いください。

【CSSのhoverアクション】cubic-bezierでなめらかでおしゃれなhoverアクション

CSS（Scss）とjQueryでハンバガーメニューを作ってみました。
今回のハンバーガーメニューは、全画面表示でメニューリストをしたからぬるっと表示させる仕様にしてみました。
また、三本線にも少し動きをつけてみました。

jQuery

【全画面ハンバーガーメニュー】メニューが下から順番にでてくるアニメーション付き

<p>完成イメージ</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FxxPjBKr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DxxPjBKr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr-512.jpg%3Fversion%3D1645581725&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><p><br></p><p>今回は【anime.js】について、ローディング画面でSVG画像の線画アニメーションを実装しながら学習していきます。</p><h2 id="h8c604f82e7">anime.jsの使い方</h2><p><span style="font-size: 1.5em">CDN</span></p><pre><code>/**html**/

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/script&gt;</code></pre><p><a href="https://cdnjs.com/libraries/animejs" target="_blank" rel="noopener noreferrer">CDNのサイトはこちら</a></p><p><span style="font-size: 1.5em">ファイルをダウンロードして使う</span></p><p>GitHubの「Code」の「Download Zip」よりダウンロードします。</p><p>解凍し、anime.min.jsを使用します。</p><p><a href="https://github.com/juliangarnier/anime/" target="_blank" rel="noopener noreferrer">GitHubページはこちら</a></p><h2 id="h5c5564d5f4">基本的なコードの書き方</h2><p>まずは、HTMLでアニメーションをつけたいものを書きます。</p><pre><code>/**html**/

&lt;div id="anime-js"&gt;&lt;/div&gt;</code></pre><p>次にCSSで装飾します。</p><pre><code>/**css**/

#anime-js {
&nbsp;width: 200px;
&nbsp;height: 200px;
&nbsp;background-color: #000;
}</code></pre><p>最後にJavascriptでanime.jsを実装します。</p><p><a href="https://tr.you84815.space/animejs/index.html" target="_blank" rel="noopener noreferrer">anime.js-にほんご</a></p><pre><code>/**js**/

anime({
//このなかにパラメーターを記述していきます。
});</code></pre><h2 id="hfe85b22d67">SVG画像で線画アニメーションローディング画面を実装する</h2><p>ローディング画面でSVG画像を使用して、徐々にロゴの線が見えてきて表示されるアニメーションになります。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FxxPjBKr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DxxPjBKr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr-512.jpg%3Fversion%3D1645581725&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><p>〜参考にしたサイト〜</p><ul><li><a href="https://raccoonico.com/animejs-linedraw/" target="_blank" rel="noopener noreferrer">anime.jsを使ってSVGロゴを線画アニメーションで表示する方法</a></li><li><a href="http://smile-design.bz/news_blog/2016/03/05/anai024/" target="_blank" rel="noopener noreferrer">アニメーション終了後にサイトを表示させる方法</a></li><li><a href="https://tr.you84815.space/animejs/" target="_blank" rel="noopener noreferrer">anime.js - にほんご。</a></li></ul><p>最後にソースコードを載せておきます。</p><h3 id="hd0e9724409">HTML</h3><pre><code>/**html**/

&lt;body&gt;
&nbsp; &lt;div class="loading__svg" id="loading"&gt;
&lt;!--お好きなSVG画像をのせてください（SVG画像の作り方は上記の参考URLに掲載されています）--&gt;
&nbsp; &nbsp; &lt;svg version="1.1" id="svg__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514 112" style="enable-background:new 0 0 514 112;" xml:space="preserve"&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-01" class="fill" style="fill:#3A3A3A;" d="M100.978,58.535c0-8.891,5.927-19.797,21.514-19.797
	c13.039,0,20.981,8.001,20.981,18.848c0,11.556-8.12,20.625-21.455,20.625C107.141,78.21,100.978,67.483,100.978,58.535z
	 M135.767,59.482c0-10.729-6.163-18.077-14.817-18.077c-5.809,0-12.328,2.964-12.328,15.41c0,10.312,5.631,18.61,15.468,18.61
	C127.708,75.425,135.767,73.943,135.767,59.482z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-02" class="fill" style="fill:#3A3A3A;" d="M160.146,40.455c0-1.126,0.178-1.836,0.77-1.836c0.534,0,1.007,0.592,1.897,1.482
	c0.948,0.829,7.882,8.001,16.358,15.943c3.852,3.673,10.49,10.43,11.438,11.26l-0.474-21.93c-0.06-3.021-0.475-4.029-1.897-4.562
	c-0.77-0.238-1.956-0.238-2.667-0.297c-0.652,0-0.889-0.297-0.889-0.594c0-0.415,0.593-0.474,1.304-0.474
	c2.608,0,5.275,0.177,6.579,0.177c0.652,0,2.785-0.177,5.274-0.177c0.652,0,1.126,0.12,1.126,0.535c0,0.295-0.237,0.533-0.888,0.533
	c-0.534,0.059-0.948,0.059-1.482,0.179c-1.541,0.415-2.015,1.421-2.074,4.265c-0.237,7.586-0.356,20.803-0.534,31.353
	c0,1.364-0.296,1.838-0.77,1.838c-0.652,0-1.422-0.651-2.548-1.659c-3.319-3.025-9.661-9.127-14.58-13.87
	c-5.216-4.86-11.024-11.024-12.447-12.506l0.534,20.566c0.118,3.854,0.711,5.098,1.778,5.452c0.889,0.297,1.897,0.297,2.786,0.358
	c0.534,0,0.889,0.177,0.889,0.474c0,0.415-0.475,0.592-1.186,0.592c-3.082,0-5.156-0.177-6.519-0.177
	c-0.652,0-3.378,0.177-5.927,0.177c-0.652,0-1.126-0.057-1.126-0.533c0-0.297,0.296-0.533,0.829-0.533
	c0.652-0.061,1.541-0.061,2.252-0.238c1.482-0.415,1.719-1.718,1.778-6.104C159.849,59.482,160.146,47.094,160.146,40.455z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-03" class="fill" style="fill:#3A3A3A;" d="M217.518,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
	c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
	c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
	c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
	c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
	c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
	c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
	c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
	c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
	c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
	c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
	c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
	c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
	c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
	c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
	c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-04" class="fill" style="fill:#3A3A3A;" d="M254.471,76.907c-0.829-0.356-1.007-0.711-1.007-1.72c0-3.023,0.178-5.985,0.237-6.875
	c0.06-0.829,0.238-1.305,0.652-1.305c0.474,0,0.534,0.417,0.593,0.831c0.059,0.652,0.059,1.541,0.356,2.37
	c1.066,3.852,4.327,5.454,7.704,5.454c4.741,0,6.876-2.905,6.876-5.513c0-2.37-0.711-4.623-5.097-7.822l-2.489-1.898
	c-5.868-4.444-7.764-7.822-7.764-11.971c0-5.572,4.8-9.721,12.209-9.721c2.371,0,3.793,0.297,5.275,0.535
	c0.829,0.118,1.541,0.297,2.133,0.354c0.475,0.061,0.593,0.297,0.593,0.652c0,0.831-0.237,2.252-0.237,6.283
	c0,1.126-0.178,1.541-0.593,1.541c-0.356,0-0.534-0.356-0.593-1.008c-0.06-0.651-0.415-2.073-1.186-3.2
	c-0.888-1.364-2.548-2.667-5.927-2.667c-3.911,0-6.163,2.134-6.163,5.037c0,2.193,1.066,4.149,5.334,7.054l1.66,1.126
	c6.638,4.505,8.771,8.001,8.771,12.802c0,3.082-1.304,6.578-5.097,8.948c-2.667,1.6-5.69,2.015-8.416,2.015
	C259.095,78.21,256.723,77.854,254.471,76.907z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-05" class="fill" style="fill:#3A3A3A;" d="M293.552,54.03c0-7.706,0-8.891-0.118-10.55c-0.119-1.661-0.652-2.49-1.779-2.728
	c-0.534-0.118-1.185-0.177-1.837-0.236c-0.534,0-0.83-0.179-0.83-0.594c0-0.297,0.356-0.474,1.186-0.474
	c2.073,0,5.63,0.177,6.934,0.177c1.185,0,4.682-0.177,6.697-0.177c0.711,0,1.008,0.177,1.008,0.474c0,0.415-0.297,0.594-0.83,0.594
	c-0.533,0.059-0.77,0.059-1.363,0.179c-1.422,0.236-1.838,1.124-1.956,2.844c-0.178,1.6-0.178,2.785-0.178,10.491v8.889
	c0,4.742,0.059,8.593,0.296,10.727c0.119,1.364,0.534,2.431,2.074,2.608c0.77,0.177,1.482,0.177,2.252,0.238
	c0.652,0,0.889,0.297,0.889,0.533c0,0.356-0.415,0.533-1.007,0.533c-3.497,0-6.876-0.177-8.12-0.177
	c-1.007,0-4.564,0.177-6.638,0.177c-0.711,0-1.067-0.177-1.067-0.533c0-0.236,0.237-0.533,0.889-0.533
	c0.711-0.061,1.126-0.061,1.6-0.179c1.008-0.236,1.482-1.126,1.601-2.549c0.296-2.132,0.296-5.926,0.296-10.845V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-06" class="fill" style="fill:#3A3A3A;" d="M338.576,62.919c0,4.505,0,8.475,0.237,10.668c0.178,1.364,0.474,2.49,2.074,2.667
	c0.71,0.12,1.778,0.177,2.548,0.238c0.593,0,0.889,0.236,0.889,0.474c0,0.356-0.356,0.592-1.067,0.592
	c-3.437,0-7.053-0.177-8.357-0.177c-1.185,0-4.8,0.177-6.816,0.177c-0.711,0-1.066-0.236-1.066-0.592
	c0-0.238,0.237-0.474,0.888-0.474c0.711-0.061,1.304-0.061,1.779-0.179c1.126-0.236,1.422-1.303,1.6-2.785
	c0.237-2.134,0.237-5.928,0.237-10.609V42.413c-1.956,0-5.868,0-8.238,0.177c-3.023,0.238-3.912,0.476-4.624,1.779
	c-0.355,0.652-0.474,1.067-0.711,1.661c-0.119,0.354-0.297,0.592-0.593,0.592c-0.356,0-0.475-0.297-0.475-0.888
	c0.059-1.067,1.007-5.277,1.126-5.928c0.119-0.711,0.297-1.067,0.593-1.067c0.415,0,0.889,0.474,2.193,0.592
	c1.422,0.179,3.555,0.297,5.334,0.297h20.98c1.66,0,2.786-0.177,3.556-0.297c0.77-0.118,1.186-0.236,1.482-0.236
	c0.356,0,0.415,0.297,0.415,1.185c0,1.008-0.237,4.682-0.237,5.986c-0.059,0.533-0.178,0.829-0.534,0.829
	c-0.415,0-0.474-0.297-0.534-1.008c0-0.177-0.059-0.415-0.059-0.651c-0.119-1.364-1.363-2.728-5.749-2.785
	c-1.423-0.12-3.615-0.179-6.875-0.238V62.919z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-07" class="fill" style="fill:#3A3A3A;" d="M370.135,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
	c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
	c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
	c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
	c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
	c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
	c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
	c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
	c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
	c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
	c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
	c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
	c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
	c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
	c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
	c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-08_00000084499578657878502800000017466474858017815451_" class="fill" style="fill:#3A3A3A;" d="M408,78v-9h9v9H408z" /&gt;
&nbsp; &nbsp; &lt;/svg&gt;
&nbsp; &lt;/div&gt;


&nbsp; &lt;div class="main" id="loadingOut"&gt;
&nbsp; &nbsp; &lt;p&gt;ローディング後に表示されるページ&lt;/p&gt;
&nbsp; &lt;/div&gt;
&lt;/body&gt;</code></pre><h2 id="hb704ab42a8">SCSS</h2><pre><code>/**scss**/

.loading__svg {
&nbsp; background-color: #fcfcfc;
&nbsp; width: 100%;
&nbsp; height: 100vh;
&nbsp; position: relative;
&nbsp; #svg__logo {
&nbsp; &nbsp; position: absolute;
&nbsp; &nbsp; top: 50%;
&nbsp; &nbsp; left: 50%;
&nbsp; &nbsp; transform: translate(-50%, -50%);
&nbsp; &nbsp; width: 60%;
&nbsp; &nbsp; min-width: 200px;
&nbsp; &nbsp; height: auto;
&nbsp; }
&nbsp; #loading__svg,
&nbsp; .fill {
&nbsp; &nbsp; fill: transparent;
&nbsp; &nbsp; stroke-width: 1px;
&nbsp; &nbsp; stroke: #3a3a3a;
&nbsp; }
}


#loadingOut {
&nbsp; width: 100%;
&nbsp; text-align: center;
&nbsp; height: 100vh;
&nbsp; background-color: #000;
&nbsp; p {
&nbsp; &nbsp; padding-top: 50vh;
&nbsp; &nbsp; font-size: 16px;
&nbsp; &nbsp; color: #fff;
&nbsp; &nbsp; margin: 0;
&nbsp; }
}</code></pre><h2 id="hd148c32f21">JavaScript</h2><pre><code>/**js**/

const logo = document.getElementById("svg__logo");//定数にid:svg__logoを定義します

window.onload = function () {&nbsp; &nbsp; &nbsp;//画面を読み込み後にアニメーションを始める
&nbsp; let timeline = anime.timeline({&nbsp; &nbsp;//timelineは、複数のアニメーションを同期させることができる。デフォルトでは、前のアニメーションが終了次第次のアニメーションが始まる&nbsp;
&nbsp; &nbsp; targets: ".fill",&nbsp; &nbsp; &nbsp; //アニメーションをかける要素を指定
&nbsp; &nbsp; direction: "normal",&nbsp; &nbsp;//アニメーションの方向を指定
&nbsp; &nbsp; loop: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //アニメーションをループさせるかどうか
&nbsp; });
&nbsp; //線画のアニメーション
&nbsp; timeline.add({
&nbsp; &nbsp; strokeDashoffset: [anime.setDashoffset, 0],&nbsp; &nbsp; //svg画像に線画アニメーションを指定する
&nbsp; &nbsp; easing: "easeInOutSine",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//アニメーションスピードの緩急
&nbsp; &nbsp; fill: ["transparent", "transparent"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; duration: 400,
&nbsp; &nbsp; delay: function (el, i) {
&nbsp; &nbsp; &nbsp; return i * 250;
&nbsp; &nbsp; }
&nbsp; });
&nbsp; //塗りつぶしアニメーション
&nbsp; timeline.add(
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; easing: "easeInOutSine",
&nbsp; &nbsp; &nbsp; fill: ["transparent", "#3a3a3a"],
&nbsp; &nbsp; &nbsp; duration: 700
&nbsp; &nbsp; },
&nbsp; &nbsp; "-=200"
&nbsp; );
};


//ローディング画面を〜秒後にフェードアウトさせる
$(function () {
&nbsp; $("#loadingOut").css("display", "none");//ローディング後に表示されるページの消しておきます


&nbsp; setTimeout(function () {
&nbsp; &nbsp; $("#loading").fadeOut();
&nbsp; }, 2600); //2.6秒後にローディング画面をフェードアウトさせます
});


//ローディング終了後にページを表示させる
$(function () {
&nbsp; $("#loadingOut").css({ opacity: "0" });　//ローディング後に表示させるページを見えなくしておきます
&nbsp; setTimeout(function () {
&nbsp; &nbsp; $("#loadingOut").css("display", "block");
&nbsp; &nbsp; $("#loadingOut").stop().animate({ opacity: "1" }, 1000);
&nbsp; }, 2600); //ローディング終了後にページを表示させる
});</code></pre><p><br></p>

anime.jsを使用した、SVG画像の線画アニメーションをローディング画面と一緒に実装しました。anime.jsは軽量なアニメーションライブラリです。また、SVG画像の線画アニメーションもアレンジを加えることで沢山の種類のアニメーションを実装することができます。

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

<p>モーダルウィンドウ内で画像のスライドショーを実装する【Colorbox】についてまとめました。</p><p>Colorboxはモーダルウィンドウを簡単に実装できるプラグインになります。</p><p>まずは、簡単なデモを作りました。</p><p><a href="https://ippei-log.conohawing.com/demo/demo-colorbox/" target="_blank" rel="noopener noreferrer">デモページはこちら</a></p><h2 id="hb04428dbc6">公式サイトからファイルをダウンロードする</h2><p>Colorboxの公式サイトから必要なファイルを一式ダウンロードします。</p><p>そして、今回はその中から</p><p><strong>・jquery.colorbox-min.js</strong></p><p><strong>・colorbox.css</strong></p><p>を制作中のディレクトリ内へ配置します。</p><p><a href="https://www.jacklmoore.com/colorbox/" target="_blank" rel="noopener noreferrer">Colorbox公式サイトはこちら</a></p><h2 id="h1ccf1bfca3">各ファイル読み込み</h2><p>jQueryを使用するので、CDNで読み込んでいます。</p><p>&lt;link rel="stylesheet" href="css/colorbox.css"&gt;</p><pre><code>//***html***//

&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;</code></pre><h2 id="hd0e9724409">HTML</h2><p>aタグのhrefにモーダルで表示させたい画像のパスを記入します。また、aタグにclassを指定しそのクラスにオプションをつけていきます。このクラスごとにモーダル内でスライドショーに出る画像が決まります。</p><pre><code>/**html**/

&lt;body&gt;
&nbsp;&lt;div class="gallery_area"&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/luca-bravo-VowIFDxogG4-unsplash.jpg"&gt;&lt;img src="images/luca-bravo-VowIFDxogG4-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg"&gt;&lt;img src="images/sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/srinivasan-venkataraman-9NmYCjfBGp0-unsplash.jpg"&gt;&lt;img src="images/srinivasan-venkataraman-9NmYCjfBGp0-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/staircase-g0f6d8865e_640.jpg"&gt;&lt;img src="images/staircase-g0f6d8865e_640.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&lt;/div&gt;
&lt;/body&gt;</code></pre><h2 id="hd148c32f21">JavaScript</h2><p>先ほどaタグにつけたクラスに対して、Colorboxのオプションをつけていきます。今回は、レスポンシブに対応するために、</p><p>・maxWidth:"90%", maxHeight:"90%"</p><p>画像をクリックしてモーダルが表示させるまでの時間を、</p><p>・speed:100</p><p>モーダルを固定するために、</p><p>・fixed:true</p><p>を使用しています。</p><p><a href="https://cly7796.net/blog/javascript/plugin-jquery-colorbox/" target="_blank" rel="noopener noreferrer">その他オプションはこちら</a></p><pre><code>//**モーダルウィンドウ**//
$(document).ready(function(){
&nbsp;$(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%",speed:100,fixed:true});
&nbsp;});</code></pre><h2 id="hc0b6caf95e">colorbox.css</h2><p>既存のCSSをかなりアレンジしてあります。ダウンロードしたファイル内のimagesファイルにある画像を使用すれば、矢印やクローズアイコンなどはそのまま使用可能です。</p><p>今回は、自分で制作したアイコンを使用しています。</p><pre><code>/*
&nbsp;&nbsp;Colorbox Core Style:
&nbsp;&nbsp;The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;background-color:#000000e3;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*&nbsp;
&nbsp;&nbsp;User Style:
&nbsp;&nbsp;Change the following styles to modify the appearance of Colorbox.&nbsp;They are
&nbsp;&nbsp;ordered &amp; tabbed in a way that represents the nesting of the generated HTML.
*/
#colorbox{outline:0;}
&nbsp;&nbsp;&nbsp;&nbsp;.cboxIframe{background:#fff;}
#cboxCurrent{display:none;}

&nbsp;&nbsp;&nbsp;&nbsp;/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
&nbsp;&nbsp;&nbsp;&nbsp;#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
&nbsp;&nbsp;&nbsp;&nbsp;#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

&nbsp;&nbsp;&nbsp;&nbsp;#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious {
	position: absolute;
	top: 50%;
	left:-80px;
	transform: translatey(-50%);
	width: 55px;
	height: 90px;
	background-image: url(../images/yazirushi.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#cboxNext {
	position: absolute;
	top: 50%;
	right:-80px;
	transform: translatey(-50%) rotate(180deg);
	width: 55px;
	height: 90px;
	background-image: url(../images/yazirushi.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#cboxClose {
	position: absolute;
	top: 0;
	right:-80px;
	width: 60px;
	height: 60px;
	background-image: url(../images/close.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

/*
&nbsp;The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
&nbsp;when an alpha filter (opacity change) is set on the element or ancestor element.&nbsp;This style is not applied to or needed in IE9.
&nbsp;See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
&nbsp;&nbsp;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media screen and (max-width: 1000px) {
	#cboxPrevious {
		left:0px;
	}
	#cboxNext,#cboxClose {
		right: 0px;
	}
	#cboxClose {
		top: -65px;
	}&nbsp;
}</code></pre><p><br></p><p><br></p><p><br></p><p><br></p>

モーダルウィンドウ内で画像のスライドショーを実装する【Colorbox】についてまとめました。
Colorboxはモーダルウィンドウを簡単に実装できるプラグインになります。

Frontend Engineer Tech Blog

Reactでログインフォームを実装（フロントのみ）

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

【Locomotive Scroll】と【GSAP】を使用してパララックスサイトを制作してみた

GSAPのScrollTriggerを使用してスクロールアニメーションを実装してみた

JavaScriptでWeb制作でよく使用するパーツを実装してみた

【CSSのhoverアクション】cubic-bezierでなめらかでおしゃれなhoverアクション

【全画面ハンバーガーメニュー】メニューが下から順番にでてくるアニメーション付き

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

【Colorbox】モーダルウィンドウ内で画像のスライドショーを実装できる

React

GSAP

CSS

jQuery

Javascript

Reactでログインフォームを実装（フロントのみ）

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

【Locomotive Scroll】と【GSAP】 を使用してパララックスサイトを制作してみた

GSAPのScrollTriggerを使用してスクロールアニメーションを実装してみた

JavaScriptでWeb制作でよく使用するパーツを実装してみた

【CSSのhoverアクション】cubic-bezierでなめらかでおしゃれなhoverアクション

【全画面ハンバーガーメニュー】メニューが下から順番にでてくるアニメーション付き

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

【Colorbox】モーダルウィンドウ内で画像のスライドショーを実装できる

React

GSAP

CSS

jQuery

Javascript

【Locomotive Scroll】と【GSAP】を使用してパララックスサイトを制作してみた