SVG 交互自驾旅行地图原型

下载代码

html

css

分享到微信朋友圈

html

<a href="#">
<circle cx="801.2" cy="488.9" r="17.2" class="outline" />
<circle cx="801.2" cy="488.9" r="15" />
<text transform="translate(818.382 439.046)">Rotorua</text>
<desc>Known for it’s geothermal activity, geysers and mud pools, the air of Rotorua smells constantly of sulphur.</desc>
</a>

<a href="#">
<circle cx="105.3" cy="1343.8" r="17.2" class="outline" style="animation-delay: 1s;" />
<circle cx="105.3" cy="1343.8" r="15" />
<text transform="translate(160.028 1360.957)">Fiordland</text>
<desc>A variant spelling of the Scandinavian word for the deep valleys plunging into the ocean and bays, typical of the area, Fiordland occupies the lower third of the west coast of New Zealand’s South Island. The most famous area of the thinly occupied region is Milford Sound.</desc>
</a>

<a href="#">
<circle cx="635.9" cy="628.1" r="17.2" class="outline" style="animation-delay: 1.2s;" />
<circle cx="635.9" cy="628.1" r="15" />
<text transform="translate(395.53 644.244)">Taranaki</text>
<desc>Taranaki is located on the lower third of the west coast of the North Island, and is named for the stratovolcano that is its central feature.  The region is exceptionally fertile due to the heavy rainfall and rich volcanic soil.</desc>
</a>

</svg>
  <div id="description">
  </div>
</div>

css

@font-face {
  src: url(http://thenewcode.com/assets/fonts/libertad.woff);
  font-family: Libertad;
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #006994;
  min-height: 100vh;
  font-family: Libertad, sans-serif;
}

svg {
  margin-left: 2rem;
  width: 33%;
  height: auto;
  display: inline-block;
}

#description {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 50%;
  margin: 1rem 3rem 0;
  vertical-align: top;
  -webkit-transition: 0.8s cubic-bezier(0.14, 0.39, 0.41, 1.29);
  transition: 0.8s cubic-bezier(0.14, 0.39, 0.41, 1.29);
}

#description * {
  opacity: 0;
}

#description p {
  margin-bottom: 2rem;
}

#description.active * {
  -webkit-animation: fadein 3s forwards;
          animation: fadein 3s forwards;
}

#description.active img {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

#description.active h1 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

#description.active p {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes fadein {
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}
#description h1,
#description p {
  margin-left: 2rem;
  margin-right: 2rem;
}

#description img {
  width: 100%;
}

@-webkit-keyframes lookit {
  to {
    stroke-width: 20px;
    stroke: rgba(255, 255, 255, 0.2);
  }
}

@keyframes lookit {
  to {
    stroke-width: 20px;
    stroke: rgba(255, 255, 255, 0.2);
  }
}
text {
  font-family: Libertad, sans-serif;
  font-size: 48px;
  font-weight: 400;
  fill: #fff;
}

circle {
  fill: #000;
}

circle.outline {
  fill: none;
  stroke-width: 5px;
  stroke: #fff;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-animation: lookit 1.8s infinite alternate cubic-bezier(0.85, 0, 0.32, 0.83);
          animation: lookit 1.8s infinite alternate cubic-bezier(0.85, 0, 0.32, 0.83);
}

a:hover circle:not(.outline),
a:focus circle {
  fill: #f00;
}

.travel {
  fill: none;
  stroke: #f00;
  stroke-width: 12px;
  -webkit-transition: .4s opacity;
  transition: .4s opacity;
}

#ni {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

#si {
  stroke-dasharray: 1250;
  stroke-dashoffset: 1250;
}

.hide {
  opacity: 0;
}

@media all and (max-width: 790px) {
  #nzmap {
    display: none;
  }

#description {
    width: 100%;
    margin: 0;
  }

#description * {
    opacity: 1;
  }

#description > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

JavaScript

var nzmap = document.getElementById("nzmap"),
	  prevLoc, pathDist, locName,
	  si = document.getElementById("si"),
	  ni = document.getElementById("ni"),
	  locale = document.getElementById("locale"),
	  map = document.getElementById("map"),
	  description = document.getElementById("description");

function pathTravel(travelPath, pathDist) {
	  travelPath.animate([{
	    strokeDashoffset: pathDist
	  }, {
	    strokeDashoffset: '0'
	  }], {
	    duration: pathDist * 5,
	    fill: 'forwards'
	  });
	}

function fillDesc(locName, desc) {
	  var imageURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/",
	    fileName = locName.split("."),
	    longDesc = '<img src=' + imageURL + locName.toLowerCase() + '.jpg srcset="' + imageURL + fileName[0].toLowerCase() + '.jpg 2x" alt>';
	  longDesc += "<h1>" + locName + "</h1>";
	  longDesc += "<p>" + desc + "</p>";
	  return longDesc;
	}

nzmap.addEventListener("click", function(e) {
	  var loc = e.target.parentNode;
	  e.preventDefault();
	  var desc = loc.querySelector("desc").textContent;
	  if (loc.nodeName == "a") {
	    var locName = loc.querySelector("text").textContent;
	    if (locName == "Rotorua") {
	      si.classList.add("hide");
	      ni.classList.add("hide");
	    }
	    if (locName == "Taranaki") {
	      if (prevLoc == "Fiordland") {
	        si.classList.add("hide");
	      }
	      if (prevLoc !== "Taranaki") {
	        ni.classList.remove("hide");
	        travelPath = ni;
	        pathDist = travelPath.pathLength.baseVal;
	        pathTravel(travelPath, pathDist);
	      }
	    }
	    if (locName == "Fiordland" && prevLoc !== "Fiordland") {
	      travelPath = si;
	      travelPath.classList.remove("hide");
	      pathDist = travelPath.pathLength.baseVal;
	      pathTravel(travelPath, pathDist);
	    }
	    description.classList.remove("active");
	    description.innerHTML = "";
	    prevLoc = locName;
	    description.insertAdjacentHTML("afterbegin", fillDesc(locName, desc));
	    description.classList.add("active");
	  }
	});

function showHide() {
	  var locs = nzmap.getElementsByTagName("text"),
	    descs = nzmap.getElementsByTagName("desc");
	  for (var i = 0; i < locs.length; i++) {
	    description.insertAdjacentHTML("afterbegin", "<div>" + fillDesc(locs[i].textContent, descs[i].textContent) + "</div>");
	  }
	}

var screencheck = window.matchMedia("(max-width: 790px)");
	window.addEventListener("load", function() {
	  if (screencheck.matches) {
	    showHide();
	  }
	});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg