scroll

tree/index.css

@@ -33,7 +33,6 @@ body{
     line-height: 5.3vw;
     max-width: 100%;
     max-height: 100%;
-    
 }
 
 span.special1{

tree/park.css

@@ -1,7 +1,4 @@
-@font-face {
+
-    font-family: sinistre;
-    src: url(fonts/Sinistre-S†Caroline.otf);
-}
 @font-face {
     font-family: sinistre;
     src: url(fonts/Sinistre-S†Caroline.woff),
@@ -25,9 +22,9 @@
 }
 
 @font-face {
-    font-family: jolyheavyitalic;
+    font-family: jolybold;
-    src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
+    src: url(fonts/JolyDisplay-BoldDisplay.woff),
-    url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
+    url(fonts/JolyDisplay-BoldDisplay.otf);
 }
 
  body {
@@ -37,17 +34,15 @@
  }
 
  ::-moz-selection { /* Code for Firefox */   
-    
     background: transparent;
   }
   ::selection {
-
     background: transparent;
   }
 
    #player_img {
-    bottom: 35%;
+    bottom: 25%;
-    left: 35%;
+    left: 15%;
     position:absolute ;
     z-index: 20;
 }
@@ -55,12 +50,10 @@
 
 #ground{
     position:relative ;
-    height:100vh;
+    height:90vh;
     width:4000px;
-}
-
-
     
+}
 
 #groundline {
     position: fixed;
@@ -87,13 +80,21 @@ div.text_container {
 button{
     -webkit-appearance: none;
     background-color: white;
-    border: 0.1vw black solid;
+    border: 0.11vw black solid;
     border-radius: 25vw;
     color:black;
     cursor:pointer;
     font-family: jolybolditalic;
 }
 
+button:hover{
+border: 0.11vw transparent solid;
+-webkit-box-shadow: 0px 0px 8px 2px  black;
+-moz-box-shadow: 0px 0px 8px 2px  black;
+box-shadow: 0px 0px 8px 2px  black;
+    
+}
+
 span.button_text{
     font-size: 1.6vw;
     padding: 8px;
@@ -103,11 +104,13 @@ span.button_text{
     font-family: jolybolditalic;
 }
 
-#close_news{
+.close {
-    position:fixed;
+    position:relative;
-    top:4%;
+    top:25px;
-    right:15%;
+    left:80%;
 }
+
+
 #newspaper{
     position:fixed;
    /* border: solid black 2px;*/
@@ -183,10 +186,13 @@ span.button_text{
 
 
 /*baloons */
- .baloons{
+.baloons_all{
+    z-index:102;
+
+ }
+.baloons{
     font-family:sinistre;
     font-size: 3.5vw;
-
  }
 #baloon1 {
     width: 20vw;
@@ -249,79 +255,134 @@ span.button_text{
 
 #bench {
     bottom: 35%;
-    left: 20%;
+    left: 8%;
     position: absolute;
     z-index:18;
 }
 
 #tree1 {
     top:5%;
-    left: 28%;
+    left: 12%;
     position: absolute;
 
 }
 #tree2 {
     bottom:45%;
-    left: 8%;
+    left: 4%;
     position: absolute;
     z-index:16;
 }
 #tree3 {
     bottom:50%;
-    left: 55%;
+    left: 25%;
     position: absolute;
     z-index:2;
 }
 
 #newspaperimg {
-    bottom: 42%;
+    bottom: 43%;
-    left: 25%;
+    left: 10%;
     position: absolute;
     z-index:19;
 }
 
 #flower1 {
     bottom:75%;
-    left: 17%;
+    left: 5%;
     position: absolute;
 }
 
 #flower2{
     bottom: 38%;
-    left: 8%;
+    left: 4%;
     position: absolute;
     z-index:17;
 }
 
 #flower3{
     bottom: 80%;
-    left: 65%;
+    left: 30%;
     position: absolute;
     z-index:17;
 }
 #flower4{
     bottom: 48%;
-    left: 48%;
+    left: 20%;
     position: absolute;
     z-index:17;
 }
 #flower5{
     bottom: 60%;
-    right: 14%;
+    left: 35%;
     position: absolute;
     z-index:17;
 }
 
 #grass1{
     bottom: 30%;
-    right: 20%;
+    left: 30%;
     position: absolute;
     z-index:17;
 }
 #grass2{
-    bottom: 80%;
+    bottom: 60%;
-    left: 2000px;
+    left: 55%;
+    position: absolute;
+    z-index:17;
+}
+
+#statue{
+    bottom: 70%;
+    left: 43%;
     position: absolute;
     z-index:17;
 }
 
+#tree4{
+    bottom: 25%;
+    left: 50%;
+    position: absolute;
+}
+
+#flower6{
+    bottom: 30%;
+    left: 70%;
+    position: absolute;
+}
+
+#dog{
+    bottom: 27%;
+    left: 54%;
+    position: absolute;
+    z-index:17;
+}
+
+
+#kiosk{
+    bottom: 70%;
+    left: 70%;
+    position: absolute;
+}
+
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+    color:white;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: white; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: white; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: white; 
+  }

tree/park.html

@@ -9,35 +9,37 @@
     
 </head>
 <body>
-  <button id="final_test" onclick="location.href='final.html';">go to final test </button>
 <!--baloons  -->
-<div class="comment1stpage baloons"id="baloon1" style="display: none;">
+<div class="baloons_all">
+    <div class="comment1stpage baloons"id="baloon1" style="display: none;">
       <p class="text_baloon1">
       It looks like the previous owner of the newspaper highlighted something
       </p>
-</div>
+    </div>
-<div class="comment1stpage baloons"id="baloon2" style="display: none;">
+    <div class="comment1stpage baloons"id="baloon2" style="display: none;">
       <p class="text_baloon1"></p>
       Who is N.?
-</p>
+    </p>
-</div>
+    </div>
 
-<div class="comment2stpage baloons"id="baloon3" style="display: none;">
+    <div class="comment2stpage baloons"id="baloon3" style="display: none;">
       <p class="text_baloon3">
         Amanda often volunteers for the cat shelter.<br>
         Can this be the reason why she is late?
       </p>
-</div>
+    </div>
-<div class="comment2stpage baloons"id="baloon4" style="display: none;">
+    <div class="comment2stpage baloons"id="baloon4" style="display: none;">
       <p class="text_baloon4"></p>
       I hope Amanda will arrive soon, <br>
       you still have to purchase the tickets!
-</p>
+    </p>
+    </div>
 </div>
  
+<div class="newspaper_wrap">
+<button class="close" style="display: none;"><span class="button_text">close</span></button>
  <!--newspaper pages -->
 
- <button id="close_news"style="display: none;"><span class="button_text">close</span></button>
     <div id="newspaper" style="display: none;">
         <div class="left_page">
 
@@ -95,13 +97,13 @@
         </div>
         
 
+    </div>
   </div>
 
     <div id="groundline"></div>
-    <div  id="player_img"></div>
-
-      
 
+    <div id="ground"> 
+      <div  id="player_img"></div>
          <img  id="bench" src="imgs/park/bench1.gif" height="20%">
          <img  id="tree1" src="imgs/park/tree1.gif" height="30%">
          <img  id="tree2" src="imgs/park/tree4.gif" height="25%">
@@ -114,8 +116,17 @@
          <img  id="flower5" src="imgs/park/flower1.gif" height="5%">
          <img  id="grass1" src="imgs/park/grass1.gif" height="75vw">
          <img  id="grass2" src="imgs/park/grass1.gif" height="75vw">
+         <img  id="statue" src="imgs/park/statue.gif" height="20%">
+         <img  id="tree4" src="imgs/park/tree4.gif" height="25%">
+         <img  id="flower6" src="imgs/park/flower1.1.gif" height="5%"> 
+         <img  id="dog" src="imgs/park/dog1.gif" height="10%"> 
+         <img  id="kiosk" src="imgs/park/stand3.gif" height="20%"> 
+
+
 
  
+       </div>
+      
     
 
     <div class="text_container"> 
@@ -138,19 +149,41 @@
 
 <script src="jquery.min.js"></script>
   <script>
+   // player moves 
 
-   //move 
    var $div = $('#player_img');
+    var screenLeftMin = 200;
+    var screenLeftMax = 870;
+      
+  function adjustScroll() {
+      var playerLeft = parseInt($div.css("left"));
+      var scrollLeft = $(document).scrollLeft();
+      var screenLeft = playerLeft - scrollLeft;
+      console.log ("screenleft:", screenLeft);
+        
+      if (screenLeft > screenLeftMax ) {
+          $(document).scrollLeft(playerLeft - screenLeftMax)
+      }
+      
+            if (screenLeft < screenLeftMin ) {
+          $(document).scrollLeft(playerLeft - screenLeftMin)
+      }  
+  }    
+      
 $(document).keydown(function(e) {
      switch (e.which) {
         case 37:
         $div.css('left', $div.offset().left - 20);
+        e.preventDefault();
+        adjustScroll();
               break;
         case 38:
         $div.css('top', $div.offset().top - 20);
               break;
         case 39:
         $div.css('left', $div.offset().left + 20);
+         e.preventDefault();
+             adjustScroll();
               break;
         case 40:
         $div.css('top', $div.offset().top + 20);
@@ -175,7 +208,7 @@ $(document).keydown(function(e) {
     // open newspaper 
 
     $(".open_newspaper_index").click (function(){
-      $("#newspaper, #close_news").toggle();
+      $("#newspaper, .close").toggle();
       //saves that u opened the newspaper in the local storage 
       window.localStorage.setItem("newspaper","opened")
       console.log ("newspaper:",localStorage.newspaper)
@@ -189,7 +222,7 @@ $(document).keydown(function(e) {
     });
 
     $("#arrow_back1").click (function(){
-      $("#baloon1, #baloon2, #baloon3, #baloon4, .school2,.school3").hide();
+      $("#baloon1, #baloon2, #baloon3, #baloon4, .school2,.school3, .message2").hide();
       $(".index, .school1, .message4").show();
     
     });
@@ -225,9 +258,9 @@ $(document).keydown(function(e) {
       $(".message4").show();
     });
 
-    $("#close_news").click (function(){
+    $(".close").click (function(){
       $("#newspaper").hide();
-      $("#close_news").hide();
+      $(".close").hide();
       $("#baloon1").hide();
       $("#baloon2").hide();
       $("#baloon3").hide();

tree/park_N.html

@@ -8,22 +8,11 @@
     <link rel="stylesheet" href="park.css">
     
 </head>
-<style>
-
-
-
-</style>
 <body>
 
     <div id="groundline"></div>
   
-    <!--<div  id="player_img"></div>-->
-    
     <div id="ground"> 
-    
-
-
-      
      <div  id="player_img"></div>
         <img  id="bench" src="imgs/park/bench1.gif" height="20%">
         <img  id="tree1" src="imgs/park/tree1.gif" height="30%">
@@ -38,13 +27,8 @@
         <img  id="grass1" src="imgs/park/grass1.gif" height="75vw">
         <img  id="grass2" src="imgs/park/grass1.gif" height="75vw">
 
-
       </div>
 
-
-   
-    
-
     <div class="text_container"> 
 move
   </div>
@@ -56,7 +40,7 @@ move
    // player moves 
 
    var $div = $('#player_img');
-    var screenLeftMin = 0;
+    var screenLeftMin = 200;
     var screenLeftMax = 870;
       
   function adjustScroll() {