Map thingy

Bortas
Bortas

I'm not sure how to describe it at all, other than: here is a nifty "you are here" widget for maps. I'm using it on our front page: https://morwindl.obsidianportal.com/

-bort

Comments

  • Bortas
    Bortas
    Posts: 645

    <div class="map_case"><a href="https://morwindl.obsidianportal.com/maps/54403">[[File:636889 | class=media-item-align-none | Udkig1.jpg]]</a><div class="map_pin"></div><div class="map_pulse"></div></div>

     

  • Bortas
    Bortas
    Posts: 645

    /* BEGIN map pin */
    .map_pin, .map_pulse {
    left: 24%;
    top: 57%;}

    .map_case { position: relative;}
    .map_case img {max-width:95%; box-shadow:0 10px 10px 4px rgba(0,0,0,0.3); border-radius:10px; }
    .map_pin {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #0039e6;
    transform: rotate(-45deg);
    margin: -20px 0 0 -20px;
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
    z-index:753;
    }
    .map_pin:after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #2f2f2f;
    position: absolute;
    border-radius: 50%;
    }
    .map_pulse {
    position: absolute;
    background: rgba(0,0,0,0.2);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: 752;
    }
    .map_pulse:after {
    content: "";
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    filter: alpha(opacity=0);
    box-shadow: 0 0 1px 2px #ffff00;
    animation-delay: 1.1s;
    }
    @keyframes pulsate {
    0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    filter: alpha(opacity=0);
    }
    50% {
    opacity: 1;
    filter: none;
    }
    100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    filter: alpha(opacity=0);
    }
    }
    @keyframes bounce {
    0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
    opacity: 1;
    filter: none;
    transform: translateY(30px) rotate(-45deg);
    }
    80% {
    transform: translateY(-10px) rotate(-45deg);
    }
    100% {
    transform: translateY(0) rotate(-45deg);
    }
    }
    /* END map pin */

     

  • Jim_Mount
    Jim_Mount
    Posts: 162

    THAT is awesome. I'd steal it if I thought my players have even looked at the map page once. Which they haven't.

  • abu_is_evil
    abu_is_evil
    Posts: 168

    Really cool effect Bort!!

    Just trying to help out.

  • Bortas
    Bortas
    Posts: 645

    Thanks Abu!

    I don't think mine have either, Jim, which is why I threw an eye-catchy blurb on front page, linking back to the map. I have my fingers crossed on that one! ;-)

    -bort

  • cgregory
    cgregory
    Posts: 772

    Looks great Bortas

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

                              Unlocking The Portal: A Guide to OP CSS                                    

     

     

  • Johnprime
    Johnprime
    Posts: 252

    Great addition, I'll have to look at it more to see about using it in my campaigns.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions