Land map made with a custom webfont, includes hovers and active state. Webfont chosen over regular SVG for text effects.
A Pen by Louis Coyle on CodePen.
Created
July 13, 2020 23:49
-
-
Save courtnEMAIL/dd4eb3ec3ece68e8246f8a320b6c70e2 to your computer and use it in GitHub Desktop.
New Zealand
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html class="bgGradient"> | |
| <div class="wrap"> | |
| <div class="map"> | |
| <div class="north"> | |
| <span class="region nort"><a href="#">a</a></span> | |
| <span class="region auck"><a href="#">b</a></span> | |
| <span class="region coro"><a href="#">c</a></span> | |
| <span class="region waik"><a href="#">d</a></span> | |
| <span class="region east"><a href="#">f</a></span> | |
| <span class="region bayo"><a href="#">e</a></span> | |
| <span class="region tara"><a href="#">g</a></span> | |
| <span class="region mana"><a href="#">h</a></span> | |
| <span class="region cent"><a href="#">i</a></span> | |
| <span class="region hawk"><a href="#">j</a></span> | |
| <span class="region wair"><a href="#">k</a></span> | |
| <span class="region well"><a href="#">l</a></span> | |
| </div><!-- end div.north --> | |
| <div class="south"> | |
| <span class="region marl"><a href="#">m</a></span> | |
| <span class="region nels"><a href="#">n</a></span> | |
| <span class="region west"><a href="#">o</a></span> | |
| <span class="region cant"><a href="#">p</a></span> | |
| <span class="region otag"><a href="#">q</a></span> | |
| <span class="region sout"><a href="#">r</a></span> | |
| <span class="region fior"><a href="#">s</a></span> | |
| </div><!-- end div.south --> | |
| </div><!-- end div.map --> | |
| </div><!-- end div.wrap --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| /* - Toggle active region - */ | |
| $('.map span').click(function(e) { | |
| e.preventDefault(); | |
| $(".map span").removeClass('active'); | |
| $(this).toggleClass('active'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html{padding:0px;background: rgba(1,178,229,1);height:100%;} | |
| body{margin:0px;height:100%;} | |
| *{ -webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} | |
| a{text-decoration:none;} | |
| .wrap{ | |
| padding:50px 0px; | |
| background: linear-gradient(45deg, rgba(1,86,140,1) 0%,rgba(1,178,229,1) 79%,rgba(80,212,255,1) 100%);min-height:100%;} | |
| .map{ | |
| margin:0px auto; | |
| font-family:"nz"; | |
| font-size:500%; | |
| height:890px; | |
| position:relative; | |
| } | |
| .map span{position:absolute;cursor:pointer;} | |
| .map span a{color:rgba(255,255,255,0.2);position:absolute;} | |
| .map span a:hover{color:rgba(101,218,255,0.6);} | |
| .map span.active a{ z-index:999; color:#65daff; text-shadow: 0px 1px 0px #4acef8, 0px 2px 0px #3dcaf7, 0px 3px 0px #38c7f4, 0px 4px 0px #31c2f0, 0px 4px 0px #28bceb, 0px 6px 0px #1fb6e6, 0px 7px 0px #16b0e1, 0px 8px 0px #0daadc, 0px 9px 0px #06a5d8, 0px 10px 0px #01a2d5; top:-10px; | |
| } | |
| /* large map*/ | |
| .map{width:600px;} | |
| .nort{left:249px;font-size:195%;top:-0.9%;} | |
| .auck{left: 61.7%;font-size: 106%;top: 14.4%;} | |
| .coro{left: 72.2%;font-size: 81%;top: 17.6%;} | |
| .waik{left: 65.6%;font-size: 141%;top: 22.9%;} | |
| .bayo{left: 75.6%;font-size: 125%;top: 24.2%;} | |
| .east{left: 80.2%;font-size: 145%;top: 26.2%;} | |
| .tara{left: 57%;font-size: 90%;top: 34.5%;} | |
| .mana{left: 63.9%;font-size: 165%;top: 34.7%;} | |
| .cent{left: 71.3%;font-size: 107%;top: 32.1%;} | |
| .hawk{left: 74.6%;font-size: 141%;top: 35.8%;} | |
| .wair{left: 67.4%;font-size: 102%;top: 47.3%;} | |
| .well{left: 65%;font-size: 68%;top: 49%;} | |
| .marl{left: 49.2%;font-size: 164%;top: 48.5%;} | |
| .nels{left: 44.6%;font-size: 151%;top: 47.5%;} | |
| .west{left: 11.3%;font-size: 306%;top: 49.1%;} | |
| .cant{left: 23.8%;font-size: 238.1%;top: 59.3%;} | |
| .otag{left: 12.4%;font-size: 225%;top: 73.6%;} | |
| .sout{left: 7.4%;font-size: 191%;top: 82.1%;} | |
| .fior{left: -0.2%;font-size: 163%;top: 77.1%;} | |
| /* map icon font*/ | |
| @font-face { | |
| font-family: "nz"; | |
| src: url('https://s.cdpn.io/21555/nz_1.eot'); | |
| src: url('https://s.cdpn.io/21555/nz_1.eot?#iefix') format('embedded-opentype'), | |
| url('https://s.cdpn.io/21555/nz_1.woff') format('woff'), | |
| url('https://s.cdpn.io/21555/nz_1.ttf') format('truetype'), | |
| url('https://s.cdpn.io/21555/nz_1.svg#SSStandard') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| @font-face { | |
| font-family: "nz"; | |
| src: url('https://s.cdpn.io/21555/nz_1.svg') format('svg'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment