Difference between revisions of "Template:TecCEM/BubblesTemplate"

 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
        <style type="text/css">
 +
            @keyframes rise_up{
 +
from{
 +
bottom: 10%;
 +
}
 +
to{
 +
bottom: 90%;
 +
}
 +
      }
 +
        </style>
 +
 
<script type="text/javascript">
 
<script type="text/javascript">
 
function generate_bubble(size_px, left, speed_percentage){
 
function generate_bubble(size_px, left, speed_percentage){
 
var div = document.createElement("div");
 
var div = document.createElement("div");
−
var animTime = 10*speed_percentage/100;
+
var animTime = 20*speed_percentage/100;
 
div.style.width = size_px.toString() + "px";
 
div.style.width = size_px.toString() + "px";
 
div.style.height = size_px.toString() + "px";
 
div.style.height = size_px.toString() + "px";
Line 12: Line 23:
 
div.style.animationDuration = animTime.toString() +"s";
 
div.style.animationDuration = animTime.toString() +"s";
 
div.style.animationName = "rise_up";
 
div.style.animationName = "rise_up";
−
div.style.animationIterationCount = "infinite";
+
div.style.animationIterationCount = 'infinite';
 
document.getElementsByClassName('bubbles_window')[0].appendChild(div);
 
document.getElementsByClassName('bubbles_window')[0].appendChild(div);
 
}
 
}

Latest revision as of 21:26, 11 October 2021