looney.js

looney.js uses SVG masks to animate a page transition.

Usage

<a href="https://www.google.com">Google</a>

<script src="build/looney.min.js"></script>
<script>
  // Basic usage
  looney()

  // All options with default values
  looney(document.body, {
    selector: 'a',    // which elements trigger the transition
    fill: '#000',     // the transition fill
    blur: 0,          // how much the circle edges should be blurred
    playAudio: false, // whether to play music
    duration: 6900,   // the transition duration (music speed is adjusted accordingly)
    pause: 0          // how long to pause before redirecting
  })
</script>

Examples

Classic

<a id="example-1" href="index.html">Click me</a>

looney({
  selector: '#example-1',
  blur: 20,
  playAudio: true
})

Click me

Flat

<a id="example-2" href="index.html">Click me</a>

looney({
  selector: '#example-2',
  fill: '#F44336',
  blur: 0,
  duration: 1000
})

Click me

Button with pattern as fill

<button id="example-3">Press me</button>
<svg width="0" height="0">
  <defs>
    <pattern id="example3-image" patternUnits="userSpaceOnUse" width="400" height="400">
      <image xlink:href="http://www.prguitarman.com/comics/poptart1red1.gif" x="0" y="0" width="400" height="400" />
    </pattern>
  </defs>
</svg>

looney({
  selector: '#example-3',
  fill: 'url(#example3-image)',
  duration: 2000,
  pause: 1000
})

document.getElementById('example-3').addEventListener('click', function() {
  location.reload();
})