logo blog

Floating

// Create the banner element var banner = document.createElement("div"); banner.id = "floating-banner"; // Set the banner's initial position banner.style.position = "fixed"; banner.style.top = "0"; banner.style.left = "0"; // Add some content to the banner banner.innerHTML = "This is a floating banner!"; // Add the banner to the page document.body.appendChild(banner); // Animate the banner's movement setInterval(function() { var banner = document.getElementById("floating-banner"); var x = parseInt(banner.style.left); var y = parseInt(banner.style.top); // Move the banner to the right and down banner.style.left = x + 1 + "px"; banner.style.top = y + 1 + "px"; // If the banner has moved off the screen, reset its position if (x > window.innerWidth || y > window.innerHeight) { banner.style.left = "0"; banner.style.top = "0"; } }, 20);

About / Contact / Privacy Policy / Disclaimer
Copyright © 2015. Bubblews Tips & Tutorial - All Rights Reserved
Template Proudly Blogger