パーツ番号 10-04-01 ・ CSSのみ

ピンドロップアニメ

地図風の背景にピンが上から落ちて弾みます。スクロールで表示されると再生。店舗アクセスページの地図見出しに。

mapscrollcss

プレビュー

ソースコード

HTML

<div class="d10-04-01-map">
          <span class="d10-04-01-road d10-04-01-road-h"></span>
          <span class="d10-04-01-road d10-04-01-road-v"></span>
          <span class="d10-04-01-block d10-04-01-b1"></span>
          <span class="d10-04-01-block d10-04-01-b2"></span>
          <div class="d10-04-01-pin"><span class="d10-04-01-head"></span></div>
          <span class="d10-04-01-shadow"></span>
        </div>

CSS

.d10-04-01{padding:0}
        .d10-04-01-map{position:absolute;inset:0;background:#eef2f4;overflow:hidden}
        .d10-04-01-road{position:absolute;background:#fff}
        .d10-04-01-road-h{left:0;right:0;top:58%;height:16px}
        .d10-04-01-road-v{top:0;bottom:0;left:40%;width:14px}
        .d10-04-01-block{position:absolute;background:#dfe6ea;border-radius:4px}
        .d10-04-01-b1{left:8%;top:12%;width:24%;height:32%}
        .d10-04-01-b2{right:10%;top:20%;width:30%;height:24%}
        .d10-04-01-pin{position:absolute;left:50%;top:38%;width:26px;height:34px;margin-left:-13px;background:#e2504a;border-radius:50% 50% 50% 0;transform:translateY(-140px) rotate(-45deg);opacity:0}
        .d10-04-01-head{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;border-radius:50%}
        .d10-04-01-shadow{position:absolute;left:50%;top:64%;width:22px;height:6px;margin-left:-11px;background:rgba(0,0,0,.18);border-radius:50%;transform:scale(0);opacity:0}
        .io-reveal.is-visible .d10-04-01-pin{animation:d281drop .8s cubic-bezier(.3,1.4,.6,1) forwards}
        .io-reveal.is-visible .d10-04-01-shadow{animation:d281sh .8s ease forwards}
        @keyframes d281drop{0%{transform:translateY(-140px) rotate(-45deg);opacity:0}40%{opacity:1}70%{transform:translateY(6px) rotate(-45deg)}85%{transform:translateY(-4px) rotate(-45deg)}100%{transform:translateY(0) rotate(-45deg);opacity:1}}
        @keyframes d281sh{0%,60%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

クラス名 .d10-04-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。