annasandri
/
pizzagate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scroll

Browse Source
master
*anna* 4 years ago
parent 3edb1297a9
commit 2863cfbb47
12 changed files with 185 additions and 108 deletions
Show Stats Download Patch File Download Diff File

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
tree/.DS_Store vendored
View File

Binary file not shown.

BIN
tree/imgs/.DS_Store vendored
View File

Binary file not shown.

BIN
tree/imgs/park/.DS_Store vendored
View File

Binary file not shown.

BIN
tree/imgs/park/stand1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
tree/imgs/park/stand2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tree/imgs/park/stand3.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
tree/imgs/park/statue.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

1
tree/index.css
Unescape Escape View File

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

135
tree/park.css
Unescape Escape View File

@ -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;
src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
font-family: jolybold;
src: url(fonts/JolyDisplay-BoldDisplay.woff),
url(fonts/JolyDisplay-BoldDisplay.otf);
}
body {
@ -36,18 +33,16 @@
}
::-moz-selection { /* Code for Firefox */
::-moz-selection { /* Code for Firefox */
background: transparent;
}
::selection {
background: transparent;
}
#player_img {
bottom: 35%;
left: 35%;
bottom: 25%;
left: 15%;
position:absolute ;
z-index: 20;
}
@ -55,13 +50,11 @@
#ground{
position:relative ;
height:100vh;
height:90vh;
width:4000px;
}
#groundline {
position: fixed;
bottom:0px;
@ -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{
position:fixed;
top:4%;
right:15%;
.close {
position:relative;
top:25px;
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%;
left: 25%;
bottom: 43%;
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%;
left: 2000px;
bottom: 60%;
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;
}

135
tree/park.html
Unescape Escape View File

@ -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;">
<p class="text_baloon1">
It looks like the previous owner of the newspaper highlighted something
</p>
</div>
<div class="comment1stpage baloons"id="baloon2" style="display: none;">
<p class="text_baloon1"></p>
Who is N.?
</p>
</div>
<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 class="comment1stpage baloons"id="baloon2" style="display: none;">
<p class="text_baloon1"></p>
Who is N.?
</p>
</div>
<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 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>
<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 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>
</div>
</div>
<!--newspaper pages -->
<button id="close_news"style="display: none;"><span class="button_text">close</span></button>
<div class="newspaper_wrap">
<button class="close" style="display: none;"><span class="button_text">close</span></button>
<!--newspaper pages -->
<div id="newspaper" style="display: none;">
<div class="left_page">
@ -96,26 +98,35 @@
</div>
</div>
<div id="groundline"></div>
<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%">
<img id="tree3" src="imgs/park/tree4.gif" height="25%">
<img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
<img id="flower1" src="imgs/park/flower1.gif" height="5%">
<img id="flower2" src="imgs/park/flower3.gif" height="7%">
<img id="flower3" src="imgs/park/flower3.1.gif" height="6%">
<img id="flower4" src="imgs/park/flower1.1.gif" height="5%">
<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">
<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%">
<img id="tree3" src="imgs/park/tree4.gif" height="25%">
<img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
<img id="flower1" src="imgs/park/flower1.gif" height="5%">
<img id="flower2" src="imgs/park/flower3.gif" height="7%">
<img id="flower3" src="imgs/park/flower3.1.gif" height="6%">
<img id="flower4" src="imgs/park/flower1.1.gif" height="5%">
<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,22 +149,44 @@
<script src="jquery.min.js"></script>
<script>
//move
// player moves
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);
$div.css('left', $div.offset().left - 20);
e.preventDefault();
adjustScroll();
break;
case 38:
$div.css('top', $div.offset().top - 20);
$div.css('top', $div.offset().top - 20);
break;
case 39:
$div.css('left', $div.offset().left + 20);
$div.css('left', $div.offset().left + 20);
e.preventDefault();
adjustScroll();
break;
case 40:
$div.css('top', $div.offset().top + 20);
$div.css('top', $div.offset().top + 20);
break;
}
})
@ -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();

22
tree/park_N.html
Unescape Escape View File

@ -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="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%">
@ -37,14 +26,9 @@
<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">
</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() {

Write Preview
Loading…
Cancel
Save