Merge pull request #17 from yuki540net/feature/profile-page

Feature/profile page

public/index.html

@@ -333,7 +333,7 @@
         </section>
       </section>
       <!--********************************** top-page ***************************************-->
-      <section class="top-page">
+      <section class="top-page" data-state="start">
         <section class="top-page__ring">
           <div class="wrap">
             <div class="inner">
@@ -357,12 +357,12 @@
         <section class="top-page__global-nav">
           <nav class="nav-box">
             <section>
-              <a data-color="pink" href="#">私について</a>
+              <a data-href="profile-page" data-color="pink" href="#">私について</a>
-              <a data-color="light-pink" href="#">思い出</a>
+              <a data-href="memories-page" data-color="light-pink" href="#">思い出</a>
             </section>
             <section>
-              <a data-color="light-purple" href="#">このサイトの歴史</a>
+              <a data-href="history-page" data-color="light-purple" href="#">このサイトの歴史</a>
-              <a data-color="purple" href="#">作ったもの</a>
+              <a data-href="product-page" data-color="purple" href="#">作ったもの</a>
             </section>
           </nav>
           <div class="message"><h3>ようこそ、魔法少女サイトへ</h3></div>
@@ -384,6 +384,66 @@
           </a>
         </section>
       </section>
+      <!--********************************** page-box ***************************************-->
+      <section class="page-box">
+        <section class="page-box__bg"><div></div><div></div></section>
+        <a class="page-box__close-btn" href="#">
+          <section></section>
+          <section><div></div></section>
+        </a>
+        <article class="page-box__content">
+
+          <!--**** profile ****-->
+          <section class="profile-page" style="display: none">
+            <section class="page-title">
+              <div></div><div></div><div></div><div></div>
+              <h2>私について</h2>
+            </section>
+            <section class="profile-page__body">
+              <div class="icon"><div></div><div></div><div></div><div></div></div>
+              <h3 class="name">yuki540</h3>
+              <div class="info">
+                <div class="info-li">
+                  <span>Location</span><span>：</span><span>Wakayama, Japan</span>
+                </div>
+                <div class="info-li">
+                  <span>Birthday</span><span>：</span><span>1996/11/09</span>
+                </div>
+                <div class="info-li">
+                  <span>Job</span><span>：</span><span>ニート（通う理由がなく、専門学校退学した）</span>
+                </div>
+                <div class="info-li">
+                  <span>Love</span><span>：</span><span>アニメ, 由比ヶ浜結衣, ミライアカリ, ココロヤミ</span>
+                </div>
+              </div>
+            </section>
+          </section>
+          
+          <!--**** history ****-->
+          <section class="history-page" style="display: none">
+            <section class="page-title">
+              <div></div><div></div><div></div><div></div>
+              <h2>このサイトの歴史</h2>
+            </section>
+          </section>
+          
+          <!--**** product ****-->
+          <section class="product-page" style="display: none">
+            <section class="page-title">
+              <div></div><div></div><div></div><div></div>
+              <h2>作ったもの</h2>
+            </section>
+          </section>
+          
+          <!--**** memories ****-->
+          <section class="memories-page" style="display: none">
+            <section class="page-title">
+              <div></div><div></div><div></div><div></div>
+              <h2>思い出</h2>
+            </section>
+          </section>
+        </article>
+      </section>
     </main>
     <script type="text/javascript" src="./scripts/app.min.js"></script>
   </body>

src/scripts/app.js

@@ -9,6 +9,7 @@ import './components/app.tag'
 // init
 util.setRingSize()
 util.bindNav()
+util.bindCloseBtn()
 
 // loading
 util.startLoading(() => {

src/scripts/lib/util.js

@@ -10,6 +10,7 @@ const end_animation            = document.querySelector('.end-animation')
 const end_animation__end       = document.querySelector('.end-animation .window img')
 const top_page                 = document.querySelector('.top-page')
 const top_page__wrap           = document.querySelector('.top-page .wrap')
+const page_box                 = document.querySelector('.page-box')
 
 /**
  * 画像のプリロード
@@ -68,7 +69,7 @@ export const setRingSize = () => {
 }
 
 /**
- * ナビゲーションボタンホバー時のイベント監視
+ * ナビゲーションボタンの各イベント監視
  */
 export const bindNav = () => {
   const navs = document.querySelectorAll('.top-page__global-nav a')
@@ -84,6 +85,25 @@ export const bindNav = () => {
     nav.addEventListener('mouseout', e => {
       top_page.setAttribute('data-color', '')
     })
+    
+    /* click ----------------------------------------------------- */
+    nav.addEventListener('click', e => {
+      e.preventDefault()
+      const state = !(page_box.getAttribute('data-state') === 'true')
+      page_box.setAttribute('data-state', state)
+    })
+  })
+}
+
+/**
+ * ページを閉じるボタンのイベント監視
+ */
+export const bindCloseBtn = () => {
+  const close_btn = document.querySelector('.page-box__close-btn')
+  
+  close_btn.addEventListener('click', e => {
+    e.preventDefault()
+    page_box.setAttribute('data-state', 'false')
   })
 }
 

src/scss/keyframes/pc/_page-box.scss

@@ -0,0 +1,22 @@
+@keyframes page-box__show {
+  from { transform: rotate(90deg); }
+  to   { transform: rotate(0deg); }
+}
+@keyframes page-box__hidden {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-90deg); }
+}
+
+@keyframes page-box__show-close-btn {
+  from { transform: translate(calc(100% + 20px), calc(-100% + -20px)); }
+  to   { transform: translate(0, 0); }
+}
+@keyframes page-box__rotate-close-btn {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(15deg); }
+}
+
+@keyframes page-box__show-content {
+  from { transform: scale(0.9); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}

src/scss/modules/pc/_page-box.scss

@@ -0,0 +1,165 @@
+@include pc-layout {
+  .page-box {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-pink;
+    transform-origin: right top;
+    transform: rotate(90deg);
+    overflow: hidden;
+    z-index: 1002;
+  }
+
+  /*** bg ***/
+  .page-box__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      transform-origin: right top;
+      transform: rotate(90deg);
+    }
+    div:nth-child(1) {
+      background-color: $theme-light-pink;
+    }
+    div:nth-child(2) {
+      background-color: $theme-bg;
+      
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-size: 15px;
+        background-image: url(../images/bg.png);
+        opacity: 0.4;
+      }
+    }
+  }
+
+  /*** content ***/
+  .page-box__content {
+    position: absolute;
+    top: 40px; left: 40px;
+    width: calc(100% - 80px); height: calc(100% - 80px);
+    border: solid 10px $theme-pink;
+    box-sizing: border-box;
+    background-color: $theme-bg;
+    border-radius: 15px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.6) inset;
+    overflow: auto;
+    opacity: 0;
+    transition: all 0.35s ease 0s;
+
+    .page-title {
+      position: relative;
+      margin: 50px auto;
+      width: 600px; height: 45px;
+
+      div {
+        position: absolute;
+        right: 0; top: 0;
+        height: 100%;
+      }
+      div:nth-child(1) { width: 100%; background-color: $theme-gray; }
+      div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; }
+      div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; }
+      div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; }
+
+      h2 {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 45px;
+        font-size: 20px;
+        color: #fff;
+        text-align: center;
+        line-height: 45px;
+      }
+    }
+  }
+
+  /*** close-btn ***/
+  .page-box__close-btn {
+    position: absolute;
+    top: 10px; right: 10px;
+    width: 100px; height: 100px;
+    display: block;
+    transform: translate(calc(100% + 20px), calc(-100% + -20px));
+    z-index: 5;
+
+    section {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      box-shadow: 0 0 5px rgba(0,0,0,0.4);
+      border-radius: 3px;
+      transition: all 0.35s ease 0s;
+    }
+    section:nth-child(1) {
+      background-color: $theme-pink;
+      transform: rotate(0deg);
+    }
+    section:nth-child(2) {
+      background-color: $theme-bg;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 49px; left: 20px;
+        width: 60px; height: 1px;
+        border-top: dashed 2px $theme-purple;
+        box-sizing: border-box;
+        opacity: 0.7;
+      }
+      &::before { transform: rotate(45deg); }
+      &::after  { transform: rotate(-45deg); }
+    }
+  }
+  .page-box__close-btn:hover {
+    section:nth-child(1) { background-color: $theme-purple; }
+    section:nth-child(2) { background-color: #eee; }
+  }
+  .page-box__close-btn:hover ~ .page-box__content { border-color: $theme-purple; }
+
+  .page-box[data-state="true"] {
+    animation: page-box__show 0.35s ease 0s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div:nth-child(1) { animation: page-box__show 0.35s ease 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__show 0.35s ease 0.2s forwards; }
+    }
+
+    /*** content ***/
+    .page-box__content {
+      animation: page-box__show-content 0.6s ease 0.55s forwards;
+    }
+
+    /*** close-btn ***/
+    .page-box__close-btn {
+      animation: page-box__show-close-btn 0.6s ease 0.9s forwards;
+      section:nth-child(1) { animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
+    }
+  }
+  
+  .page-box[data-state="false"] {
+    transform: rotate(0deg);
+    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div { transform: rotate(0deg); }
+      div:nth-child(1) { animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
+    }
+    
+    /*** content ***/
+    .page-box__content,
+    .page-box__close-btn {
+      animation: fadeout 0.2s ease 0s forwards;
+    }
+  }
+}

src/scss/modules/pc/_profile.scss

@@ -0,0 +1,84 @@
+@include pc-layout {
+  .profile-page {}
+
+  /*** body ***/
+  .profile-page__body {
+    width: 600px;
+    margin: 0 auto;
+
+    .icon {
+      position: relative;
+      width: 150px; height: 150px;
+      margin: 0 auto;
+      border: solid 5px $theme-purple;
+      background-color: $theme-purple;
+      border-radius: 50%;
+      box-sizing: border-box;
+
+      &:after {
+        position: absolute;
+        top: 0; left: 0;
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        border-radius: 50%;
+        background-image: url(../images/profile/yuki540.png);
+        background-size: cover;
+        background-position: center;
+      }
+
+      div {
+        position: absolute;
+        background-color: $theme-purple;
+      }
+      div:nth-child(1) { width: 25px; height: 100px; left: 0; bottom: -5px; border-radius: 20px; }
+      div:nth-child(2) { width: 10px; height: 80px; left: 40px; bottom: -10px; border-radius: 4px; }
+      div:nth-child(3) { width: 18px; height: 80px; left: calc(50% - 6px); bottom: -50px; border-radius: 10px; }
+      div:nth-child(4) { width: 12px; height: 80px; right: 0px; bottom: -3px; border-radius: 8px; }
+    }
+
+    .name {
+      margin: 0 auto;
+      margin-top: 60px;
+      width: 150px; height: 40px;
+      border-left: solid 15px $theme-purple;
+      background-color: #fff;
+      padding: 0 5px;
+      box-shadow: 0 0 5px rgba(0,0,0,0.4);
+      font-size: 25px;
+      color: #555;
+      font-weight: bold;
+      text-align: center;
+      line-height: 40px;
+      transform: rotate(-5deg);
+    }
+
+    .info {
+      margin: 0 auto;
+      margin-top: 40px;
+
+      .info-li {
+        position: relative;
+        width: 400px;
+        padding: 0 10px;
+        margin: 0 auto;
+        margin-bottom: 15px;
+        border-bottom: solid 1px $theme-light-pink;
+        
+        span {
+          font-size: 12px;
+          color: $theme-light-purple;
+          margin-right: 5px;
+        }
+
+        &::after {
+          position: absolute;
+          left: -15px; bottom: -5px;
+          content: ""; display: block;
+          width: 10px; height: 10px;
+          background-color: $theme-light-pink;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}

src/scss/modules/pc/_top-page.scss

@@ -5,7 +5,7 @@
     width: 100%; height: 100%;
     background-color: $theme-bg;
     overflow: hidden;
-    z-index: 996;
+    z-index: 1001;
 
     &::after {
       content: ""; display: block;
@@ -319,6 +319,7 @@
     transform: translateX(calc(100% + 5px));
     overflow: hidden;
     z-index: 1;
+    transition: all 0.3s ease 0s;
 
     a {
       position: relative;
@@ -329,11 +330,15 @@
       text-align: center;
       line-height: 50px;
       color: $theme-purple;
-      background-color: $theme-mint;
+      transition: all 0.3s ease 0s;
 
       i { font-size: 20px; margin-right: 5px; }
     }
   }
+  .top-page__share-btn:hover {
+    a { color: #fff; }
+    background-color: $theme-pink;
+  }
 
   .top-page[data-state="start"] {
     /*** ring ***/