Merge pull request #11 from yuki540net/feature/end-animation

Feature/end animation

public/index.html

@@ -300,6 +300,38 @@
           <div></div><div></div><div></div><div></div><div></div>
         </section>
       </section>
+      <!--********************************** end-animation ***************************************-->
+      <section class="end-animation">
+        <section class="end-animation__end-roll">
+          <div class="text-balls">
+            <div class="text-ball">
+              <div class="inner">
+                <div class="bg">
+                  <div></div><div></div><div></div><div></div><div></div>
+                </div>
+              </div>
+            </div>
+            <div class="text-ball">
+              <div class="inner">
+                <div class="bg">
+                  <div></div><div></div><div></div><div></div><div></div>
+                </div>
+              </div>
+            </div>
+            <div class="text-ball">
+              <div class="inner">
+                <div class="bg">
+                  <div></div><div></div><div></div><div></div><div></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="paints"><div></div><div></div><div></div><div></div></div>
+          <div class="window">
+            <img src="./images/end-animation/end.png" alt="END" />
+          </div>
+        </section>
+      </section>
     </main>
     <script type="text/javascript" src="./scripts/app.min.js"></script>
   </body>

src/scripts/lib/util.js

@@ -6,6 +6,8 @@ const gab_animation = document.querySelector('.gab-animation')
 const gab_animation__end_block = document.querySelector('.gab-animation__close .end-block')
 const calling = document.querySelector('.calling')
 const calling__end = document.querySelector('.calling__end')
+const end_animation = document.querySelector('.end-animation')
+const end_animation__end = document.querySelector('.end-animation .window img')
 
 /**
  * 画像のプリロード
@@ -98,6 +100,18 @@ export const startCalling = () => {
   calling__end.addEventListener('animationend', e => {
     if(e.animationName === 'calling__end') {
       root.removeChild(calling)
+      startEndAnimation()
     }
   })
 }
+
+/**
+ * end-animationの開始
+ */
+export const startEndAnimation = () => {
+  end_animation.setAttribute('data-state', 'start')
+
+  end_animation__end.addEventListener('animationend', e => {
+    root.removeChild(end_animation)
+  })
+}

src/scss/keyframes/pc/_end-animation.scss

@@ -0,0 +1,63 @@
+@keyframes end-animation__show-paint {
+  0%   { opacity: 0; transform: scale(8); border-radius: 50%; }
+  40%  { border-radius: 50%; }
+  100% { opacity: 1; transform: scale(1); border-radius: 0%; }
+}
+
+@keyframes end-animation__end-roll-color-1 {
+  from { background-color: $theme-mint; }
+  to   { background-color: $theme-pink; }
+}
+@keyframes end-animation__end-roll-color-2 {
+  from { background-color: $theme-pink; }
+  to   { background-color: $theme-light-purple; }
+}
+@keyframes end-animation__end-roll-color-3 {
+  from { background-color: $theme-light-purple; }
+  to   { background-color: $theme-purple; }
+}
+@keyframes end-animation__end-roll-color-4 {
+  from { background-color: $theme-purple; }
+  to   { background-color: $theme-light-pink; }
+}
+
+@keyframes end-animation__move-text-ball-1 {
+  from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-1 {
+  0%   { transform: translateY(300px) scale(0); }
+  50%  { transform: translateY(-150px) scale(0.5); }
+  100% { transform: translateY(0px) scale(1); }
+}
+@keyframes end-animation__move-text-ball-2 {
+  from { transform: translateY(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateY(0px) rotate(15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-2 {
+  0%   { transform: translateX(-300px) scale(0); }
+  50%  { transform: translateX(150px) scale(0.5); }
+  100% { transform: translateX(0px) scale(1); }
+}
+
+@keyframes end-animation__move-text-ball-3 {
+  from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-3 {
+  0%   { transform: translateY(-300px) scale(0); }
+  50%  { transform: translateY(150px) scale(0.5); }
+  100% { transform: translateY(0px) scale(1); }
+}
+
+@keyframes end-animation__down-window {
+  0% { transform: translateY(-100%); }
+  60% { transform: translateY(0%); }
+  80% { transform: translateY(-30px); }
+  100% { transform: translateY(0%); }
+}
+@keyframes end-animation__end {
+  0%   { transform: rotateZ(-20deg) rotateX(0deg); opacity: 1; }
+  50%  { opacity: 1; }
+  100% { transform: rotateZ(-20deg) rotateX(90deg); opacity: 0; }
+}

src/scss/modules/pc/_end-animation.scss

@@ -0,0 +1,194 @@
+@include pc-layout {
+  .end-animation {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    overflow: hidden;
+    z-index: 997;
+  }
+
+  /*** end-roll ***/
+  .end-animation__end-roll {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-mint;
+
+    .text-balls {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+
+      .text-ball {
+        position: absolute;
+        width: 180px; height: 180px;
+        border-radius: 50%;
+        opacity: 0;
+
+        .inner {
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-color: #F0EFE7;
+          border-radius: 50%;
+          border: solid 10px #F0EFE7;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          .bg { width: 100%; height: 100%; }
+          .bg div {
+            width: 100%; height: 10%;
+            background-color: #EBC1C7;
+            margin-bottom: 10%;
+            transform: translateX(-100%);
+          }
+
+          &::after {
+            content: ""; display: block;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background-size: 60%;
+            background-position: center;
+            background-repeat: no-repeat;
+            opacity: 0;
+          }
+        }
+      }
+      .text-ball:nth-child(1) {
+        top: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
+      }
+      .text-ball:nth-child(2) {
+        top: 50px; right: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
+      }
+      .text-ball:nth-child(3) {
+        bottom: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
+      }
+    }
+
+    .paints {
+      position: absolute;
+      top: calc(50% - 60px); left: calc(50% - 60px);
+      width: 120px; height: 120px;
+
+      div {
+        float: left;
+        width: calc(50% - 5px); height: calc(50% - 5px);
+        margin-right: 10px;
+        border-radius: 50%;
+        opacity: 0;
+      }
+      div:nth-child(1),
+      div:nth-child(2) { margin-bottom: 10px; }
+      div:nth-child(2n) { margin-right: 0; }
+      div:nth-child(1) { background-color: $theme-pink; }
+      div:nth-child(2) { background-color: $theme-light-purple; }
+      div:nth-child(3) { background-color: $theme-purple; }
+      div:nth-child(4) { background-color: $theme-light-pink; }
+    }
+
+    .window {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background-color: $theme-bg;
+      transform: translateY(-100%);
+      perspective: 1500px;
+
+      img {
+        display: block;
+        height: 200px;
+        position: absolute;
+        bottom: 30px; right: 0px;
+        transform: rotateZ(-20deg);
+      }
+
+      &::before {
+        content: ""; display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background-image: url(../images/bg.png);
+        background-size: 15px;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .end-animation[data-state="start"] {
+    /*** end-roll ***/
+    .end-animation__end-roll {
+      animation:
+        end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
+        end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
+        end-animation__end-roll-color-3 0.5s ease 3s forwards,
+        end-animation__end-roll-color-4 0.5s ease 3.9s forwards;
+
+      .text-balls {
+        .text-ball:nth-child(1) {
+          animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
+            &::after { animation: fadein 0.5s ease 1.6s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
+        }
+        .text-ball:nth-child(2) {
+          animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
+            &::after { animation: fadein 0.5s ease 2.5s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
+        }
+        .text-ball:nth-child(3) {
+          animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
+            &::after { animation: fadein 0.5s ease 3.4s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
+        }
+      }
+
+      .paints {
+        div:nth-child(1) {
+          animation:
+            end-animation__show-paint 0.6s ease 0s forwards,
+            scale0-1 0.5s ease-out 1.2s reverse forwards;
+          }
+        div:nth-child(2) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.2s forwards,
+            scale0-1 0.5s ease-out 2.1s reverse forwards;  
+        }
+        div:nth-child(3) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.4s forwards,
+            scale0-1 0.5s ease-out 3s reverse forwards;  
+        }
+        div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
+      }
+
+      .window {
+        animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
+        img { animation: end-animation__end 0.5s ease 4.7s forwards; }
+      }
+    }
+  }
+}