日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は自分が作成した１カラムＷＥＢデザインのオリジナルサンプルを紹介します。

（※練習で作成したデザインなので、機能性は乏しいかもしれません…）

###テーマ：javascript の動的制御で１カラムの背景ウインドウに複数の animation プロパティを適用し、複数の役割を与える。

####記述サンプル

今回はHTMLファイルに全ての記述を行うので、コードをそのままコピペするだけで、実際の動作を確認出来るようにしました。

HTML

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <style>

    * {
      margin: 0;
    }

    #screen {
      background-color: rgba(15,15,15,0.9);
      border-radius: 20px;
      min-height: 95%;
      max-width: 750px;
      position: fixed;
      top: 50%;
      right: 50%;
      z-index: 0;
      transform: translate(50%, -50%);
      -webkit-transform: translate(50%, -50%);
      animation: start 1s ease 1s 1 normal forwards running;
      -webkit-animation: start 1s ease 1s 1 normal forwards running;
    }

    @keyframes start {
      0% {
        width: 0;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
      }
      100% {
        width: 90%;
        box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      }
    }

    @-webkit-keyframes start {
      0% {
        width: 0;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
      }
      100% {
        width: 90%;
        box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      }
    }

    #hide_start {
      color: #fff;
      pointer-events: none;
      margin: auto;
      opacity: 0;
      width: 90%;
      max-width: 750px;
      position: relative;
      top: 40px;
      animation: show 1s 2s forwards;
      -webkit-animation: show 1s 2s forwards;
    }

    @keyframes show {
      100% {
        opacity: 1;
        pointer-events: unset;
      }
    }

    @-webkit-keyframes show {
      100% {
        opacity: 1;
        pointer-events: unset;
      }
    }

    #button_1 {
      cursor: pointer;
      position: fixed;
      right: calc(5% + 20px);
      z-index: 2;
      border-radius: 10px;
      transition: all 1s 0s ease;
      -webkit-transition: all 1s 0s ease;
    }

    #button_1.menu {
      right: calc(2% + 20px);
    }

    #screen.open {
      box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      animation: menu_o 1s ease 0s 1 normal forwards running;
      -webkit-animation: menu_o 1s ease 0s 1 normal forwards running;
    }
    
    #screen.close {
      box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      animation: menu_c 1s ease 0s 1 normal forwards running;
      -webkit-animation: menu_c 1s ease 0s 1 normal forwards running;
    }

    @keyframes menu_o {
      0% {
        width: 90%;
      }    
      100% {
        width: 60%;
        right: 20px;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
      }
    }
    
    @-webkit-keyframes menu_o {
      0% {
        width: 90%;
      }    
      100% {
        width: 60%;
        right: 20px;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
      }
    }
    
    @keyframes menu_c {
      0% {
        width: 60%;
        right: 20px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
      }
      100% {
        width: 90%;
        right: 50%;
        transform: translate(50%, -50%);
        -webkit-transform: translate(50%, -50%);
      }
    }

    @-webkit-keyframes menu_c {
      0% {
        width: 60%;
        right: 20px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
      }
      100% {
        width: 90%;
        right: 50%;
        transform: translate(50%, -50%);
        -webkit-transform: translate(50%, -50%);
      }
    }
    
    #menu {
      box-sizing: border-box;
      opacity: 1;
      padding-left: 1em;
      position: fixed;
      right: 20px;
      width: 60%;
      max-width: 750px;
      transition: all .5s;
      -webkit-transition: all .5s;
    }
    
    #menu.none {
      opacity: 0;
      pointer-events: none;
    }

    #content {
      box-sizing: border-box;
      padding: 0 1em;
      margin: auto;
      position: relative;
      transition: all .5s;
      -webkit-transition: all .5s;
    }

    #content.none {
      opacity: 0;
      pointer-events: none;
    }

  @media(min-width: 850px) {
  /* PC設定 */

    #screen {
      animation: start 1.5s ease 1s 1 normal forwards running;
      -webkit-animation: start 1.5s ease 1s 1 normal forwards running;    
    }
    
    #button_1 {
      right: calc(50% - 360px);
    } 

  }
  </style>
  <body id="" class="">
    <div id="screen" class=""></div>
    <div id="hide_start">
      <button type="button" id="button_1" class="">〇</button>
      <nav id="menu" class="none">
        <h2>MENU</h2>
      </nav>
      <main id="content">
        <h1>CONTENTS</h1>
      </main>
    </div>
  </body>
  <script type="text/javascript">
    jQuery(document).ready(function(){
    
      $("#button_1").click(function() {
        if($("#menu").hasClass("none")) {
          $("#screen").removeClass("close");
          $("#screen").addClass("open");
        } else {
          $("#screen").removeClass("open");
          $("#screen").addClass("close");
        }
        $("#button_1").toggleClass("menu");
        $("#menu").toggleClass("none");
        $("#content").toggleClass("none");
      });

    });
  </script>
</html>

###解説

１・サイトコンテンツの背景となるウインドウ部分を空の div タグ #screen で記述。
↓
２・javascript の動的制御で #screen にクラスを付け替える事で、transition や複数の animation プロパティを付け替え、メインコンテンツやサイドメニューの背景ウインドウに可変される。
↓
３・後はサイト全体の表示が整うように色々書き加えていく…

文章としては以上になるのですが、実際に記述してみようとすると、最低限の情報量でも想像していた以上に実装に苦労しました。

実際の動作が気になる方は、テキストデータを丸ごとコピペして確かめてみましょう…！
（簡素な作りですが、感想、アドバイスなどあれば頂けると幸いです）

今回はこれで以上になります。

あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。