May 5, 2011 135

Flux Slider – CSS3 Animation based image transitions

By

Update (2011/05/26)
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

One of my favourite jQuery plugins is Nivo Slider, its one of the plugins that on first sight you can’t believe is just Javascript & CSS. Essentially its some very elegant transitions that can be applied to images to produce a slideshow on your website. Nivo makes use of Javascript animations and specifically the jQuery animate() function to perform its transitions, this works very well on most desktop machines but what about lower spec devices such as mobiles and tablets? I tested it on my iPhone 4 and iPad and on both, the animations appeared very unsmooth.

So could this be improved if we instead used CSS animations?

Introducing Flux Slider which is my experimental attempt to enable Nivo style image transitions but instead of using the traditional Javascript timer based animations to utilise the newer, more powerful CSS3 animations. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

Demonstration

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.

View Demo | Source & Doc’s @ Github

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

Update (2011/05/26)
For a complete list of the currently supported transitions check out the Transition Gallery.

Future plans

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.

Update (2011/05/26)
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!).

Update (2011/05/26)
Flux now supports either jQuery or Zepto.js

  1. Not all properties are hardware accelerated on all browsers, for info on debugging hardware acceleration of CSS3 see my previous post []
  • c0nfus3d1

    You are awesome. Thanks for your contribution to the  open source community. :) I’m curious though, should the image size affect the transitions? It works great with normal images, but I’m trying to scroll through some images that are 1900×950 pixels and having some problems..

    some times, some of the transitions work. sometimes it jumps through several images in less than a few seconds (I guess trying to catch up?) I may be pushing the issue or the computer at hand.. I don’t know, so I had to ask! Thanks again!!

  • Pradeepnair74

    Can more then on slider added to a single page. For example I want to add 10 such control in a single page showing different set of data and image. It is possible

  • http://www.joelambert.co.uk Joe Lambert

    Yeah its possible to add as many sliders as you like, just be careful as the more you add the harder the browser will have to work.

  • gregoryth

    I am also very interested in a responsive version. You might want to check the CC Slider code. It uses similar transitions and is fully responsive.

  • Pingback: Teknik CSS3 yang Perlu Anda Tahu « Wisnau

  • Zuliantoe

    hi joe, how if I want to add two sliders on one page and each slider has its own css settings

  • http://www.joelambert.co.uk Joe Lambert

    Hi, here’s an example of how to add two sliders to a single page: http://jsbin.com/inide4/2

  • Wyllos

    hi joe, i want to add div to description of image when onTransitionEnd is ok but I cannot do it hast thou a solution?

    wyllos

  • Pingback: 15 Fresh and Pure CSS3 Tutorials 2012 | Amazing Things

  • http://www.koenahn.com/ Koen Ahn

    Hi Joe. Love your slider, really smooth effects and great implementation. I’d really appreciate it, if you could take a moment to answer a question about Flux.

    I’m trying to add custom controls, because I don’t want it to play while the user is hovering over it. However, I don’t know how to call on the stop(), start() and showImage() functions that you declare in the flux script.

    I tried: flux.slider.stop(); but that didn’t work. I’m still in the process of learning Javascript, so I’m sorry if this question sounds silly. Thanks in advance!

    Koen

  • http://www.joelambert.co.uk Joe Lambert

    You’re on the right lines, instead of calling the function on the prototype object you need to call it on the instance of the object you’ve created.

    So if you’ve done the following:

    var f = new flux.slider(‘#slider’);

    Then you would call:

    f.stop();

    Hope that helps

  • http://www.joelambert.co.uk Joe Lambert

    Currently only text descriptions are supported, you can add them by using the ‘title’ attribute on the image elements.

  • http://www.koenahn.com/ Koen Ahn

     Thank you very much!

  • http://twitter.com/raynimmo Ray Nimmo

    Hey Joe,

    I have just pushed a new version of the slider onto drupal.org for Drupal 6 to accompany the Drupal 7 version I published a few weeks ago.

    They are both available at http://drupal.org/project/Flux-Slider

    Just thought I would mention some difficulty that I had back-porting the module for Drupal 6.

    The standard core version of Drupal 7 ships with jQuery 1.4.4 which is more than adequate to run the slider. However I kept running across JavaScript errors for some of the 3D transitions on the Drupal 6 version. Sadly, the latest version of Drupal 6 (which is 6.28) does not support any versions of jQuery higher than 1.3.2 and the core installation still ships with 1.2.8.

    I managed to track it down to the use of the ‘last()’ filter within the flux.js library of which there is no support until jQuery 1.4.0

    see http://api.jquery.com/last/

    I did manage to find a workaround by setting a requirement for the jQuery-Multi module (http://drupal.org/project/jqmulti) which allows for alternate versions to be served to the front end, as it breaks the back-end only.

    If anyone else is also finding they are tied to older versions of jQuery and are having trouble there are some good workarounds mentioned here > http://drupal.org/node/1058168

    Just thought I would post it here in-case anyone else is having trouble with an implementation.

    cheers,

     @raynimmo

  • Kike Antolí Millán

    Very good all the animations, for my part I believe that I am going to use swipe. Thank you Joe

  • http://mintik.com/ mintik

    Very usefull. Thnks :)

  • Pingback: jQuery Flux Slider – Css3 Animasyonlu Resim Geçişleri | Mintik

  • octobersongs

    The programer I’ve been using is having trouble with a couple of your sliders, having to do with lines appearing at the edges of bars in Bars3D and black lines appearing before animation in Blocks. (Please see attached examples.) The programming focus has been of desktop browsers (Safari, Chrome & Firefox) and touch devices (iPad & iPhone). With the Bars3D reducing the number of bars from 7 to 5 improved the appearance, but did not eliminate the problem completely. Bars#d looks perfect on iPad, but not on iPhone and desktop browsers. Blocks looks perfect on desktop browsers, but not on iPhone or iPad. I really love how these two transitions look/work on your site, but so far with the results my programmer has been coming up with, they are unusable. Would really like to use one or the other on my site. Please help. Let me know if there is anything else you might need to know.

    Thank you,

    Joe

  • Geirr Sethre

    Hi Joe. Great plugin! I’m trying to work out how to use it with only ‘swipe’ gestures using only the cube 3D effect. Can’t seem to work it out. Would apperciate if you could show me the configuration for this to work

  • chesswav

    hello Awsome plugin, looks graet… but i have problem with it :/ I’m trying to choose only one transition for slider:

                window.f = new flux.slider('#slider', {
    

    pagination: true, transitions: ‘swipe’, delay: 5000 });

    But transition doesn’t work :( What i’m doing wrong?

  • A guy

    Did you ever figure this out? I am having the same issue!

  • A guy

    I actually fixed it.. you have to put it in this syntax..

    transitions: [ 'turn' ]

    Hope this helps!!

  • Prabhash

    In my flux slider bars and zip is not working

  • Boris

    How see responsive example? Very Thank!

  • George

    Hey there, First off, Thanks big time for this great plugin, it’s the best one so far in the market. It’s neat and very user friendly. Again, thank you and keep up the good work. My question is: How can I but a border-radius on the images? I tried many things without any success. Thanks

  • BK

    Any chance of getting this great plugin updated to support IE 10 & IE 11

  • tbray

    Hi – not sure how often you read this, but i’ve run into a problem that only I seem to be having: If i have 4 items in the flux slider, I only get 3 pagination dots, if I have 10, i get 9. It’s skipping the first one. I’ve done nothing to the code to tweak it, it’s almost literally “as-is” though I have modified the css to fit my dimensions. I did manually position the pagination through position:relative / top -30px (it was being covered over by the body content beneath the slider), otherwise, I haven’t touched the js (any of it).

    any idea why this might be happening in every browser?

    love it otherwise – thank you

  • http://www.joelambert.co.uk Joe Lambert

    Odd, not sure why this would be happening & not had any other reports of this. You haven’t got any other CSS which might be removing the first/last child for example?

  • Alex

    How can you use divs with text instead of images?

  • http://www.joelambert.co.uk Joe Lambert

    Unfortunately you can’t, this is an image slider script I’m afraid.

  • Alex

    Ok. Thank you!

  • HumbleGuy

    Hi Joe

    Beautiful and very unique work.

    I am looking for something similar, but including video. So Basically a collection of images and videos and when the video comes up, it plays the video and moves on to either next image or next video.. looping through the videos and images.

    Is it something that you can guide me?

  • Pingback: Flux – 2D-3D geçişlere sahip bir uygulama

  • Pingback: 8个应该了解的CSS3技术 | 乐享weby

  • umesh

    can i use for commercial applications