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

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

@ -58,7 +58,8 @@
}
#ground_color {
width: 5100px;
/*width: 5100px;*/
width:560vh;
height: 120%;
position:fixed;
margin:-100px;
@ -69,7 +70,8 @@
#ground{
position:absolute;
height:100%;
width:5000px;
/*width:5000px;*/
width:560vh;
}
#groundline {
@ -258,12 +260,6 @@ div#player_img {
z-index: 10;
}
#amanda{
right: 11.5%;
top:33%;
position: absolute;
z-index: 10;
}
/*images*/
@ -312,7 +308,7 @@ div#player_img {
.bubble1 {
right: 8.5%;
top:12%;
top:13%;
position: absolute;
background: #ffffff;
color: #000000;
@ -326,6 +322,7 @@ div#player_img {
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
cursor: pointer;
}
.bubble1:after {
content: '';
@ -370,6 +367,7 @@ div#player_img {
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
cursor: pointer;
}
.bubble2:after {
content: '';
@ -398,8 +396,36 @@ div#player_img {
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 */

@ -10,11 +10,11 @@
</head>
<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>
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px" >
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
@ -28,67 +28,70 @@
<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="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
</div>
<div class="tree2">
<div class="tree2 blur">
<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;">
</div>
<div class="tree3">
<div class="tree3 blur">
<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;">
</div>
<div class="tree4">
<div class="tree4 blur">
<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;">
</div>
<div class="tree5">
<div class="tree5 blur">
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
</div>
<div class="tree6">
<div class="tree6 blur">
<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;">
</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="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
</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="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
</div>
<div class="figure1">
<div class="figure1 blur">
<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;">
</div>
<div class="figure2">
<div class="figure2 blur">
<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;">
</div>
<div class="figure3">
<div class="figure3 blur">
<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;">
</div>
<div class="figure4">
<div class="figure4 blur">
<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;">
</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_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;">
</div>
<img class="shooting_place1 bad" 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_place3 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 blur" 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;">
<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="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>
<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" >
@ -185,6 +188,11 @@ $(document).keydown(function(e) {
$("#tree_flipped4").show();
}
if (left_Percentage >= 70) {
$(".message1").hide();
$(".message2").show();
}
switch (e.which) {
case 37:
offset.left -= 20;
@ -203,9 +211,10 @@ $(document).keydown(function(e) {
}
if (offset.left > $("#ground").width() - 1090) {
offset.left = $("#ground").width() - 1090;
$(document).scrollLeft(4000);
/*$(document).scrollLeft(4000);
$(".message1").hide();
$(".message2").show();
*/
}
$div.css("left", offset.left);
@ -247,28 +256,41 @@ $(document).keydown(function(e) {
function reach_counter() {
if ( shooting_counter == 3 ) {
$("#thunders").show();
setTimeout( function () {
$("#cloud, #cloud2").show();
setTimeout( function () {
$(".blur").addClass("blur_background");
$("#amanda").show();
$(".message2").hide();
$(".message3").show();
setTimeout( function () {
$(".bubble1").show();
setTimeout( function () {
}, 500);
}, 800);
}, 500);
}
}
$(".bubble1").click(function() {
$(".bubble1").hide();
$(".bad").hide();
$(".good").show();
$(".stop_invert").removeClass("invert");
$('html').css({overflow: 'hidden'});
/*$(".stop_invert").removeClass("invert");*/
/*$('html').css({overflow: 'hidden'});*/
setTimeout( function () {
$(".bubble2").show();
$(".message3").hide();
$(".message4").show();
}, 2000);
}, 4000);
}, 2000);
};
}
setTimeout( function () {
$(".blur").removeClass("blur_background");
}, 500);
}, 500);
});
$(".bubble2").click(function() {
$(".bubble2").hide();
});

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

Loading…
Cancel
Save