I put together this demo:
By clicking, a red box falls down.
The issue arises when trying to determine the screen size using only CSS. In my demo, I set the box to fall for 1000px regardless of the actual screen height.
Here is the keyframe code snippet:
@include keyframes("fall"){
to{
top: 1000px;
}
}
Unfortunately, using bottom: 0px; isn't viable as it doesn't solve the main problem of determining where the fall should start from.
This is the JavaScript script called FallBox.js:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I dislike brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
Using overflow: hidden; in the parent div could be a solution, but it's not ideal. It may restrict users with larger screens and I want the box to stop when reaching the edge, similar to hitting the ground and not passing through.
An alternative solution involving the CSSOM API was found online, however, even Mozilla developers are unsure about its compatibility.
So, how can I halt the animation upon hitting the screen edge when properties cannot be injected via JavaScript?
Thank you.