Create Floating Ads That Move Across The Screen - jQuery bay-window.js

bay-window.js is a jQuery plugin that creates floating popup windows from any DOM elements and makes them move around over the web page.

This plugin is not just an ordinary popup that was originally designed for messages: it even outperforms a page's main content by being able to be moved across the screen. Can be used for ads, promotions, announcements, or to show something important.

How to use it:

1. Load the JavaScript jquery.bay-window.js in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.bay-window.js"></script>

2. Create a floating popup window dynamically.

$.createBayWindowElement({

  // width/height of the popup window
  width: '400px',
  height: '300px',

  // path to the ads image
  src: './images/bay-image.png',

  // url
  href: 'https://www.jqueryscript.net',
  
  // target attribute
  target: '__blank',

  // text to display in the close button
  closeText: 'close',

}).bayWindow({

  // step length
  stepLength: 1,

  // start position
  startTop: 0,
  startLeft: 0,

  // z-index
  zIndex: 9999,
  
})

3. Create a floating popup window from an existing DOM element within the document.

<div class="custom" id="custom">
  ...
</div>

$('#custom').bayWindow({
  // options (see above) here
})

4. API methods.

// start the animation
$('#custom').bayWindow('run');

// stop the animation
$('#custom').bayWindow('stop');

// destroy the animation
$('#custom').bayWindow('destroy');

---

This awesome jQuery plugin is developed by trague. For more Advanced Usages, please check the demo page or visit the official website.