Popup / 29 モーフィング

デザイン見本

最初は小さなボールのように現れ、空中に飛び出しながら長方形の情報カードへとトランスフォームします。消えるときもボールに戻る、魔法のようなモーションデザインです。

実装コード

HTML

<div id="popup-container-29">
    <button id="popup-btn-29">Morphing</button>
</div>
<div id="popup-29" class="popup-29">
    <div class="popup-content-29">
        <div class="inner-text">
            <p>Morphing Popup</p>
            <p>円形から長方形のカードにトランスフォームするポップアップです。</p>
        </div>
    </div>
</div>

CSS

#popup-btn-29 {
    cursor: pointer;
    border: none;
    padding: 12px 24px;
    border-radius: 16px;
    font-weight: 600;
    display: block;
    margin: 0 auto;
    width: 180px;
    color: #fff; 
    background-color: #ff6b6b;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#popup-btn-29:hover {
    transform: scale(1.05);
    background-color: #ff5252;
}
.popup-29 {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    max-width: 90%;
}
.popup-29.active {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
    transform: translateX(-50%);
    animation: popupShowHide29 3.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes popupShowHide29 {
    0% { opacity: 0; transform: translateX(-50%) translateY(100%); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(100%); }
}
.popup-content-29 {
    background: #ff6b6b;
    text-align: center;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
}
.popup-29.active .popup-content-29 {
    animation: morphShape 3.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes morphShape {
    0% { width: 60px; height: 60px; border-radius: 50%; opacity: 0; }
    10% { width: 60px; height: 60px; border-radius: 50%; opacity: 1; }
    25% { width: 320px; height: auto; padding: 40px; border-radius: 16px; opacity: 1; }
    85% { width: 320px; height: auto; padding: 40px; border-radius: 16px; opacity: 1; }
    95% { width: 60px; height: 60px; border-radius: 50%; padding: 0; opacity: 1; }
    100% { width: 60px; height: 60px; border-radius: 50%; padding: 0; opacity: 0; }
}
.popup-content-29 .inner-text {
    opacity: 0;
    white-space: nowrap;
}
.popup-29.active .popup-content-29 .inner-text {
    animation: fadeInOutText 3.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes fadeInOutText {
    0%, 20% { opacity: 0; transform: translateY(10px); }
    30%, 80% { opacity: 1; transform: translateY(0); }
    85%, 100% { opacity: 0; transform: translateY(-10px); }
}
.popup-content-29 p:first-child {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}
.popup-content-29 p:last-of-type {
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.6;
    white-space: normal;
}

var btn = document.getElementById('popup-btn-29');
var popup = document.getElementById('popup-29');

if (btn && popup) {
  btn.addEventListener('click', function () {
    popup.classList.add('active');
  });

  popup.addEventListener('animationend', function (e) {
    if (e.animationName.startsWith('popupShowHide')) {
      popup.classList.remove('active');
    }
  });
}