Flux Slider is now compatible with both jQuery & Zepto.js, supports more than just WebKit browsers & is available for download/forking from GitHub.
I’ve been experimenting a lot lately with the lesser used aspects of CSS3, specifically with the powerful new CSS3 animations/transitions pioneered by the Webkit team (read more about CSS3 animations). This has, in part, been inspired by the guys at Sencha & Matteo Spinelli‘s Cubiq blog and also an increasing need for better performance on mobile devices. CSS3 animations really are an evolutionary leap forward in simplicity and power but most importantly they can also be hardware accelerated under an increasing number of browsers!1
So could this be improved if we instead used CSS animations?
If you have a
Webkit based browser (Safari, Chrome, iPhone, iPad, iPod Touch) browser that supports CSS3 transitions then you can check out a demo here. Otherwise you can take a look at a video capture below.
Currently I’ve implemented the following transitions:
- Bars image is split into bars and they fall away vertically down from left to right
- Zip same as ‘bars’ apart from alternate bars fall up and down like a zip opening
- Blocks image is split into blocks (rows/columns) which fade away at random
- Concentric image is split into concentric circles which twist clockwise and fade out
- Warp same as ‘concentric’ except each alternate circle twists clockwise/anti-clockwise
For a complete list of the currently supported transitions check out the Transition Gallery.
Once the core code is more stable I’ll release it and write a short tutorial post on how to use it on your site or write your own transitions.
The code & documentation is now available via GitHub.
Currently the code requires jQuery but the aim is to make it also work with Zepto.js as a replacement. Zepto is a new, Webkit only, microframework written by Thomas Fuchs and aims to replicate most of the jQuery API without all the cross-browser bloat. The ability to use jQuery or Zepto would make Flux a much stronger candidate for mobile deployment. As Zepto has been written to emulate the same API calls as jQuery, getting Flux to work with either framework transparently shouldn’t be a difficult task (I hope!).
Flux now supports either jQuery or Zepto.js