Skip to content

Instantly share code, notes, and snippets.

@hellosaumil

hellosaumil/QbqWJP.markdown

Created June 18, 2015 05:37
Show Gist options
  • Save hellosaumil/7a571f33d9851a57c5e0 to your computer and use it in GitHub Desktop.
Save hellosaumil/7a571f33d9851a57c5e0 to your computer and use it in GitHub Desktop.
Download ZIP
QbqWJP
Raw
index.html
<h1>Responsive SVG SMIL Animation</h1>
<div id="meeting-national-geographic-map" class="map playing">
<p id="map-rally">
<strong>Rally Interactive</strong>
(Salt Lake City)
</p>
<p id="map-national-geographic">
<strong>National Geographic</strong>
(Washington D.C.)
</p>
<p id="map-distance">
<strong>2,083.9</strong>
Miles
</p>
<div id="flight-path">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 624 226" preserveAspectRatio="xMinYMin slice">
<path d="M24.9,143.2 c76-105.1,410-227.1,574.5,58.4" id="plane-path"></path>
<circle cx="24" cy="145" r="8" stroke-width="6" stroke="#c79681" fill="#9f6046" class="circle"></circle>
<circle cx="592" cy="195" r="8" stroke-width="6" stroke="#c79681" fill="#9f6046" class="circle"></circle>
<image xlink:href="http://deadbinky.com/projects/rallySnippets/plane.png" id="plane" x="-25" y="-25" width="50" height="50">
<animateMotion class="svg-anim" id="plane-motion" dur="9s" rotate="auto" fill="freeze" begin="0s" repeatCount="once" calcMode="spline" keySplines="0.833333 0.02 0.5 1" keyTimes="0; 1">
<mpath xlink:href="#plane-path"></mpath>
</animateMotion>
</image>
</svg>
</div>
<div id="flight-path-shadow">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 616 173" preserveAspectRatio="xMinYMin slice">
<path d="M26.5,86.5 c39.5-41.8,385-139.6,564,61" id="plane-shadow-path"></path>
<image xlink:href="http://deadbinky.com/projects/rallySnippets/plane-shadow.png" id="plane-shadow" x="-25" y="-25" width="50" height="50">
<animateMotion class="svg-anim" id="plane-shadow-motion" dur="9s" rotate="auto" fill="freeze" begin="0s" repeatCount="once" calcMode="spline" keySplines="0.833333 0.02 0.5 1" keyTimes="0; 1">
<mpath xlink:href="#plane-shadow-path"></mpath>
</animateMotion>
</image>
</svg>
</div>
</div>
Raw
style.css
@import url("http://fonts.googleapis.com/css?family=Montserrat");
body{
background: #442c24;
font-family: "Montserrat", Arial, sans-serif;
font-weight: 400;
}
h1{
color: #fff;
text-align:center;
}
#meeting-national-geographic-map {
background-image: url(http://deadbinky.com/projects/rallySnippets/national-parks-map.jpg);
background-position: center 0;
background-repeat: no-repeat;
background-size: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
#map-rally,
#map-national-geographic,
#map-distance {
color: #fff;
padding: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
}
#map-distance strong,
#map-rally strong,
#map-national-geographic strong {
display: block;
}
#map-rally,
#map-national-geographic {
margin-top: 10px;
}
#map-rally {
left: 20%;
margin-left: -70px;
top: 42%;
width: 140px;
}
#map-national-geographic {
left: 83%;
margin-left: -73px;
top: 52%;
width: 146px;
}
#map-distance {
background-image: url(http://deadbinky.com/projects/rallySnippets/national-parks-map-miles.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
box-sizing: border-box;
height: 25%;
left: 50%;
margin-left: -70px;
max-width: 140px;
min-width: 70px;
padding-top: 60px;
padding-bottom: 80px;
top: 40%;
width: 25%;
}
#plane-path {
fill: none;
opacity: .8;
positon: relative;
stroke: #9f6046;
stroke-width: 3;
stroke-dasharray: 4;
z-index: 1;
}
#plane-shadow-path {
fill: none;
opacity: .2;
stroke: #000;
stroke-width: 3;
stroke-dasharray: 4;
}
#flight-path {
left: 20%;
position: absolute;
top: 14%;
width: 66%;
z-index: 2;
}
#flight-path-shadow {
left: 20%;
position: absolute;
top: 23%;
width: 67%;
}
#plane {
opacity: 0;
position: relative;
z-index: 3;
-webkit-animation: plane 9s forwards;
-moz-animation: plane 9s forwards;
animation: plane 9s forwards;
}
#plane-shadow{
opacity: 0;
-webkit-animation: plane-shadow 9s forwards;
-moz-animation: plane-shadow 9s forwards;
animation: plane-shadow 9s forwards;
}
.circle {
position: relative;
z-index: 2;
}
@media (min-width: 1110px){
#meeting-national-geographic-map {
height: 600px;
width: 1000px;
}
#map-rally,
#map-national-geographic,
#map-distance {
font-size: 16px;
line-height: 20px;
}
#map-rally strong,
#map-national-geographic strong,
#map-distance strong {
font-size: 24px;
text-transform: none;
}
}
@media (max-width: 1109px) and (min-width: 451px){
#meeting-national-geographic-map {
padding-bottom: 60%;
width: 100%;
}
#map-rally, #map-national-geographic, #map-distance {
font-size: 13px;
line-height: 20px;
}
#map-rally strong,
#map-national-geographic strong,
#map-distance strong {
font-size: 20px;
text-transform: none;
}
}
@media (max-width: 450px) {
#meeting-national-geographic-map {
padding-bottom: 60%;
width: 100%;
}
#map-rally,
#map-national-geographic,
#map-distance {
font-size: 8px;
line-height: 15px;
}
}
@-webkit-keyframes plane {
0% {
opacity: 0; }
15% {
opacity: 1; }
98% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes plane {
0% {
opacity: 0; }
15% {
opacity: 1; }
98% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes plane {
0% {
opacity: 0; }
15% {
opacity: 1; }
98% {
opacity: 1; }
100% {
opacity: 0; } }
@-webkit-keyframes plane-shadow {
0% {
opacity: 0; }
25% {
opacity: 1; }
75% {
opacity: 1; }
98% {
opacity: 0; } }
@-moz-keyframes plane-shadow {
0% {
opacity: 0; }
25% {
opacity: 1; }
75% {
opacity: 1; }
98% {
opacity: 0; } }
@keyframes plane-shadow {
0% {
opacity: 0; }
25% {
opacity: 1; }
75% {
opacity: 1; }
98% {
opacity: 0; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment