animaciones con javascript

css/home.css

@@ -21,7 +21,8 @@ src: url('../fonts/OpenSans-Bold.ttf');
 }
 html, body{
 font-family:'openSans-regular';
-font-size: 20px;
+font-size: 16px;
+text-align: justify;
 margin: 0;
 padding: 0;
 height: 100%;
@@ -35,7 +36,7 @@ height: 100%;
 	background-image: url('../images/home.jpg');
 	margin-left: 0;
 	margin-top:0;
-	font-family:'raleway';
+	font-family:'openSans-light';
 	-webkit-text-stroke: 0.3px;
 }
 .navbar{
@@ -50,7 +51,7 @@ height: 100%;
 }
 .navlist{
 padding-top: 9px;
-font-size: 22px;
+font-size: 16px;
 margin:0;
 list-style-type: none;
 vertical-align: middle;
@@ -64,7 +65,7 @@ color: #6E7679;
 .navlist li{
 vertical-align: middle;
 display : inline;
-margin: 0 10px;
+margin: 0 30px;
 }
 
 /*		HOME	*/
@@ -90,7 +91,7 @@ padding: 40px 0;
 /*		SECCIONES*/
 
 #us{
-	background-color: #A8A39D;
+	background-color: #6E7679;
 	color: #F8F1E9;
 	height: 700px;
 	background-image: url('../images/shitti.png');
@@ -131,14 +132,17 @@ background-color: #BBD2F4;
 	background-repeat: no-repeat;
 	background-position: center center;
     position: relative;
-    -webkit-animation: slidein-right 2s; 
-    animation-name: slidein-right ;
-	animation-duration: 2s;
 	top: 66%;
-	left: 50%;
+	display: none;
 
 }
 
+.slidein-right{
+	display: block;
+	left: 50%;
+	animation: slidein-right 2s;
+	-webkit-animation: slidein-right 2s;
+}
 @-webkit-keyframes slidein-right {
     from {right: 10%;}
     to {right: 40%;}
@@ -157,12 +161,8 @@ background-color: #BBD2F4;
 	background-repeat: no-repeat;
 	background-position: center center;
     position: relative;
-    -webkit-animation: slidein-left 2s; 
-    animation-name: slidein-left ;
-	animation-duration: 2s;
-	top: 80%;
-	left: 40%;
-
+  	top: 80%;
+	display:none;
 }
 
 @-webkit-keyframes slidein-left {
@@ -174,6 +174,12 @@ background-color: #BBD2F4;
     from {left: 10%;}
     to {left: 40%;}
 }
+.slidein-left{
+	display: block;
+	left: 40%;
+	animation: slidein-left 2s;
+	-webkit-animation: slidein-left 2s;
+}
 
 
 /*		HEADERS	*/
@@ -183,6 +189,6 @@ h1{
 	text-align: left;
 	border-bottom: 1px solid white;
 	text-decoration: none;
-	font-size: 40px;
-	padding: 20px;
+	font-size: 30px;
+	padding: 0px;
 }

index.html

@@ -8,9 +8,7 @@
 	<title>Ventura & Inama - Code & Design</title>
 	<script src="js/jquery-1.10.2.js"></script>
 	<script type="text/javascript">
-
-	 $(document).ready(function () {
-	 	(function($) {
+		(function($) {
 			$.fn.visible = function(partial) {
 				var $t            = $(this),
 				$w            = $(window),
@@ -18,20 +16,31 @@
 				viewBottom    = viewTop + $w.height(),
 				_top          = $t.offset().top,
 				_bottom       = _top + $t.height(),
+
 				compareTop    = partial === true ? _bottom : _top,
 				compareBottom = partial === true ? _top : _bottom;
-			
-			return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
+			return ((_bottom <= viewBottom)); // && (compareTop >= viewTop));
 			};
 		})(jQuery);
-	 
-	 
+	 $(document).ready(function () {
+
+	 $(window).scroll(function(event) {
+		if ($("#us").visible(true)) {
+			$(".coffee-deiv").addClass("slidein-right"); 
+			$(".coffee-tati").addClass("slidein-left"); 
+		}else{
+			$(".coffee-deiv").removeClass("slidein-right"); 
+			$(".coffee-tati").removeClass("slidein-left");
+		}
+	});
+ 
 	   $('li a').click(function () {
 				$('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
 					return false;
 			}); 
 		
 	 });
+	 
  </script>
 	
 	
@@ -48,7 +57,8 @@
 			</ul>
 		</div>
 		<div id="logo">
-			<img src="images/logo.png">
+			<img src="images/logo.png"><br>
+			<img src="images/slogan.png">
 		</div>
 	</div>
 	<div class="seccion" id="whatdowedo">