Flying DVD (JS)

js

<style>
.dvd {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
</style>
<script type="text/javascript">
function invert(){
document.getElementById("dvd").style.filter="invert(100%)";
}
doFunction = function(){
var topPosition = 200;
var leftPosition = 20;
var up=-1;
var right=1;
var intervalId = setInterval(function() {
var dvd = document.getElementById("dvd");
var bottom = window.scrollY + window.innerHeight;
var width = window.innerWidth;
var img = document.getElementById('dvd'); 
var img_width = img.clientWidth;
var img_height = img.clientHeight;
dvd.style.left = leftPosition + "px";
dvd.style.top = topPosition + "px";
dvd.style.visibility = "visible";
    if (topPosition >= 75 && topPosition < bottom-img_height*1.15) {
    topPosition += 5*up;
}
else {
    up *= -1;
   topPosition += 5*up;
}
if (leftPosition >= 0 && leftPosition < width-img_width*1.15) {
    leftPosition += 10*right;
}
else {
    right *= -1;
    leftPosition += 10*right;
}
}, 25); 
}
 </script>
<img id="dvd" class="dvd" src="/img/dvd.png" style="position:
 absolute; visibility:hidden; height:10%; width:10%" alt="dvd video"></img>
<p align="center">
<input id="clickMe" type="button" value="Start DVD" onclick="doFunction();" />
<button onClick="window.location.href=window.location.href">Refresh Page</button>
</p>

Questions? Thoughts? Generate a Comment to this Post!


Enter Name:


Enter a Title for Later Reference:


If Applicable, Enter Reply Reference:


Enter Comment:



JS Code to Create and Format Comments in Static Websites like Hugo

hugo js

Code to automatically generate a search bar in JS from XML page content in Hugo

hugo js r

How to Include JavaScript in your Hugo Website or Blog for Cool Applications

js hugo

Search this Website