Skip to content

Instantly share code, notes, and snippets.

@batazo

batazo/A jquery-animated-aquarium-css.markdown

Last active August 10, 2021 19:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save batazo/536e56aac8b2e96e0ed868d801b33721 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save batazo/536e56aac8b2e96e0ed868d801b33721 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery Animated Aquarium CSS
Raw
A jquery-animated-aquarium-css.markdown
Raw
index.html
<body translate="no" >
<div class="bubbles">
</div>
<div class="ground">
</div>
<div class="rock_1">
</div>
<div class="rock_2">
</div>
<div class="rock_3">
</div>
<div class="rock_4">
</div>
<div class="rock_5">
</div>
<div class="rock_6">
</div>
<div class="rock_7">
</div>
<div class="plant_1_wrap">
<div class="plant_1">
</div>
<div class="plant_2">
</div>
<div class="plant_3">
</div>
</div>
<div class="plant_2_wrap">
<div class="plant_4">
</div>
<div class="plant_5">
</div>
</div>
<div class="fish">
<img alt="Gold Fish-1" src="https://1.bp.blogspot.com/-ihoVSTQre20/V1FZc1OGXEI/AAAAAAAAa6Q/bwaNuZy0ctkixPDYvbR3LjaWXe5s7a-5gCK4B/s1600/ikan-mys2010.gif" /></div>
<div class="fish1">
<img alt="Gold Fish-2" src="https://1.bp.blogspot.com/-ihoVSTQre20/V1FZc1OGXEI/AAAAAAAAa6Q/bwaNuZy0ctkixPDYvbR3LjaWXe5s7a-5gCK4B/s1600/ikan-mys2010.gif" /></div>
<div style="position: fixed; bottom: 0px; height: 360px; right: 150px; width: 1400px;">
<script language="javascript" src="https://sites.google.com/site/emanloveforplace/tempatlagu/ikan-M2010.js"></script></div>
<div style="position: fixed; bottom: 0px; height: 160px; right: 150px; width: 1220px;">
<img alt=" " border="0" src="http://3.bp.blogspot.com/-3_PC-Hf3YVI/V1FaEpINvaI/AAAAAAAAa6k/_hy_-bsBTLYJTx4kFS_sz8tcBZZEbuvgACK4B/s1600/pohon-1-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height:330px; right: 30px; width: 1400px;">
<script language="javascript" src="https://sites.google.com/site/kodesite/svn/ballon-mys2010.js"></script></div>
</div>
<div style="position: fixed; bottom: 0px; height: 360px; right: 150px; width: 1400px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-qwUOIE74K2s/V1FardZuHOI/AAAAAAAAa6w/MbnPe9qjGH4fq2noS_Ysq_OpRuCPAeQNwCK4B/s1600/pohon-2-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 460px; right: 20px; width: 1400px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-qwUOIE74K2s/V1FardZuHOI/AAAAAAAAa6w/MbnPe9qjGH4fq2noS_Ysq_OpRuCPAeQNwCK4B/s1600/pohon-2-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 200px; left:150px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
<div style="bottom: 0px; height: 190px; right: 90px; width: 120px;">
<img alt=" " border="0" src="https://1.bp.blogspot.com/-MvbfS02tlKI/V1Fbi1oCBdI/AAAAAAAAa68/xW6zfMiJ6ug2dRRvIn2EY0_BB5TiFhIZACK4B/s1600/ikan2-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 290px; right: 190px; width: 1220px;">
<img alt=" " border="0" src="http://3.bp.blogspot.com/-3_PC-Hf3YVI/V1FaEpINvaI/AAAAAAAAa6k/_hy_-bsBTLYJTx4kFS_sz8tcBZZEbuvgACK4B/s1600/pohon-3-mys2010.png" title=" " /></div>
<div style="position: fixed; 0px; height: 390px; width: 2000px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-DbzS_2r3j5o/V1FgTOhvxSI/AAAAAAAAa88/ejyGqkDPSTwR0KK8gVQ2EIybU3FHAkVLACK4B/s1600/pohon-4-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 290px; right: 150px; width: 1720px;">
<img alt=" " border="0" src="http://3.bp.blogspot.com/-3_PC-Hf3YVI/V1FaEpINvaI/AAAAAAAAa6k/_hy_-bsBTLYJTx4kFS_sz8tcBZZEbuvgACK4B/s1600/pohon-1-mys2010.png" title=" " /></div>
<div id="beaker">
<span class="bubble">
<img border="0" height="60" name="e902" src="https://4.bp.blogspot.com/-rorBvXOHGzw/V1FYqw71c9I/AAAAAAAAa6I/jw59Ffb6QU05SzJvUfa4flTfEbYuHfwfwCK4B/s1600/ubur-mys2010.gif" width="100" /></span></div>
<div style="bottom: 120px; height: 190px; right: 800px; width: 120px;">
<script language="javascript" src="https://sites.google.com/site/emanloveforplace/tempatlagu/ikan2-M2010.js"></script></div>
</div>
<div style="position: fixed; bottom: 0px; height: 190px; left: 350px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-2l1Bvhj0v5Y/Vp5XCZtiKDI/AAAAAAAAXqE/20xID4L5kvE/s1600-r/ikan2-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 190px; left: 350px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 190px; left: 350px; width: 1900px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 290px; left: 150px; width: 1820px;">
<img alt=" " border="0" src="http://1.bp.blogspot.com/-2mov2EtgtHI/V1FlDgRLHSI/AAAAAAAAa9c/HxGyBtrQLlUVhVClTtjd_vzJB2cYHtargCK4B/s1600/pohon-5-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 130px; left: 440px; width: 120px;">
<img alt="" border="0" src="https://3.bp.blogspot.com/-6_pZBk4P7io/V1FdeNGXdfI/AAAAAAAAa7w/T8sg8au0EMAggDjlvMT0m-Gf17OpuzEGwCK4B/s1600/kerang-mys2010.gif" title="" /></div>
<div style="position: fixed; bottom: 0px; height: 410px; right: -151px; width: 400px;">
<img src="https://1.bp.blogspot.com/-Et6VU5nmlfY/V1Fc5fG0QQI/AAAAAAAAa7c/ybr0M3N4lq8huh_Xmzw9OluaFxwJGA0ggCK4B/s1600/rumput2-mys2010.png" name="e902" border="0" width="350" height="590" /></a>
<div style="position: fixed; bottom: 0px; height: 290px; right: -151px; width: 400px;">
<img src="https://3.bp.blogspot.com/-xJgwRbvDwZ8/V1FcW0bs5gI/AAAAAAAAa7M/ORMgvzRtcHMqXrOEXjjnAZPzF5XB4QAJACK4B/s1600/rumput-mys2010.png" name="e902" border="0" width="350" height="790" /></a>
<div style="position: fixed; bottom: 0px; height: 310px; right: 30px; width: 400px;">
<img src="https://1.bp.blogspot.com/-dupS6umNXZ0/V1FdzfSM1MI/AAAAAAAAa78/ecJujSeWipEg5UrU4TS35Xu6EMGvJ9g5QCK4B/s1600/pohon-3-mys2010.png" name="e902" border="0" width="350" height="1190" /></a>
<div style="position: fixed; bottom: 0px; height: 120px; left: 520px; width: 420px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-zg4HTUbuz-M/V1MOyIA9wZI/AAAAAAAAbAA/lLtJ_ufcI-Apmj5cqT9GE7GZiKiA28_RQCK4B/s1600/ikan3-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 370px; left: 520px; width: 210px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-mpuGf19Dl68/V1FeoP1rDrI/AAAAAAAAa8k/TQ8Zl0D3qHsIgYDtH4urGvS0WdX4hLRqACK4B/s1600/bambu-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 470px; left: 320px; width: 1210px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-qwUOIE74K2s/V1FardZuHOI/AAAAAAAAa6w/MbnPe9qjGH4fq2noS_Ysq_OpRuCPAeQNwCK4B/s1600/pohon-2-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 250px; left: 620px; width: 400px;">
<img alt=" " border="0" src="https://1.bp.blogspot.com/-ph5VEMx1okM/V1Ff78P-23I/AAAAAAAAa80/eop2LAOsFXMLfbhbmbBUXIpnuzoXk0w7wCK4B/s1600/zebra-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 290px; left: 350px; width: 1720px;">
<img alt=" " border="0" src="https://3.bp.blogspot.com/-DbzS_2r3j5o/V1FgTOhvxSI/AAAAAAAAa88/ejyGqkDPSTwR0KK8gVQ2EIybU3FHAkVLACK4B/s1600/pohon-4-mys2010.png" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 390px; left: 350px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 390px; left: 650px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
<div style="position: fixed; bottom: 0px; height: 290px; left: 850px; width: 1720px;">
<img alt=" " border="0" src="http://4.bp.blogspot.com/-zwvz0zAB1Lc/Vp99VYf9BWI/AAAAAAAAXqw/vRccKKunvqE/s1600-r/bubbles-mys2010.gif" title=" " /></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<canvas height="600" id="fishtank" width="1400">
</canvas></div>
</div>
</div>
</div>
</div>
<div class="container">
<canvas width="1400" height="600" id="Fish flocking simulation ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script>
Raw
script.js
/* --- VISIT : http://sule-m2010.blogspot.co.id/2016/07/animated-aquarium.html -- */
/* ---------------- FISH "CLASS" START -------------- */
var FOLLOW_DISTANCE = 100;
var Fish = function(id) {
this.id = id;
this.entourage = [];
// dx/yx is current speed, ox/oy is the previous one
this.ox = this.dx = Math.random() - 0.5;
this.oy = this.dy = Math.random() - 0.5;
this.x = canvas.width * Math.random();
this.y = canvas.height * Math.random();
// A couple of helper functions, the names should describe their purpose
Fish.prototype.angleToClosestFish = function(otherFish) {
otherFish = otherFish == null ? this.following : otherFish;
if (otherFish) {
return Math.atan2(otherFish.y - this.y, otherFish.x - this.x);
} else {
return Number.MAX_VALUE;
}
}
Fish.prototype.angleFromFishDirectionToClosestFish = function(otherFish) {
otherFish = otherFish == null ? this.following : otherFish;
if (otherFish) {
return Math.abs(deltaAngle(this.angle, this.angleToClosestFish(otherFish)));
} else {
return Number.MAX_VALUE;
}
}
Fish.prototype.angleDirectionDifference = function(otherFish) {
otherFish = otherFish == null ? this.following : otherFish;
if (otherFish) {
Math.abs(deltaAngle(this.angle, otherFish.angle));
} else {
return Number.MAX_VALUE;
}
}
// Update the fish "physics"
Fish.prototype.calc = function() {
this.ox = this.dx;
this.oy = this.dy;
var MAX_SPEED = 1.1;
var maxSpeed = MAX_SPEED;
//Do I need to find another fish buddy?
if (this.following == null || py(this.x - this.following.x, this.y - this.following.y) > FOLLOW_DISTANCE) {
if (this.following != null) {
if (keyDown) affinityLine(this.following, this, "white");
this.following.entourage.splice(this.following.entourage.indexOf(this));
}
this.following = null;
//attract closer to other fish - find closest
var closestDistance = Number.MAX_VALUE;
var closestFish = null;
for (var i = 0; i < fishes.length; i++) {
var fish = fishes[i];
if (fish != this) {
var distance = py(this.x - fish.x, this.y - fish.y);
// Is it closer, within the max distance and within the sector that the fish can see?
if (distance < closestDistance && fish.following != this && distance < FOLLOW_DISTANCE && this.angleFromFishDirectionToClosestFish(fish) < Math.PI * 0.25) {
closestDistance = distance;
closestFish = fish;
}
}
}
if (closestFish != null) {
this.following = closestFish;
closestFish.entourage.push(this);
}
}
// Fish is following another
if (this.following != null) {
// Go closer to other fish
this.followingDistance = py(this.x - this.following.x, this.y - this.following.y);
this.distanceFactor = 1 - this.followingDistance / FOLLOW_DISTANCE;
// If going head on, just break a little before following
if (this.angleDirectionDifference() > (Math.PI * 0.9) && // On colliding angle?
this.angleFromFishDirectionToClosestFish() < (Math.PI * 0.2)) { // In colliding sector?
this.dx += this.following.x * 0.1;
this.dy += this.following.y * 0.1;
if (keyDown) affinityLine(this.following, this, "yellow");
} else if (this.followingDistance > FOLLOW_DISTANCE * 0.3) { // Dont go closer if close
this.dx += Math.cos(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
this.dy += Math.sin(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
}
if (keyDown) affinityLine(this.following, this, "red");
}
// Go closer to center, crashing into the canvas walls is just silly!
if (this.x < canvas.width * .1 || this.x > canvas.width * .9 || this.y < canvas.height * .2 || this.y > canvas.height * .8) {
this.dx += (canvas.width / 2 - this.x) / 5000;
this.dy += (canvas.height / 2 - this.y) / 5000;
}
// Poor little fishies are scared of your cursor
if (py(this.x - cursor.x, this.y - cursor.y) < FOLLOW_DISTANCE * 0.75) {
this.dx -= (cursor.x - this.x) / 500;
this.dy -= (cursor.y - this.y) / 500;
maxSpeed = 4;
if (keyDown) affinityLine(cursor, this, "green");
}
// If following fish, try avoid going close to your siblings
if (this.following != null) {
for (var i = 0; i < this.following.entourage.length; i++) {
var siblingFish = this.following.entourage[i];
if (siblingFish !== this) {
if (py(this.x - siblingFish.x, this.y - siblingFish.y) < FOLLOW_DISTANCE * 0.2) {
if (keyDown) affinityLine(siblingFish, this, "yellow");
this.dx -= (siblingFish.x - this.x) / 1000;
this.dy -= (siblingFish.y - this.y) / 1000;
}
}
}
}
// Calculate heading from new speed
this.angle = Math.atan2(this.dy, this.dx);
// Grab the speed from the vectors, and normalize it
var speed = Math.max(0.1, Math.min(maxSpeed, py(this.dx, this.dy)));
// Recreate speed vector from recombining angle of direction with normalized speed
this.dx = Math.cos(this.angle) * (speed + speedBoost);
this.dy = Math.sin(this.angle) * (speed + speedBoost);
// Fish like to move it, move it!
this.x += this.dx;
this.y += this.dy;
}
}
/* ---------------------- MAIN START -------------------- */
var canvas = document.getElementById('Fish flocking simulation ');
var context = canvas.getContext('2d');
var fishes = [];
var speedBoostCountdown = 200,
speedBoost = 0,
SPEED_BOOST = 2;
var fishflockingsimulation = new Image()
fishflockingsimulation.onload = function() {
update();
};
fishflockingsimulation.src = "http://2.bp.blogspot.com/-uWu5O2SUk3A/WNn7p4Q_b5I/AAAAAAAAdo8/YLPQljHdeDYZLqXnEpvIG5iJgfjmz_TbgCK4B/s1600/Ikan-kecil-M2010.png";
//Draw Circle
function draw(f) {
var r = f.angle + Math.PI;
context.translate(f.x, f.y);
context.rotate(r);
var w = 20;
var acc = py(f.dx - f.ox, f.dy - f.oy) / 0.05;
// If a fish does a "flip", make it less wide
if (acc > 1) {
w = 10 + 10 / acc;
}
context.drawImage(fishflockingsimulation, 0, 0, w, 6);
context.rotate(-r);
context.translate(-f.x, -f.y);
}
// Pythagoras shortcut
function py(a, b) {
return Math.sqrt(a * a + b * b);
}
//------------ USER INPUT START -------------
var cursor = {
x: 0,
y: 0
};
var cursorDown = false,
keyDown = false;
document.onmousemove = function(e) {
cursor.x = e.pageX - (window.innerWidth / 2 - canvas.width / 2);
cursor.y = e.pageY - (window.innerHeight / 2 - canvas.height / 2);
}
document.onmouseout = function(e) { //Out of screen is not a valid pos
cursor.y = cursor.x = Number.MAX_VALUE;
}
document.onmousedown = function() {
activateSpeedBoost();
cursorDown = true;
}
document.onmouseup = function() {
cursorDown = false;
}
document.onkeydown = function() {
keyDown = true;
}
document.onkeyup = function() {
keyDown = false;
}
//------------ USER INPUT STOP -------------
function deltaAngle(f, o) { //Find the shortest angle between two
var r = f - o;
return Math.atan2(Math.sin(r), Math.cos(r));
}
function affinityLine(f, o, c) { //Draw a line with pretty gradient
var grad = context.createLinearGradient(f.x, f.y, o.x, o.y);
grad.addColorStop(0, c);
grad.addColorStop(1, "black");
context.strokeStyle = grad;
context.beginPath();
context.moveTo(f.x, f.y);
context.lineTo(o.x, o.y);
context.stroke();
}
function activateSpeedBoost() {
speedBoostCountdown = 400 + Math.round(400 * Math.random());
speedBoost = SPEED_BOOST;
}
//Update and draw all of them
function update() {
if (fishes.length < 500) {
fishes.push(new Fish(fishes.length));
}
if (!cursorDown) {
//clear the canvas
canvas.width = canvas.width; //Try commenting this line :-)
//Update and draw fish
for (var i = 0; i < fishes.length; i++) {
var fish = fishes[i];
fish.calc();
draw(fish);
}
}
speedBoostCountdown--;
if (speedBoostCountdown < 0) {
activateSpeedBoost();
}
if (speedBoost > 0) {
speedBoost -= SPEED_BOOST / 80; //Reduce speed bost fast!
} else {
speedBoost = 0;
}
requestAnimationFrame(update);
}
</script>
<script>
/* ---------------------- gelembung ----------------------- */
var colours=new Array("#FF9900", "#FF9900", "#FF9900", "#FF9900", "#FF9900"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
Raw
style.css
body {
background: #000;
overflow:hidden;
background: url('https://4.bp.blogspot.com/-sX7f-JvdAIQ/V_jfu5uaLqI/AAAAAAAAc0g/XeEFZxTnkbULrzrKbGyNl1qPIt2dZZGhQCK4B/s1600/wallpaper-M2010s.PNG') no-repeat center center fixed;
background-size:cover;
}
.container {
position:absolute;
left: 50%;
margin-left: -700px;
top: 50%;
margin-top: -300px;
height: 600px;
width: 1400px;
}
* {
margin: 0;
padding: 0;
}
#fishflockingsimulation {
display: none;
}
body {
background: #000;
overflow:hidden;
background: url('xx') no-repeat center center fixed;
background-size:cover;
}
.container {
position:absolute;
left: 50%;
margin-left: -700px;
top: 50%;
margin-top: -300px;
height: 600px;
width: 1400px;
}
* {
margin: 0;
padding: 0;
}
#fishbitmap {
display: none;
}
body {
background:url(https://3.bp.blogspot.com/-FdfCkWVODtA/WDfMR6E6YtI/AAAAAAAAdCY/ELxLqzIkBxY76rPhG7LPJbhL-TH-o6evgCK4B/s1600/Wallpaper-Sea-M2010.jpg) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fish{
height: 230px;
left: 200px;
position: absolute;
top: 55%;
width: 290px;
z-index: 90;
left: 200px;
z-index: 100;
animation:swim 30s infinite linear;
/*firefox*/
-moz-animation:swim 30s infinite linear;
/*webkit*/
-webkit-animation:swim 30s infinite linear;
}
@keyframes swim{
from{
left:80%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:30%;
left:70%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:40%;
}
51%{
left:50%px;
z-index:150;
}
60%{
left:30%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:80px;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:15%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
71%{
left:40px;
}
80%{
left:60%;
}
81%{
left:65%;
top:45%;
}
82%{
left:76%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:45%;
left:77%;
}
84%{
top:50%;
left:70%;
z-index:28;
}
88%{
top:60%;
left:75%;
z-index:28;
}
to{
left:80%;
}
}
@-moz-keyframes swim{
from{
left:80%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:30%;
left:70%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:40%;
}
51%{
left:50%px;
z-index:150;
}
60%{
left:30%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:80px;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:15%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
71%{
left:40px;
}
80%{
left:60%;
}
81%{
left:65%;
top:45%;
}
82%{
left:76%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:45%;
left:77%;
}
84%{
top:50%;
left:70%;
z-index:28;
}
88%{
top:60%;
left:75%;
z-index:28;
}
to{
left:80%;
}
}
@-webkit-keyframes swim{
from{
left:80%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:30%;
left:70%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:40%;
}
51%{
left:50%px;
z-index:150;
}
60%{
left:30%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:80px;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:15%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
71%{
left:40px;
}
80%{
left:60%;
}
81%{
left:65%;
top:45%;
}
82%{
left:76%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:45%;
left:77%;
}
84%{
top:50%;
left:70%;
z-index:28;
}
88%{
top:60%;
left:75%;
z-index:28;
}
to{
left:80%;
}
}
.fish1{
height: 230px;
left: 200px;
position: absolute;
top: 65%;
width: 290px;
z-index: 90;
left: 200px;
z-index: 100;
animation:swim1 40s infinite linear;
/*firefox*/
-moz-animation:swim1 40s infinite linear;
/*webkit*/
-webkit-animation:swim1 40s infinite linear;
}
@keyframes swim1{
from{
left:75%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:75%;
left:75%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:60%;
}
51%{
left:50%;
z-index:150;
}
60%{
left:25%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:4%;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:35%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
75%{
left:50%;
}
80%{
left:60%;
}
81%{
left:65%;
top:70%;
}
82%{
left:70%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:72%;
left:68%;
}
84%{
top:65%;
left:70%;
z-index:28;
}
88%{
top:70%;
left:75%;
z-index:28;
}
to{
left:75%;
}
}
@-moz-keyframes swim1{
from{
left:75%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:75%;
left:75%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:60%;
}
51%{
left:50%;
z-index:150;
}
60%{
left:25%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:4%;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:35%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
75%{
left:50%;
}
80%{
left:60%;
}
81%{
left:65%;
top:70%;
}
82%{
left:70%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:72%;
left:68%;
}
84%{
top:65%;
left:70%;
z-index:28;
}
88%{
top:70%;
left:75%;
z-index:28;
}
to{
left:75%;
}
}
@-webkit-keyframes swim1{
from{
left:75%;
}
20%{
left:0;
transform:scaleX(1);
z-index:90;
}
20.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
21%{
left:80px;
}
42%{
left:60%;
}
50%{
z-index:28;
top:65%;
left:75%;
transform:scaleX(-1);
}
50.5%{
transform:scaleX(1);
z-index:100;
left:75%;
top:50%;
}
51%{
left:50%;
z-index:150;
}
60%{
left:25%;
z-index:150;
}
64%{
left:20%;
z-index:150;
}
66%{
left:4%;
z-index:150;
}
69%{
left:-30px;
z-index:150;
}
70%{
top:35%;
left:-30px;
transform:scaleX(1);
z-index:90;
}
70.5%{
transform:scaleX(-1);
z-index:10;
left:-30px;
}
75%{
left:50%;
}
80%{
left:60%;
}
81%{
left:65%;
top:60%;
}
82%{
left:70%;
transform:scaleX(-1);
}
82.5%{
transform:scaleX(1);
top:62%;
left:68%;
}
84%{
top:65%;
left:70%;
z-index:28;
}
88%{
top:60%;
left:75%;
z-index:28;
}
to{
left:75%;
}
}
header, #header {
background-color:#185C8A;background-color:rgba(99, 99, 99, 0.5);color:#fff;display:block;padding: 10px 0; width:100%; font-size:1.2em;font-family: 'Cherry Swash', trebuchet ms, cursive
}
h1, p {text-align: center}
header h1 {text-align: center}header a, a:visited {
text-decoration:none;color: #06C}
@keyframes greenPulse {
0% {box-shadow:0 0 30px #4bbec8}
50% {box-shadow:0 0 80px #4bbec8}
100% {box-shadow:0 0 30px #4bbec8}
}
div#beaker span.glow {
width:100%;
height:100%;background:##222;
position:relative;
display:block;
border-radius:200px;
animation:greenPulse 2s infinite;
-webkit-animation:greenPulse 2s infinite;
-moz-animation:greenPulse 2s infinite;
-o-animation:greenPulse 2s infinite;
}
@keyframes bubbleUp {
0% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
1% {bottom:110px;-webkit-transform:scale(.3);opacity:0}
30% {bottom:110px;-webkit-transform:scale(.8);opacity:1}
95% {bottom:545px;-webkit-transform:scale(.3);opacity:1}
99% {bottom:550px;-webkit-transform:scale(3);opacity:0}
100% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
}
div#beaker span.bubble {
background:#fff;
width:80px;
height:80px;
position:absolute;
display:block;
left:110px;
bottom:110px;
border-radius:100px;
background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
background:gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
animation:bubbleUp 4s infinite ease-in-out;
-webkit-animation:bubbleUp 4s infinite ease-in-out;
-o-animation:bubbleUp 4s infinite ease-in-out;
-moz-animation:bubbleUp 4s infinite ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment