About Chop Slider
"Chop Slider is the greatest and the most eyecatching animated jQuery image slider"
It is developed by the iDangero.us and it comes with the following features:
Amazing CSS3 Animation
- Chop Slider uses full power of CSS3 animation (2D and 3D transform transitions)
- Has own CSS3 2D Transforms and 3D Transforms support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers
Transitions Library
Transitions Library is the additional script file that contains a lot, lot, lot of predefined transition effects:
- 122 2D Transitions - the most common case. These 105 effects will work in all major browsers, except IE. In IE they will look a little bit different but still awesome
- 60 3D Transitions - for the modern browsers. Currently work in: Chrome (Windows Vista+, Mac OSX), Safari (Windows XP+, Mac OSX, iOS)
- 5 "No CSS3" Transitions - for the browsers that do not support CSS3 Transforms like IE6-9 (not presented on this demo page)
- 5 "Mobile" Transitions - for the mobile browsers (not presented on this demo page)
Chop Slider 3D
Chop Slider 2 supports amazing and the most eyecatching 3D Transitions with the following features:
- 5 sub-types of 3D Transition effect for full customization and flexibility: vertical3D (used in 3D Blocks), horizontal3D (used in 3D Blocks), multiFlip Vertical, multiFlip Horizontal (used in Multi Flip) and amazing 3D Spheres
- Chop Slider allows you to enable/disable rendering of backfaces to make effect looks more reallistic
- You can even set any background (color or image) for backfaces. All 4 back faces are supported!
- It is also possible to animate (rotate, scale, move) Slider's container in 3D dimension, but only on the time of transition. For example, this function is used in "3D Flips" 16, 17 transitions
- Amazing "Full-3D Mode". With this option all slides will be always in 3D. Only in Pro/Extended version
Content Slides - Any HTML Content Inside!
In addition to the slides with images, you can now (from v 2.2) use "Content" slides with any HTML inside - texts, videos, images, flash etc. You can combine image slides and content slides by adding special CSS class to the content slide. Chop Slider will automatically make small changes to transition parameters for the content slides. Content slides have four types of transitions:
- From image slide to content slide. In this case selected transition will work like Half transition (for 2D transitions)
- From content slide to content slide. In this case it will be simple slide transition
- From content slide to image slide. Transition will work like inverted Half transition (for 2D transitions)
- From/to content slide to/from image slide with selected 3D transition. Transition will be alway the same with simple 3D effect.
Flexible 3-Level Effects Degradation
Chop Slider comes with flexible 3-level effects degradation. It is based on features detection and with this feature Chop Slider will work in all browsers.
So the "top" effects level is the 3D Transforms, but it currently works in Webkit browsers - Chrome and Safari.
- First level of degradation. If visitor's browser do not support 3D Transforms then Chop Slider will automatically switch the Transition to 2D Transforms - it is the most common case, and these transitions are supported by all modern browsers except Internet Explorer.
- Second level of degradation. If visitor's browser do not support CSS3 2D Transforms then Chop Slider will switch the transition to the so called "No CSS3" transition effect. It is a little bit simple than previous (without rotation), but will look still awesome.
- Third level of degradation. If user will visit site from his mobile device, then Chop Slider will switch the transition effect to the most simple "Mobile" transition
The most awesome feature is that you can specify (or choose from Transitions Library) different transition for every level of degradation! If you will not specify these "degrade" transitions then Chop Slider will degrade them automatically.
Here is example how to choose different transitions from Transitions Library, very easy:
$("#my-slider").chopSlider({
....
t3D : csTransitions['3DFlips'][14], /* 14th from 3DFlips */
t2D : [ csTransitions['multi'][10], csTransitions['vertical'][5] ], /* will be picked up randomly from these two */
noCSS3 : csTransitions['noCSS3']['random'], /* will be picked up randomly from all noCSS3 transitions */
mobile : csTransitions['mobile'][3],
....
})
Build Your Own Transition Effects - Be Unique
Chop Slider allows you to create unlimited number of custom unique transitions and to be fully creative. Chop Slider has ultra flexible, smart and very powerful Math engine. It provides you with the following options:
- About 15 parametric options for 2D Transitions and 20 options for 3D Transitions like: xOffset, yOffset, scaleX( and Y and Z), rotate, translateX(and Y and Z), border-radius, opacity, origins, etc.
- About 5 time (duration) options, you can set the time (or delay) for every part of transition
- Almost all parametric options can be set to "random" value. So it is possible to create full-random transitions or soft-random transitions (e.g. you can set only one parameter to "random")
- Custom carousel. You can start the transition not only from the left-top corner, but from any slice: from first, last, middle or ... even from 18th(e.g.) slice!
- Delay progressions for Multi transition types (like 2D Multi and 3D Flips). Currently available "Linear" (slice by slice) and "Progressive" (diagonally) progressions
- Ability to specify totally different parameters for the "Next" and "Previous" transitions
- Support CSS3 timing functions (easing) like "linear", "ease-in", "ease-out", "ease", "ease-in-out", even custom cubic-bezier functions
- Support CSS3 custom origins
Here is example of "Multi-9" transition:
$("#my-slider").chopSlider({
....
/*
We use only those options
that are different from default ones
*/
t2D : {
type: "multi",
hPieces: 5,
vPieces: 10,
rotate : 90 ,
rotateSymmetric: false,
scaleX:0,
scaleY:0,
dur1: 1000,
dur2: 1,
dur3: 1000,
pieceDelay : 60,
multiDelay : "linear",
startFrom:"middle"
},
....
})
