up

index.php

@@ -33,39 +33,44 @@
 	</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%;">
+		<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">
 			<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">	
 		</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_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_ease" data-3400="top:100%" data-4400="top:5%;" data-8000="top:5%;" data-9000="top:-35%;">
+			<div class="story" data-3400="top:100%" data-4400="top:5%;" data-8000="top:5%;" data-9000="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_ease" 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:20%;" data-8000="top:20%;" data-9000="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_ease" data-5000="top:100%;" data-6000="top:40%;" data-8000="top:40%;" data-9000="top:-40%;">	
+			<div class="story" data-5000="top:100%;" data-6000="top:40%;" data-8000="top:40%;" 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_ease" 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:60%;" data-8000="top:60%;" 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 class="story_ease" data-8000="top:100%" data-9000="top:15%;" data-10000="top:15%;" data-11000="top:-40%;">
+			<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 />
@@ -84,15 +89,17 @@
 	</div>
 
 <?php wp_footer(); ?>
+
 <script>
-var s = skrollr.init({
-	edgeStrategy: 'set',
-	easing: {
-		inverted: function(p) {
-			return 1-p;
-		}
-	}
-});
+var s = skrollr.init({edgeStrategy: 'set', easing: {inverted: function(p) {return 1-p;}} });
+	skrollr.menu.init(s), {
+	    animate: true,
+	    easing: 'sqrt',
+	    scale: 2,
+	    duration: function(currentTop, targetTop) {
+	        return 500;
+	    },
+	    }
 </script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

style.css

@@ -112,11 +112,7 @@ p.vibes {
 
 /* #Skrollr  ================================================== */
 
-#skrollr-body {
-	height: 100%;
-	width: 100%;
-}
-
+#skrollr-body {height: 100%;width: 100%;}
 html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 .skrollable {position:fixed;z-index:100;}
 .skrollr-mobile .skrollable {position:absolute;}
@@ -142,11 +138,6 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	width:100%;
 	height:100%;
 }
-#easing {
-	width:100%;
-	height:100%;
-}
-
 #intro {
 	width:80%;
 	top:80px;
@@ -154,11 +145,11 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	padding:2em;
 	text-align:center;
 }
-.intro_ease {
-	width:100%;
-	height:100%;
-	background:#fff;
-}
+	.intro_ease {
+		width:100%;
+		height:100%;
+		background:#fff;
+	}
 #intro2 {
 	width:80%;
 	top:120px;
@@ -171,30 +162,20 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	height:100%;
 }
 #story {
-	padding:2em;
-	width:60%;
-	text-align:center;
-}
-.story_ease {
-	top:200px;
 	width:100%;
 	height:100%;
 }
-#transform {
-	width:70%;
-	left:50%;
-	top:20%;
-	margin-left:-35%;
-	text-align:center;
-	font-size:150%;
-	.transform-origin(50%, 50%);
-}
-
-#trip {
+	.story {
+		width:60%;
+		height:100%;
+		text-align:center;
+	}
+	
+#trip_wrap {
 	width:100%;
 	height:100%;
 }
-#trip_wrap {
+#trip {
 	width:100%;
 	height:100%;
 }
@@ -206,8 +187,19 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	width:100%;
 	height:100%;
 }
-
-
+#transform {
+	width:70%;
+	left:50%;
+	top:20%;
+	margin-left:-35%;
+	text-align:center;
+	font-size:150%;
+	.transform-origin(50%, 50%);
+}
+#credits {
+	width:100%;
+	height:100%;
+}
 
 /* #BML  ================================================== */
 
@@ -218,37 +210,6 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	font-size:31px;
 }
 
-.buy-love {
-	margin: 0px 0 0 0;
-}
-
-
-#gform_submit_button_1 {
-	font-family: 'Great Vibes', cursive;
-	text-decoration: none !important;
-	position:relative;
-	margin:10px;
-	padding: 8px 15px;
-	font-weight: bold;
-	font-size: 18px;
-	background: #1275FF;
-	border: 1px solid #155FB0;
-	color: white;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
-	background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
-	background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
-	-webkit-box-shadow: inset 0 1px 0 #98c9ff;
-	-moz-box-shadow: inset 0 1px 0 #98c9ff;
-	box-shadow: inset 0 1px 0 #98c9ff;
-	-o-border-radius: 4px;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	cursor: pointer; cursor: hand;
-}
-#inline a button {text-decoration: none !important;}
-
 #heart {
     position: relative;
     width: 100px;
@@ -291,7 +252,7 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 }
 
 
-/* #Gravity Forms ================================================== */
+/* #Form ================================================== */
 
 #gform {
 	width:600px;
@@ -304,8 +265,32 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 
 ul.gfield_checkbox li {float:left;}
 
+#gform_submit_button_1 {
+	font-family: 'Great Vibes', cursive;
+	text-decoration: none !important;
+	position:relative;
+	margin:10px;
+	padding: 8px 15px;
+	font-weight: bold;
+	font-size: 18px;
+	background: #1275FF;
+	border: 1px solid #155FB0;
+	color: white;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
+	background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
+	background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
+	-webkit-box-shadow: inset 0 1px 0 #98c9ff;
+	-moz-box-shadow: inset 0 1px 0 #98c9ff;
+	box-shadow: inset 0 1px 0 #98c9ff;
+	-o-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	cursor: pointer; cursor: hand;
+}
 
-/* Media Queries ================================================== */
+/* Media Queries ========================================= */
 
 @media screen 
 and (min-device-width : 320px)