@ -23,7 +23,6 @@
animation: wave 5s linear infinite;
}
@-webkit-keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
@ -46,17 +45,19 @@
transform: scale(-0.3, 0.3);
top:50%;
left:50%;
margin-top:-75 px;
margin-top:-150 px;
position:absolute;
margin-left:-605 px;
margin-left:-1000 px;
}
.boat .wrap{
margin:auto;
width:21 0px;
width:86 0px;
height:150px;
overflow:hidden;
position:relative;
padding:50px 0 0 2 5px;
padding:50px 0 0 500 px;
}
.boat .main{
bottom:-3px;
@ -337,6 +338,7 @@
bottom:0;
left:150px;
position:absolute;
margin-left: 450px;
}
.boat .water .drops{
width:300px;
@ -566,7 +568,7 @@
/* The alert message box */
.alert {
left: -20 0px;
left: 24 0px;
position: absolute;
width: 236px;
padding: 20px 30px 80px 20px;
@ -612,9 +614,11 @@ z-index: 101;
}
#black_hole{
left: 1275 .5px;
left: 3000 .5px;
top: 559.5px;
transform: scale(5,5) !important;}
transform: scale(5,5) !important;
display: none;}
.black_hole {
border-color: #00fc33 !important;
background-color: black;
@ -653,6 +657,15 @@ top: 717px;}
100% {-webkit-transform: scale(3, 3); opacity: 0.0;}
}
.btn{ display: none;
position: absolute;
left: 2640px;
top: 220px;
width: 500px;
padding: 100px;
text-align: center;
color: white;}
< / style >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script >
< / head >
@ -710,51 +723,53 @@ top: 717px;}
< img id = "col1" src = "../img/column3.gif" class = "draggable" >
< img id = "col2" src = "../img/column3.gif" class = "draggable" >
< / div >
< div id = "black_hole" class = "pulse draggable " >
<!-- <div id="black_hole" class="pulse">
< div id = "pulse1" class = "pulsate black_hole" > < / div >
< div id = "bh1" class = "pulsate black_hole" > < / div >
< div id = "bh2" class = "pulsate black_hole" > < / div >
< / div >
< script type = "text/javascript" src = "../scripts/drag.js" > < / script >
< / div > -->
< div class = "btn" > Some day the piecing together of dissociated knowledge will open up a < a href = "http://www.google.com" onclick = "next()" target = "_parent" > new reality< / a > < / div >
< script type = "text/javascript" >
var pane = $('#sea'),
box = $('#mBoat'),
col = $('#col'),
w = pane.width() - box.width()+2 000,
w = pane.width() - box.width()+5 000,
d = {},
x = 10;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
setInterval(function() {
col.css({
left: function(i,v) { return newa(v, 37, 39); },
top: function(i,v) { return newa(v, 38, 40); }
});
}, 20);
$(document).keydown(
function(e){
if (e.keyCode == 37) {
e.preventDefault();
}
});
< / script >
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
$(document).keydown(
function(e){
if (e.keyCode == 37) {
e.preventDefault();
}
});
// var l = box.css('left');
// if (l > 3000){
// $('#black_hole').css('display','inline');
// }
setInterval(function() {
$('.btn').css('display', 'inline');
}, 15000);
< / script >
< / body >