master
*anna* 3 years ago
parent dab11e36da
commit 11871f5033

@ -321,8 +321,8 @@ img#cat3{
#amanda{ #amanda{
left: 46.5%; left: 45%;
bottom:50%; bottom:48%;
position: absolute; position: absolute;
z-index: 12; z-index: 12;
} }

@ -58,7 +58,8 @@
} }
#ground_color { #ground_color {
width: 5100px; /*width: 5100px;*/
width:560vh;
height: 120%; height: 120%;
position:fixed; position:fixed;
margin:-100px; margin:-100px;
@ -69,7 +70,8 @@
#ground{ #ground{
position:absolute; position:absolute;
height:100%; height:100%;
width:5000px; /*width:5000px;*/
width:560vh;
} }
#groundline { #groundline {
@ -258,12 +260,6 @@ div#player_img {
z-index: 10; z-index: 10;
} }
#amanda{
right: 11.5%;
top:33%;
position: absolute;
z-index: 10;
}
/*images*/ /*images*/
@ -312,7 +308,7 @@ div#player_img {
.bubble1 { .bubble1 {
right: 8.5%; right: 8.5%;
top:12%; top:13%;
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
color: #000000; color: #000000;
@ -326,6 +322,7 @@ div#player_img {
padding: 18px; padding: 18px;
border: #000000 solid 1px; border: #000000 solid 1px;
z-index: 50; z-index: 50;
cursor: pointer;
} }
.bubble1:after { .bubble1:after {
content: ''; content: '';
@ -370,6 +367,7 @@ div#player_img {
padding: 18px; padding: 18px;
border: #000000 solid 1px; border: #000000 solid 1px;
z-index: 50; z-index: 50;
cursor: pointer;
} }
.bubble2:after { .bubble2:after {
content: ''; content: '';
@ -398,8 +396,36 @@ div#player_img {
display: block; display: block;
} }
#amanda{
right: 11.5%;
top:33%;
position: absolute;
z-index: 31;
}
#cloud{
top: 40%;
right: 10%;
position: absolute;
z-index:30;
}
#cloud2{
top: 38%;
right: 12%;
position: absolute;
z-index:30;
}
#thunders{
top: 0%;
right: 9%;
position: absolute;
z-index:30;
}
.blur_background {
filter: blur(20px);
}
/* hide scroll bar */ /* hide scroll bar */

@ -10,12 +10,12 @@
</head> </head>
<body > <body >
<div id="ground_color" class="invert scroll-pane stop_invert"></div> <div id="ground_color" class="invert scroll-pane stop_invert blur"></div>
<div id="groundline" class="invert scroll-pane stop_invert"></div> <div id="groundline" class="invert scroll-pane stop_invert blur "></div>
<div class="army"> <div class="army blur">
<div id="player_img" ></div> <div id="player_img"></div>
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px" > <img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px" >
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px"> <img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
<img id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px"> <img id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px">
@ -28,67 +28,70 @@
<div id="ground" class="scroll-pane"> <div id="ground" class="scroll-pane">
<div class="tree1"> <div class="tree1 blur">
<img id="tree1" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree1" src="imgs/spring_river/tree.gif" height="160px">
<img id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> <img id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div> </div>
<div class="tree2"> <div class="tree2 blur">
<img id="tree2" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree2" src="imgs/spring_river/tree.gif" height="160px">
<img id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> <img id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div> </div>
<div class="tree3"> <div class="tree3 blur">
<img id="tree3" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree3" src="imgs/spring_river/tree.gif" height="160px">
<img id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> <img id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div> </div>
<div class="tree4"> <div class="tree4 blur">
<img id="tree4" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree4" src="imgs/spring_river/tree.gif" height="160px">
<img id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> <img id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div> </div>
<div class="tree5"> <div class="tree5 blur">
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
</div> </div>
<div class="tree6"> <div class="tree6 blur">
<img id="tree6" src="imgs/spring_river/tree.gif" height="160px"> <img id="tree6" src="imgs/spring_river/tree.gif" height="160px">
<img id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> <img id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div> </div>
<div class="children1"> <div class="children1 blur">
<img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px"> <img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px">
<img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;"> <img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
</div> </div>
<div class="children2"> <div class="children2 blur">
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px"> <img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px">
<img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;"> <img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
</div> </div>
<div class="figure1"> <div class="figure1 blur">
<img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px"> <img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px">
<img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;"> <img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;">
</div> </div>
<div class="figure2"> <div class="figure2 blur">
<img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="110px"> <img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="110px">
<img id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="110px" style="display: none;"> <img id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="110px" style="display: none;">
</div> </div>
<div class="figure3"> <div class="figure3 blur">
<img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px"> <img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px">
<img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;"> <img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;">
</div> </div>
<div class="figure4"> <div class="figure4 blur">
<img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px"> <img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
<img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;"> <img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;">
</div> </div>
<div class="decoration"> <div class="decoration blur">
<img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="100px"> <img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="100px">
<img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;"> <img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;">
</div> </div>
<img class="shooting_place1 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;"> <img class="shooting_place1 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
<img class="shooting_place2 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;"> <img class="shooting_place2 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
<img class="shooting_place3 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;"> <img class="shooting_place3 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;"> <img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
<div class="bubble1 invert stop_invert"style="display: none;"><span id="player_name"></span>, where have you been?</div> <div class="bubble1 invert stop_invert" style="display: none;"><span id="player_name"></span>, where have you been? ✜</div>
<div class="bubble2 invert stop_invert"style="display: none;">Follow me, I think you made a colossal blunder here</div> <div class="bubble2 invert stop_invert" style="display: none;">Follow me, I think you made a colossal blunder here ■</div>
<img id="cloud" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
<img id="cloud2" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
<img id="thunders" src="imgs/saurian_headquarter/thunder.gif" height="190px" style="display: none;">
<div class="text_container invert stop_invert" > <div class="text_container invert stop_invert" >
@ -185,6 +188,11 @@ $(document).keydown(function(e) {
$("#tree_flipped4").show(); $("#tree_flipped4").show();
} }
if (left_Percentage >= 70) {
$(".message1").hide();
$(".message2").show();
}
switch (e.which) { switch (e.which) {
case 37: case 37:
offset.left -= 20; offset.left -= 20;
@ -203,9 +211,10 @@ $(document).keydown(function(e) {
} }
if (offset.left > $("#ground").width() - 1090) { if (offset.left > $("#ground").width() - 1090) {
offset.left = $("#ground").width() - 1090; offset.left = $("#ground").width() - 1090;
$(document).scrollLeft(4000); /*$(document).scrollLeft(4000);
$(".message1").hide(); $(".message1").hide();
$(".message2").show(); $(".message2").show();
*/
} }
$div.css("left", offset.left); $div.css("left", offset.left);
@ -247,28 +256,41 @@ $(document).keydown(function(e) {
function reach_counter() { function reach_counter() {
if ( shooting_counter == 3 ) { if ( shooting_counter == 3 ) {
$("#amanda").show(); $("#thunders").show();
$(".message2").hide();
$(".message3").show();
setTimeout( function () { setTimeout( function () {
$(".bubble1").show(); $("#cloud, #cloud2").show();
setTimeout( function () { setTimeout( function () {
$(".bad").hide(); $(".blur").addClass("blur_background");
$(".good").show(); $("#amanda").show();
$(".stop_invert").removeClass("invert"); $(".message2").hide();
$('html').css({overflow: 'hidden'}); $(".message3").show();
setTimeout( function () { setTimeout( function () {
$(".bubble2").show(); $(".bubble1").show();
$(".message3").hide(); }, 500);
$(".message4").show(); }, 800);
}, 2000); }, 500);
}, 4000); }
}, 2000);
};
} }
$(".bubble1").click(function() {
$(".bubble1").hide();
$(".bad").hide();
$(".good").show();
/*$(".stop_invert").removeClass("invert");*/
/*$('html').css({overflow: 'hidden'});*/
setTimeout( function () {
$(".bubble2").show();
$(".message3").hide();
$(".message4").show();
setTimeout( function () {
$(".blur").removeClass("blur_background");
}, 500);
}, 500);
});
$(".bubble2").click(function() {
$(".bubble2").hide();
});

@ -34,6 +34,7 @@
color: black; color: black;
background-color: #c94dff; background-color: #c94dff;
} }
body{ body{
font-size: 1.2vw; font-size: 1.2vw;

Loading…
Cancel
Save