Zwoosh!

• The Basics
• Body
• Nesting Elements
• Wheelzoom & Grid
• Elastic Edges
• Events & Callbacks
• Anchors Links
• Custom Options & Public Accessible Methods

Example 1 - The Basics

zwoosh(document.getElementById("basics"));

Example 2 - Body

zwoosh(document.body);

Example 3 - Nesting Elements

zwoosh(document.getElementById("nest_outer"));
zwoosh(document.getElementById("nest_inner"));

Example 4 - Wheelzoom & Grid

Wheelzoom & Grid

zwoosh(document.getElementById("wheelzoom"), {
  gridX: 100,
  gridY: 50,
  gridShow: true,
  wheelScroll: false,
  wheelZoom: true,
});

Example 5 - Elastic edges

zwoosh(document.getElementById("edges"), {
    elasticEdges: {
      left: true,
      top: true,
      right: true,
      bottom: true,
    }
  });

Example 6 - Events & Callbacks

Events & Callbacks

There are 4 events emitted by zwoosh. You can attach and detach custom callbacks to those events. To realise an infinity scroll element, you can load and append additional content when collide.bottom triggers.

var log = document.getElementById("log");
zwoosh(document.getElementById("events"))
  .on('collide.left', function(e){
    log.innerHTML += "collide.left Event triggered<br>"
  })
  .on('collide.top', function(e){
    log.innerHTML += "collide.top Event triggered<br>"
  })
  .on('collide.right', function(e){
    log.innerHTML += "collide.right Event triggered<br>"
  })
  .on('collide.bottom', function(e){
    log.innerHTML += "collide.bottom Event triggered<br>"
  });

Example 7 - Anchor Links

• To Example 7 - Anchor Links
• To "anchors_bottom"
• To "anchors_top"
• To "anchors_hidden"
• To the top of the document. This link will only scroll the body zwoosh element.
• You can reload the document and you will be scrolled to the last anchor position given in the hash value of the address bar as soon as each zwoosh element is initialized.
• Try it with the browsers back and forward buttons.

zwoosh(document.getElementById("anchors"));

Custom Options & Public Accessible Methods

var element = zwoosh(HTMLElement, );