Browse Source

svg animation

windhamdavid 9 years ago
parent
commit
af6ede5eb2
2 changed files with 65 additions and 14 deletions
  1. 57 14
      index.php
  2. 8 0
      style.css

+ 57 - 14
index.php

@@ -20,6 +20,47 @@
 	<div id="bg3" data-0="display:none;" data-8000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 	<div id="progress" data-0="width:0%;background:rgb(130, 104, 130);" data-end="width:100%;background:rgb(103, 130, 91);"></div>
 	
+	<div id="newyork">
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="300">
+		<path style="fill:#fff;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:6000;stroke-dashoffset:0" 
+		data-3000="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;" 
+		
+			d="M996.1,265.1v-0.8l-9.7-4.8v-1.7h-2.7v-1.5h-10.2
+			v-0.5h-3.7v0.5h-12.1v-1.5h-5.2v-5.2h-2v-38.3l-13.4,2.5v3.2h-3.7v1.7h-1.5v30.5h-3.7V221h-3.4v-0.8h-1.3v-2.1l-8.1-0.4l-2.5,0.7
+			v1.5h-3.5v15.7l-2.9-0.9V220l-4.7-4.9v-1l-1-0.8l-1.2,0.8v0.8h-1.7v-3.2l-0.5-0.5v-0.8l-2.7-0.8v-1.9l-3.4-0.7l-4,0.9v1.4l-0.7,1.1
+			h-2.5v3.4h-5.4v-7.9l-4.4-0.4V201h-12.1v-1.8h-11.1v2.7l-1.7-0.3h-8.1v0.8h-1.3v1.8h0.8v7.2l-2.9,4h-1.3v3.5l-5.7-0.4v-1.7h-2v-1.3
+			l-7.9-0.6v-2.3l-4.3-0.4l-0.4-1.9h-0.7v-2.2l-0.2-0.2h-0.9l-0.4,0.3v1.9l-0.7,2.3h-1.5v2.7h-3.5v-2.2h-3.4v-3.7h-3.5v1.3h-2.3v3
+			h-4.7v-3.8l-3.4-0.4l-2.6-1.2v-0.8h-2.2v-10.4h-4.7v-0.5h-1v-1h-1.5v-0.5h-6.5v-3.4h-0.3v-3.2h-2v-2.9l-4.9-4.2l-7.7-0.4l-6.2,0.6
+			l-5,4.4v2.9h-1.5v-6.6l-4-0.4v-0.7h-3v0.7l-5.7,1.2v2h-1v-4h-0.8v0.7h-2.3v-0.8h-0.8v3.9h-1.7v0.7H724v1.5h-0.5v2h-0.7v4.5h-0.2
+			v15.4l-8.1,0.3v4.2h-1.2v0.5h-0.3v-0.8l-0.4-0.4l-0.4,0.4v0.7H712V212l-4.7-10.7h-1.2v-17.6h-2.7v-7h-0.7v-3.8l-5.7-0.2v-2.3h-0.6
+			c-4.1-9.6-18.2-9.1-21.7,0.2h-0.7v2.5h-1.2v-39.2h-1.2v-0.3h-24.3l-3.7,1.2v21.1h-2.2V153l-14.1-8.6l-13.9,10v1.1l-0.2,0v1.1
+			l-0.7,0.1l-2.6-99.3l-3.8-1.5c0.4-0.7,0.2-1-0.2-1.5c0.3-0.6,0.5-1-0.2-1.5c0.6-0.9,0.6-1.4-0.2-2c-3.4-0.5-6.1-0.7-8.6-0.6
+			l-1.2-43.8h-0.3l-1.4,44c-1.8,0.3-3.7,0.7-5.8,1.4v2.6l-7.7,1l-3.6,129.6l-0.9,0.6v-44.4c-5.7-2.8-20.2-3.8-35.6-4.2l-6,3v12
+			l-8.7,1.8v46.8h-5.5v-22.3h-2v-4.4h-2l-0.4-0.5h-1v0.5h-2.4l-1.3,0.5v4l-0.7,0.5v11.4l-0.7,0.5v3l-1.7,1.6v3l-0.7,0.3v11.6h-14.6
+			v-20.8c0-1.7-0.8-1.7-0.8,0h-0.5v-16.2l-0.8-2.2V164l-1-0.6V162l-2.8,0.1l-0.3-1.1l-0.3,1.5l-11.8,1v33.8l-0.5-0.5l-0.5,0.5V211
+			l-0.7,0.7v11.1h-1.2v-2.7h-2.5v-5.7h-1l-1.3-1.3l-1.4,1.3h-3.6l-1.5,0.5v-2.7h-4.9v-6.2l-2-1.4v-5.5h-1.3v-1.7h-1.8v-1.3h-3.5
+			l-0.8,0.5v0.7h-0.3v-0.5h-0.1l-2.9,1.6l-0.1,0.9l-1.3,0.6v5.7l-2,1.1v7h-10.5l-0.6,0.7h-0.8v-3.4l-4.5-0.3v-2.4l-0.7-0.3v-3.8
+			l-1.4-1l-1.4,1.1v3.4l-0.8,0.7v2.3h-1.8v-0.3h-3v-0.3h-1.5v-1h-0.8v-0.5h-1v0.3h-0.5v-0.3h-0.7v0.5h-0.5v-0.5h-1v1h-1.2v-4.2H396
+			v-21.1h-5.9v-6.5h-4.4c-0.8,2.3-0.9,4-0.7,6.5h-0.8v-0.6l-5.9,0.9v31.5h0.8v4.9h-0.7l-0.3-6.4l-1-3.1h-0.3v0.5h-0.3v1h-0.3v-2.2h0.5
+			v-0.5h-0.5v-1.1l-0.7-0.1V208l-0.5-0.5v-5l-1-1v-2.2l-0.5-0.3v-1.9c0.3-0.1,0.4-0.4,0.4-0.6c0-0.4-0.3-0.7-0.7-0.7
+			c-0.4,0-0.7,0.3-0.7,0.7c0,0.3,0.2,0.5,0.3,0.6v2l-0.5,0.3v2.2l-0.8,1v-0.6l-0.3,0.1v5.5l-0.3,0.2v1.5h-0.3V208l-0.3,0.4v4.3
+			l-0.4-1.2l-1.3,4.2l-0.3,5.4h-1.5v0.5h-1.3v-0.5h-1.8v0.3h-1.7V221h-6v-1.3h-0.3v1.2l-2.9,1.7h-0.8v1.2h-1.2v22h-4.2v-16.3h-2.2
+			v-15.5l-1.1-0.4l0.1-5h-1.8v-1.5h-0.7v-0.7h-2v-1.6l-0.5-1.4h-0.6l-0.3-0.6c0-2.4-4-2.4-3.9,0l-1.4,1.7v1.7h-0.3v-4h-3.4v-1
+			l-0.5-0.5v-1l-0.2,0.2v0.9l-0.7,0.5v0.8l-3.2,0.4v-0.5h-0.5v3.3l-0.3,0.6h-2.7v-0.8h-0.7v0.7h-4.2l-2.9,0.7v9.6h-1.3v-0.8H309v0.8
+			h-0.8v-16.9h-0.3v-1.8l-0.7-0.8h-3v-5l-1.5-1.7H289v0.5h-16.4c0-1.8-3.5-1.8-3.5,0h-5.7v11.1h-3.5v8.1h-2v1h-0.3v2.2h-0.2v3.9H257
+			v6.7h-0.3v1.3h-3.7v2.5h-0.5v4.7h-0.8v-27h-6.5v-3.5h-4.4l-3.1,0.5v3.9h-8.2v-0.8h-0.5v0.7h-3.6l-2.6,0.5V230h-1.3v-2h-0.5v-1.5
+			h-0.7v-1.7h-1.5v1.7h-0.7v1.5h-0.7v2h-0.7v3H215v-2.5h-0.7v-0.8h-4.2V227h-0.7v-2.3H209v-21.5h-7.5v-1h-0.5v1h-8.4V199h-4.8
+			l-2.5,0.5v3.7h-1.1l-4.6,1V227h1v6.9H178V232h-4.5v-57.4h-2v-2.3H168c-0.6-2.3-0.9-4.9-0.6-5.5v-0.3h-3l0.3-0.7h-0.7v-1.5l0.8-0.8
+			l-5.8-3l-14.1,6.2l0.6,0.5l0,0.8l-3.1,1.2v2.2l-4.4,1.7v2.9l-1.8,1v38.7l-1.3,0.6v13.4h-8.2v-1.7h-3.9l-0.6-0.3v-4.4l-1.2-1.9h-1.2
+			l-1.4,2v4.5h-0.8v-1.5h-2.9v1.5h-3.2v-14.3h-1.8v-0.8h-1.7v-1.8H107v-1.8h-1.7v-2.7l-3.3-1.7l0-4.4l-4.4-1.6v-5.3l-0.3-0.3v-3.2
+			h-0.2v3.2l-0.3,0.3v5.3l-2.1,1.5l-1.2-0.8l0-9.4l-0.6-1v-3.4l-0.2-0.1l-0.2,0.1v3.4l-0.7,1v9.6h-4v2.3h-2.3v0.7h-1.2v3h-0.5v7.4
+			h-3.2v4H80v15.3h-2.7v2.3l-0.7,1.3h-2.5v0.8h-5.9v-2h-4.4v2h-1.2v-1.7h-1.2v-2.8l-0.5-1.9h-3v-4l-2,0V224l-0.9-0.7l-1,0.7v2.3H52
+			l-2.9,5.9v7.2l-0.7,0.7v3.2H46v-4l-1-1H27.9v1.8H27v6.4H10.6v4.2H4.8l-0.1,4.9H0.9v9.6H-5v130.8h1008.9V265.1H996.1z"/>
+		</svg>
+	</div>
+	
+	
+	
 	<div id="intro" data-0="display:block;" data-1400="display:none;">
 		<div class="intro_ease" data-0="left:92%" data-1500="left:0%;">
 			<h4 class="cardo">You're cordially invited</h4>
@@ -33,51 +74,53 @@
 	</div>
 	
 	<div id="intro2" data-1400="display:block;" data-4100="display:none;">
-		<div class="intro_ease" data-1400="left:-30%" data-2100="left:93%;" data-3100="left:93%;" data-4100="left:150%;" data-3100="background-image:!url(img/dress.png);" data-4100="background-image:!url(img/dress.png)">
-			<img src="wp-content/themes/bml/img/bells.png">
+		<div class="intro_ease" data-1400="left:-30%" data-2000="left:93%;" data-2500="left:93%;" data-3500="left:200%;">
+			<img src="wp-content/themes/bml/img/bells.png"  width="40"><br />
 			<h4 class="vibes">No need to dress up, no need to wrap gifts.</h4>
 			<h4 class="vibes">Just stay at home, and send us a good wish.</h4>
 			<h4 class="vibes">We appreciate your love and cheer.</h4>
 			<h4 class="vibes">But we're off on our journey, have no fear.</h4>
-			<img src="wp-content/themes/bml/img/dress.png">	
+			<br /><br /><img src="wp-content/themes/bml/img/dress.png" width="70">	
 		</div>
-
-			
-
 	</div>
 	
-	<div id="story_wrap" data-3200="top:200%" data-4400="top:0%;" data-11000="top:0%;" data-12200="top:-100%;"   data-3400="background:rgba(0,0,0,0);" data-3700="background:rgba(104,130,91,.25);">
-		<div id="story">
-			<div class="story" data-3400="top:100%" data-4400="top:5%;" data-8000="top:5%;" data-9000="top:-35%;">
+	<div id="story">
+		<div id="story_wrap" data-3000="top:200%" data-4000="top:0%;" data-6000="top:0%;" data-8000="top:-100%;" data-3400="background:rgba(0,0,0,0);" data-3700="background:rgba(104,130,91,.25);">
+			<div class="story" data-3400="top:-300%" data-4400="top:25%;" data-5000="top:25%;" data-5000="top:-35%;">
 					<h4 class="vibes">About 10 years ago<br /> a guy named Dave met a girl named Ginny.<br />
 					Soon after, the two would take a trip to New York City.</h4>
 			</div>
-			<div class="story" data-4000="top:100%" data-5000="top:20%;" data-8000="top:20%;" data-9000="top:-35%;">
+
+				
+				
+			<div class="story" data-4000="top:100%" data-5000="top:45%;" data-8000="top:45%;" data-5000="top:-35%;">
 					<h4 class="vibes">Days and weeks and many more,<br />
 					The couple found love they could not ignore.<br />
 					They dwelled in cities, the trees, and farm,<br />
 					Each would have its newfound charm.</h4>
 			</div>
-			<div class="story" data-5000="top:100%;" data-6000="top:40%;" data-8000="top:40%;" data-9000="top:-40%;">	
+		</div>
+		<div id="story_wrap" data-4200="top:200%" data-5000="top:0%;" data-8000="top:0%;" data-9000="top:-100%;" data-4200="background:rgba(0,0,0,0);" data-9000="background:rgba(104,130,91,.25);">
+			<div class="story" data-5000="top:100%;" data-6000="top:20%;" data-8000="top:20%;" data-9000="top:-40%;">	
 					<h4 class="vibes">And then one day came when they decided to marry.<br />
 					They had made it 10 years, after all, it’s not so scary.<br />
 					Money can’t buy love, this they knew.<br />
 					But it sure could pay for a trip, to start anew.</h4>
 			</div>
-			<div class="story" data-6000="top:100%;" data-7000="top:60%;" data-8000="top:60%;" data-9000="top:-40%;">
+			<div class="story" data-6000="top:100%;" data-7000="top:45%;" data-8000="top:45%;" data-9000="top:-40%;">
 					<h4 class="vibes">So tip your hat to these big-hearted.<br />
 					Who are embarking on a journey to where it all started.<br />
 					To jumpstart another decade, with its ups and downs.<br />
 					New experiences and perhaps new towns.</h4>
 			</div>
+		</div>
 			<div class="story" data-8000="top:100%" data-9000="top:15%;" data-10000="top:15%;" data-11000="top:-40%;">
 					<div id="bmlcount"></div><div id="heart">&nbsp;</div>
 					<h4 class="vibes">But have no worries for this one of many couples.<br />
 					Because they’re a good team and can tackle life’s troubles.<br />
 					For it is their love that will make them last.<br />
 					This guy named Windham and girl named Gast.</h4>
-			</div>
-		</div>
+			</div>	
 	</div>
 	
 	<div id="trip" data-11000="top:-200%" data-12000="top:0%;" data-13000="top:0%;" data-14000="top:-100%;" data-9500="background:rgba(130,104,130,.5);" data-12000="background:rgba(130,104,130,.5);">

+ 8 - 0
style.css

@@ -138,6 +138,14 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	width:100%;
 	height:100%;
 }
+#newyork {
+	position:fixed;
+    margin-left: auto;
+    margin-right: auto;
+	height:300px;
+	bottom: 10px;
+	z-index:800;
+}
 #intro {
 	width:80%;
 	top:80px;