looney.js
make page transitions more entertaining
looney.js uses SVG masks to animate a page transition.
<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>
<a id="example-1" href="index.html">Click me</a>
looney({
selector: '#example-1',
blur: 20,
playAudio: true
})
<a id="example-2" href="index.html">Click me</a>
looney({
selector: '#example-2',
fill: '#F44336',
blur: 0,
duration: 1000
})
<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();
})
Looney Tunes and the Looney Tunes theme song are ™ and © Warner Bros. Entertainment, Inc.