Catepilla
Make that image gallery get all wiggly
Demo: nclud.github.com/catepilla
Custom built developed for nclud.com v3. Probably not that useful for anyone else.
Clone from GitHub
Don't forget to update/init submodules to get the requestAnimationFrame polyfill
git clone https://github.com/nclud/catepilla.git cd catepilla git submodule update --initMarkup
Catepilla should be used on a list of images.
<ul id="gallery"> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> ... </ul>Initialize
var gallery = document.getElementById('gallery') var cat = new Catepilla( gallery, { // options... // defaults are shown, feel free to overwrite these segmentCount: 5, height: 300, segmentHeight: 0.55, transitionDuration: 0.2, perSegmentDelay: 0.05, wiggleAcceleration: 0.001, maxWiggleSpeed: 0.1, wiggleDelay: 1000, isAutoAdvancing: true, startAngle: Math.PI })Modernizr
Modernizr v2.5+ is required with the following options:
- CSS 2D Transforms
- CSS 3D Transforms
- Modernizr.prefixed()
Required CSS
.catepilla { position: relative; } .catepilla .segment { position: absolute; overflow: hidden; } .catepilla .segment img { position: absolute; }Methods
// reveal segments cat.show(); // hide segments cat.hide(); // stop wigglin' and stop cycle cat.stopAnimation() // start wigglin' and re-start cycle cat.startAnimation() // select next image cat.next() // selects image cat.setSelectedIndex( 2 ) // adds image to gallery images, accpets URL string cat.addImage('http://example.com/my-pic.jpg')
