3D slider jQuery plugin(philparsons.co.uk)
philparsons.co.uk
3D slider jQuery plugin
http://www.philparsons.co.uk/demos/box-slider/
11 comments
Once we recreate every single transition available on 90's era video mixers with javascript can we start using the language to actually break new ground?
You must be asking if we can use WebGL to break new ground, right?
It's amazing how it's 2012 and we're just now getting around to what flash did years ago, the only difference being a more open, more reliable, standards compliant runtime.
Thinking back on the last 10 years of web dev, it seems like Adobe really squandered a good thing with a bad implementation.
Thinking back on the last 10 years of web dev, it seems like Adobe really squandered a good thing with a bad implementation.
The 3D sliders were terribly slow on my computer (Chrome, latest.) Is it just a setting that can be tweeked or is the delay due to the library? Otherwise, very cool fade and choices like that.
Here it wasn't slow, but it wasn't quite as smooth as I expected. Is it being manually animated by JS, without using requestAnimationFrame or CSS transitions?
Strange, I had the opposite experience on an iPad 3. The 3D animations performed way better than the 2D ones - a bit of tearing on the sliders.
CSS 3D transforms are hardware accelerated on iOS, so yes they will look great. Chances are the parent poster isn't getting H/W acceleration, possibly due to driver issues etc.
The 3D animations weren't 3D at all, for me. They were both exactly the same as fade.
Your browser must not support 3D transitions so the plugin degrades to the fade transition. Try one of the latest Chrome/Safari/Firefox browsers to see the 3D scrolling.
Here's the link to the github repo for this project: https://github.com/p-m-p/jquery-box-slider
Worked smoothly in ff beta but my first impression was ruined because halfway through the demo the images were flipped upside down for some reason and remained like that regardless of which effect I selected. Page refresh reset it.
This is a bug with Firefox's implementation, there's an open ticket for it here https://bugzilla.mozilla.org/show_bug.cgi?id=769892
This worked great on an Intel mobile 945 (no 3D accel) equipped laptop in FF. Graceful fallback for Chrome.
(It's hard to give up on a laptop that gives you 10 real hours of battery life.)
Am I only one who thinks that the Horizontal Scroll effect is backwards ? When clicking on the right arrow, I expect to see the next image on the right, not the one on the left.
No you're quite right, that's backwards.
Ah, I did actually fix this! (https://github.com/p-m-p/jquery-box-slider/commit/7970c64d26...) I will update the demo :)
Great :)
Codrops posted something similar to this. http://tympanus.net/Development/Slicebox/
This was actually my inspiration. Slicebox doesn't seem to degrade very well for Firefox which is what led me to create my own.
Awesome just what I needed for my next project. Surprisingly works amazingly flawless on iPad 2; user wheaties had to have to slowest computer in the world;)
Heh, yeah it does work well on iPad. Though to be fair, it's not really a fair comparison, since Mobile Safari specifically h/w accelerates CSS transforms, and will always work, since the hardware is known. On desktop, browsers are dealing with various issues due to crap GFX hardware and dodgy drivers. Browsers seem to be doing some some fairly mysterious blacklisting stuff to try and deal with it, but it doesn't seem to be completely working (for me at least).
That is, I can play the very latest Steam games on high graphics settings, but I can't run WebGL in my browser, despite upgrading to the latest graphics drivers for my (now fairly dated, yet powerful) Geforce 8600GT. And until a recent driver update, CSS 3D transforms also weren't working, despite those very same top-end games running just fine.
That is, I can play the very latest Steam games on high graphics settings, but I can't run WebGL in my browser, despite upgrading to the latest graphics drivers for my (now fairly dated, yet powerful) Geforce 8600GT. And until a recent driver update, CSS 3D transforms also weren't working, despite those very same top-end games running just fine.
Pretty cool content in the 3D frames. Reminded me of a childhood reading South Sea yarns and Tintin books.
Please, no. Just no.
I think you meant to say:
"While I appreciate the effort that's gone into this, I don't think the 3-D transition is an effective user interaction element because <insert reasons here>".
"While I appreciate the effort that's gone into this, I don't think the 3-D transition is an effective user interaction element because <insert reasons here>".
I meant what I said. Please don't put words in my mouth.
It was an emotional reaction. And it still is.
We went through all this with animated gifs, then <blink>, and then flash.
Please. No more.
It was an emotional reaction. And it still is.
We went through all this with animated gifs, then <blink>, and then flash.
Please. No more.
If you never bother to explain to people why something like this is a bad idea, then the flashiness is always going to win out. And probably will anyway, judging by the web at large :)
One person's opinion is just that, why not explain your reasoning, otherwise it's just a typical negative comment with no substance.