Cara membuat Modal Interaction with Genie Effect dengan HTML, CSS dan JS - Lelluzec

Rabu, 18 Maret 2020

Cara membuat Modal Interaction with Genie Effect dengan HTML, CSS dan JS

Modal Dialog adalah jendela yang memaksa pengguna untuk berinteraksi dengannya sebelum mereka dapat kembali menggunakan aplikasi induk. Contoh yang bagus dari ini adalah prompt untuk menyimpan, atau dialog "file terbuka".

Mereka sering digunakan ketika pengguna dipaksa untuk membuat keputusan penting. Katakanlah Anda sedang mengerjakan dokumen di Microsoft Word, dan Anda memilih untuk keluar dari Word sebelum menyimpan. Dialog modal akan muncul dan meminta Anda untuk Simpan, Jangan Simpan, atau Batal. Sampai Anda membuat keputusan, Anda tidak dapat menggunakan aplikasi, dan itu tidak akan ditutup.

Modal Dialog harus digunakan ketika pengguna mengambil tindakan yang membutuhkan informasi tambahan untuk dilengkapi dengan benar. Dialog cetak, juga merupakan contoh yang baik. Atau dialog 'opsi' dalam banyak program.

Kapan menggunakan dialog modal agak sulit untuk didefinisikan, tetapi bagi saya itu harus digunakan dengan hemat, dan dihindari sebisa mungkin. Lihatlah contoh Fraser tentang pemuat gambar Facebook ... itu tidak perlu karena dapat dilakukan secara tidak sinkron.

Rule of thumb: setiap kali informasi tambahan diperlukan untuk menyelesaikan suatu tindakan.

Kali ini admin akan memberikan source code Modal Interaction with Genie Effect by Bhakti Al Akbar

HTML:
<div class="main-ctr">
<svg height="620" viewbox="0 0 540 620" width="540" xmlns="http://www.w3.org/2000/svg">
    <g fill-rule="evenodd" fill="none" id="Page-1">
      <g id="modal-with-genie-effect">
        <path d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z" id="step-3" opacity=".504" stroke="#979797">
        <path d="M270.136 122h237.356c2.758 0 4.36 2.15 3.577 4.8 0 0-23.333 86.246-92.842 174.822-69.51 88.575-66.458 185.37-66.458 185.37-.033 2.776-2.25 5.008-5.01 5.008H193.51c-2.76 0-4.977-2.232-5.01-5.008 0 0 3.05-96.795-66.458-185.37C52.534 213.046 29.202 126.8 29.202 126.8c-.783-2.65.82-4.8 3.578-4.8h237.356z" id="step-2" opacity=".5" stroke="#979797">
        <path d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z" id="step-0" stroke="#979797">
        <path d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z" fill="#FFF" id="element">
        <g id="open-modal-ctr">
          <path d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z" fill="#FFF" id="open-modal-btn">
          <text fill="#7E7878" font-family="Roboto" font-size="16" font-weight="260" id="text" transform="translate(185 556)">
            <tspan x="41.797" y="27">Open Modal</tspan>
          </text>
        </path></g>
        <g font-family="Roboto" id="word">
          <text fill="#434343" font-size="20" id="title" transform="translate(20 124)">
            <tspan x="93.713" y="19">Modal Interaction with Genie Effect</tspan>
          </text>
          <text fill="#7E7878" font-size="16" font-weight="260" id="paragraf" transform="translate(20 124)">
            <tspan x="100.457" y="59">Inspired by Mac OS X minimize interaction.</tspan> <tspan x="120.609" y="84">Built with SVG and Greensock Plugin.</tspan>
          </text>
        </g>
        <g id="close" transform="translate(486 36)">
          <circle cx="10" cy="10" fill="#E9413D" id="bg" r="10">
          <path d="M6 6.023l7.99 7.945M13.99 6.023L6 13.968" id="Shape" stroke-linecap="round" stroke="#FFF">
        </path></circle></g>
      </path></path></path></path></g>
    </g>
  </div>

CSS:

html,
body {
  display: table;
  width: 100%;
  height: 100%;
  background: #005C97; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #005C97 , #363795); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #005C97 , #363795); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}

.main-ctr {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#element {
  fill: white;
}

#step-0,
#step-1,
#step-2,
#step-3 {
  opacity: 0;
}

#modal-with-genie-effect #close {
  cursor: pointer;
  position: relative;
  transition: .3s all ease;
  opacity: 1;
}

#modal-with-genie-effect #word {
  transition: .3s all ease;
  opacity: 1;
  position: relative;
}

#modal-with-genie-effect {
  
  &.active {
    #close {
      opacity: 0;
      pointer-events: none;
      transition: .3s all ease .15s;
    }
    
    #word {
      opacity: 0;
      transition: .3s all ease .3s;
    }
  }
}

#open-modal-ctr {
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: .3s all ease;
  
  &.active {
    opacity: 1;
    transition: .3s all ease .1s;
    pointer-events: auto;
  }
}

JS:

var element = document.querySelector("#element"),
    wrapper = document.querySelector("#modal-with-genie-effect"),
    close = document.querySelector("#close"),
    word = document.querySelector("#word"),
    open = document.querySelector("#open-modal-ctr"),
    step0 = "#step-0",
    step2 = "#step-2",
    step3 = "#step-3";

var tl = new TimelineMax();

close.addEventListener("click", function(){

  wrapper.classList.add("active");

  tl
    .to(element, .3, {
      delay: .7,
      y: "-15px",
      scaleY: .9
    })
    .to(element, .3, {
      morphSVG: step2
    })
    .to(element, .3, {
      morphSVG: step3,
    }, "-=.15")
    .to(element, .3, {
      y: "0",
      scaleY: 1,
      onComplete: function(){
        open.classList.add("active");
      }
    }, "-=.15")

});

open.addEventListener("click", function(){
  this.classList.remove("active");

  tl
    .to(element, .3, {
      delay: .45,
      y: "10px",
    })
    .to(element, .3, {
      morphSVG: step2,
    })
    .to(element, .3, {
      morphSVG: step0
    }, "-=.15")
    .to(element, .3, {
      y: "0",
      onComplete: function(){
        wrapper.classList.remove("active");
      }
    }, "-=.3")
});

balapaCop("Modal Interaction with Genie Effect", "rgba(255,255,255,.5)");

Jika kalian malas untuk mengetik, kalian bisa mendownload filenya dibawah ini:

Share with your friends

Give us your opinion