Animated Map Pin
Locatiepin die neervalt op een radarkaart met pulserende ring.
Den Haag
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- Animated Map Pin · Bron: CodePen · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="mpp-map"><div class="mpp-grid"></div><div class="mpp-anchor"><span class="mpp-pulse"></span><span class="mpp-pin"></span><span class="mpp-shadow"></span></div><span class="mpp-tag">Den Haag</span></div>
</div>/* Animated Map Pin · Bron: CodePen · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.mpp-map{position:relative;width:300px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(10,10,10,.12);font-family:'Switzer',system-ui,sans-serif}
.mpp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(10,10,10,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.05) 1px,transparent 1px);background-size:26px 26px}
.mpp-anchor{position:absolute;top:46%;left:50%;transform:translate(-50%,-100%)}
.mpp-pin{position:absolute;bottom:0;left:50%;width:22px;height:22px;background:#F5480F;border:3px solid #fff;border-radius:50% 50% 50% 0;transform:translate(-50%,0) rotate(-45deg);box-shadow:0 3px 8px rgba(10,10,10,.25);animation:mpp-drop .7s cubic-bezier(.34,1.56,.64,1) both}
.mpp-pulse{position:absolute;bottom:-6px;left:50%;width:18px;height:18px;border-radius:50%;background:rgba(245,72,15,.4);transform:translate(-50%,50%);animation:mpp-pulse 2s ease-out infinite;animation-delay:.7s}
.mpp-shadow{position:absolute;bottom:-8px;left:50%;width:18px;height:5px;border-radius:50%;background:rgba(10,10,10,.18);transform:translate(-50%,0);filter:blur(1px)}
.mpp-tag{position:absolute;top:46%;left:50%;transform:translate(18px,-40px);font-size:11px;font-weight:600;color:#0a0a0a;background:#fff;padding:4px 9px;border-radius:7px;border:1px solid rgba(10,10,10,.12);box-shadow:0 3px 8px rgba(10,10,10,.10);animation:mpp-fade .4s .7s both}
@keyframes mpp-drop{0%{transform:translate(-50%,-30px) rotate(-45deg);opacity:0}100%{transform:translate(-50%,0) rotate(-45deg);opacity:1}}
@keyframes mpp-pulse{0%{width:18px;height:18px;opacity:.6}100%{width:80px;height:80px;opacity:0}}
@keyframes mpp-fade{from{opacity:0;transform:translate(18px,-30px)}to{opacity:1;transform:translate(18px,-40px)}}Meer uit cijfers & grafieken
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →